html5调用设备摄像头和麦克风,调用摄像头和麦克风(示例代码)

技术基础：

依托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 functiononSuccess(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 functiononError(){28 throw new Error("there is problem");29 }

将其保存为vedio.js文件

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

代码如下：

1

2

3

4

5

无标题文档

6

7

8

9

10 ul{11 list-style:url(security.gif);12 color:rgba(199,228,231,0.85)13 }14

15

16

17

18

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