H5 调用摄像头

http://www.cnblogs.com/libin-1/default.html?page=17

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。 

1、getUserMedia

要播放摄像头的影像，首先需要一个video标签：

 

1	< video  id="video"></ video >

获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：点这里

 

不过，使用的时候还是要加上前缀的，兼容代码：

1 2 3

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

1	语法： navigator.getUserMedia(constraints, successCallback, errorCallback);

　参数说明：

• constraints：Object类型，指定了请求使用媒体的类型
• succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。
• errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：

　PERMISSION_DENIED：用户拒绝提供信息。

   NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。

   MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。

　例如：要启用视频设备（摄像头），可这样：

1 2 3

navigator.getUserMedia({      video: true  });

　如果要同时启用视频设备和音频设备，可这样：

1 2 3 4

navigator.getUserMedia({      video: true,      audio: true  });

　　2、 获取摄像头

　

1 2 3 4 5 6 7 8 9

var URL = window.URL || window.webkitURL; // 获取到window.URL对象    navigator.getUserMedia({      video: true   }, function(stream) {      video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址      video.play();      }, function(error) {      console.log(error.name || error);   });

　　

3、 截图

除了实时直播外，我们还可以做实时截图效果，这时我们需要利用 <canvas>元素来画图，代码如下：

1 2 3 4 5 6 7 8 9 10

< canvas  id="canvas"></ canvas >   var canvas = document.getElementById('canvas');   var ctx = canvas.getContext('2d');   var width = video.width;   var height = video.height;   canvas.width = width;   canvas.height = height;   ctx.drawImage(video, 0, 0, width, height);

　　

　

4、 保存图片

当然，截图后，你也可以保存下来：

　　

1 2 3 4

< a  download='snap.png' id="download">下载图片</ a >     var url = canvas.toDataURL('image/png');  document.getElementById('download').src = url;

　　5、 完整实例

实例代码（由于安全限制问题，请将代码复制到本地运行）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<! DOCTYPE  html>  < html >      < head >        < meta  charset="UTF-8">        < title ></ title >        < style >        #canvas,#video {          float: left;            margin-right: 10px;            background: #fff;          }              .box {            overflow: hidden;            margin-bottom: 10px;          }      </ style >    </ head >      < body >        < div  class="box">        < video  id="video" width="400" height="300"></ video >        < canvas  id="canvas"></ canvas >      </ div >      < button  id="live">直播</ button >      < button  id="snap">截图</ button >      < script >          var video = document.getElementById('video');        var canvas = document.getElementById('canvas');          var ctx = canvas.getContext('2d');          var width = video.width;          var height = video.height;          canvas.width = width;          canvas.height = height;           function liveVideo(){            var URL = window.URL || window.webkitURL;   // 获取到window.URL对象          navigator.getUserMedia({              video: true            }, function(stream){              video.src = URL.createObjectURL(stream);   // 将获取到的视频流对象转换为地址            video.play();   // 播放            //点击截图                 document.getElementById("snap").addEventListener('click', function() {                ctx.drawImage(video, 0, 0, width, height);                var url = canvas.toDataURL('image/png');                document.getElementById('download').href = url;              });          }, function(error){              console.log(error.name || error);            });          }          document.getElementById("live").addEventListener('click',function(){            liveVideo();          });          </ script >      </ body >  </ html >