技术基础：
依托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即可看到摄像头和麦克风被调用
时间： 2024-10-17 18:11:19