Technical basis:
WEBRTC (web-based real-time communication) specification for receiving webcam and microphone data from devices
The main reliance on the Navigator.getusermedia () API method (for security reasons, this HTML file can only be accessed through the Web server to access the file, there are various ways to build a server on the network is not described here)
Official start:
Since different browsers use different prefixes for getusermedia (), it is necessary to use a piece of code to ensure that all browsers are working correctly:
1 navigator.getusermedia=navigator.getusermedia| | navigator.mozgetusermedia| | navigator.webkitgetusermedia| | Navigator.mozgetusermedia;
The Getusermedia () method is then called.
You need to pass in three parameters to call it, the first is the type of media you want to access (currently only video and audio two options), the second is the callback function that executes when the call succeeds, and the third is the callback function that is called when the problem is called.
1 navigator.getusermedia ({ 2 Video:true, 3 audio:true 4 },onsuccess,onerror);
The full version of the code is as follows:
1(function(){2navigator.getusermedia=navigator.getusermedia| | navigator.mozgetusermedia| | navigator.webkitgetusermedia| |Navigator.mozgetusermedia;3 if(Navigator.getusermedia) {4 5 Navigator.getusermedia ({6Videotrue,7Audiotrue8 },onsuccess,onerror);9 Ten } One Else A { - Throw NewError ("Sorry, Getusermedia () is navigator supported in your browser"); - } the }()) - functiononsuccess (stream) { -Alert ("Get the Navigator Getusermedia"); - varVideo=document.createelement ("Video"); +Videosource=window. Url.createobjecturl (stream); -video.autoplay=true; +Video.src=VideoSource; A at document.body.appendChild (video); -Start.addeventlistener (' click ',function() {Beginbutton (video);},false); -Pause.addeventlistener (' click ',function() {Stopbutton (video);},false); - } - functionOnError () { - Throw NewError ("There is problem"); in}
Save it as a vedio.js file
Write an HTML file saved with the name unitl.html:
The code is as follows:
1<!doctype html>234<meta charset= "Utf-8" >5<title> Untitled Document </title>67<script src= "Video.js" type= "Text/javascript" defer= "true" >8</script>9<style>Ten ul{ Onelist-Style:url (security.gif); AColor:rgba (199,228,231,0.85) - } -</style> the<body> - -</body> -Next, when the server opens unitl.html, you can see the camera and microphone are called
Call the camera and microphone
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
