码迷,mamicode.com
首页 > 其他好文 > 详细

调用摄像头和麦克风

时间:2016-06-20 22:13:31      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

技术基础:

  依托webRTC(网页实时通信)规范实现接收来自设备上的网络摄像头和麦克风数据

  其中主要依赖navigator.getUserMedia()API方法(因为安全原因,此html文件只能通过网站服务器来访问文件,网上有各种搭建服务器的方法在此就不介绍了)

正式开始:

  由于不同浏览器对getUserMedia()的使用方法不同,需要加不同的前缀,所以先使用一段代码保障所有浏览器都能正常使用:

   1 navigator.getUserMedia=navigator.getUserMedia||navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia; 

  之后调用getUserMedia()方法.

  需要传入三个参数调用它,第一个是希望进行访问的媒体类型(目前只有video和audio两个可选项),第二个是调用成功时执行的回调函数,第三个是调用出问题时调用的回调函数。

   1 navigator.getUserMedia({ 2 video:true, 3 audio:true 4 },onSuccess,onError); 

  

  完整版代码如下:

 1 (function(){
 2     navigator.getUserMedia=navigator.getUserMedia||navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia;
 3     if (navigator.getUserMedia) {
 4 
 5         navigator.getUserMedia({
 6             video:true,
 7             audio:true
 8         },onSuccess,onError);
 9 
10     }
11     else
12     {
13         throw new Error("sorry ,getUserMedia() is navigator supported in your browser");
14     }
15 }())
16 function onSuccess(stream){
17     alert("get the navigator getUserMedia");
18     var video=document.createElement("video");
19     videoSource=window.URL.createObjectURL(stream);
20     video.autoplay=true;
21     video.src=videoSource;
22 
23     document.body.appendChild(video);
24     start.addEventListener(‘click‘,function(){beginbutton(video);},false);
25     pause.addEventListener(‘click‘,function(){stopbutton(video);},false);
26 }
27 function onError(){
28     throw new Error("there is problem");
29 }

 

  将其保存为vedio.js文件

   编写html文件保存名为unitl.html:

  代码如下:

  

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <script src="video.js" type="text/javascript" defer="true">
 8 </script>
 9 <style>
10 ul{
11     list-style:url(security.gif);
12     color:rgba(199,228,231,0.85)
13 }
14 </style>
15 <body>
16 
17 </body>
18 </html>

  接下来在服务器打开unitl.html即可看到摄像头和麦克风被调用

 

  

调用摄像头和麦克风

标签:

原文地址:http://www.cnblogs.com/Bideam/p/5601720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!