H5 调用摄像头

来源：互联网发布：淘宝靠谱的aj 编辑：程序博客网时间：2024/05/22 16:42

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>

0 0