This is the another topic in webRTC technology tutorial series . I want to explain here about the getUserMedia API or MediaStream API of webRTC and how can we write a sample function using this API . We already familiar about the word WebRTC from my last post.
If your are new to this series please go through What is WebRTC and It’s applications intro tutorial .
About WebRTC getUserMedia API
GetUserMedia API is used to access user webcam and microphone of the devices . This is a method that belongs to windows.navigator object and it’s the first entry point of any webRTC application . Through this API , it generates some MediaStreams and it’s output which is transmit via RTCPeerConnection to peer browsers . Each media stream has it’s own label For eg: ‘XffkgjjgGiirierigrigeemfttssdjjgg’ . So we can say the overall process into two section . One is rendering the output into video or audio elements and other one is sending output to RTCPeerConnection object .
This getUserMedia ( ) method takes 3 argument as a parameter . These are
- A constraint object – webRTC Object
- A success call back – It passes media stream .
- A failure call back – It throws a error .
There are lot of websites using this API to demonstrate their application like taking photos , editing photos etc . If you want to know about these applications , Just go through some good websites like Webcam Toy , Ascii Camera etc .
Browser compatibility of getUsermedia API
The performance of this API in high in desktop computers compared to mobile platforms . Currently this API implemented in chrome 21+(-webkit prefix) , Firefox 17+ (-moz prefix) and opera 12+browsers . In mobile browsers only chrome 21+ and opera 12+ supports this API . Before writing a webRTC application you should check your browser compatibility with this API . You can also add the window.navigator API’s in your application with respect to each browsers . We will discuss these compatibility cases on coming posts .
Demo program with webRTC getUserMedia API
Now let’s write a simple program with the help of this API . WebRTC is a bundle of javascript API . So you should aware of the javascript basics first .Now lets create a simple HTML page with text editor . I am naming this HTML page as ‘samplemedia.html’ . In this HTML page , i added a simple video element with the <video></video> element tag .
<!DOCTYPE html>
<html>
<head><meta charset = "utf-8" /></head>
<body>
<!-- video element tag -->
<video id="clientvideo" autoplay></video>
<!-- include javascript file -->
<script src = “samplemedia.js"></script>
</body>
</html>
After open this page with any browser , You can see a video frame . Ok u done the front end part almost . Next we need to write getuserMedia webRTC API function in ‘samplemedia.js’ file to get the user camera and microphone access . Lets’s look how to use this API in javascript .
var client_Video = document.querySelector('#clientvideo') ;
//this function will check whether the browser support getUserMedia API
function hasUserMedia() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia;
};
//check the UserMedia support or not
if (hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: true }, function(stream) {
//display client video on HTML page
client_Video.src = window.URL.createObjectURL(stream);
//After that you need to handle RTCPeerConnection here
}, failure);
}
else{
alert("Sorry, your browser does not support WebRTC");
}
In this javascript file i created a function to check whether our browser support this webRTC API . If it is true , your browser support webRTC and you can proceed for next API ie . RTCPeerConnection . If not , your browser will throw some error . This is the basic application to check the support of webRTC API .
Output : If your browser support WebRTC , then you can see the client video on HTML page . Some time chrome browser will throw “Not allowed to load local resource: blob:null” error when your binding the local video on HTML page . To solve this problem , you need to create some signaling server . We will cover that topics on up coming posts .
If you are interested and you want to test with writing webRTC application from scratch , Just go though our posts , Write a WebRTC Application – Programming from scratch
- Part 1 – How to Create a Simple App Like A Pro
- Part 2 – Create a server with Node.js for the App
- Part 3 – Design your first WebRTC App
Conclusion
Through this post , I hope you understood about webRTC’s GetUserMedia API and it’s working on browser with a sample demo . You can take this code and run the sample application on your browser to verify whether your browser support webRTC .In up coming posts , I want to share about the next WebRTC API and it’s working with a basic sample application .
If you have any feedback or tips , We are really happy to hear them . See you again !!
Recommended Posts
Leave a Reply