前端用H5打开摄像头

web前端开发过程怎么写 计算机前端开发前景怎么样 前端开发未来前景怎么样

html代码:
<video id=”video” width=”640″ height=”480″ autoplay></video>
<button id=”snap”>Snap Photo</button>
<canvas id=”canvas” width=”640″ height=”480″></canvas>
接下来是js代码:

打开摄像头
var aVideo=document.getElementById(‘video’);
var aCanvas=document.getElementById(‘canvas’);
var ctx=aCanvas.getContext(‘2d’);

    navigator.getUserMedia  = navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
    navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息

    function gotStream(stream) {
        video.src = URL.createObjectURL(stream);
        video.onerror = function () {
          stream.stop();
        };
        stream.onended = noStream;
        video.onloadedmetadata = function () {
          alert('摄像头成功打开!');
        };
    }
    function noStream(err) {
        alert(err);
  }

按钮模拟拍照
document.getElementById(“snap”).addEventListener(“click”, function() {

    ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});

这样就成功啦!
但是!!!还有一点要注意,这在很多人那里都没有提到的,就是,打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!

前端开发英文怎么说 怎么才能学好web前端开发 开发前端怎么测试

» 本文来自:前端开发者 » 《前端用H5打开摄像头》
» 本文链接地址:https://www.rokub.com/5974.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!