Js调用摄像头拍照

HTML部分代码

<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width:480px;height:320px"></video>
<div>
  <button id="capture">
    拍照                                                         <!--拍照按钮-->
  </button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>           <!--绘制video截图-->

 

Js

//访问用户媒体设备兼容的方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //新版API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
        //Firefox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//成功的回调函数
function success(stream) {
    //兼容的webkit核心浏览器
    var CompatibleURL = window.URL || window.webkitURL
    //将视频流设置为video元素的源
    video.src = CompatibleURL.createObjectURL(stream);
    video.play();
}

//异常的回调函数
function error(error) {
    console.log('访问用户媒体设备失败：', error.name, error.message);
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备，调用摄像头
    getUserMedia({ video: { width: 480, height: 320 } }, success, error);
} else {
    alert('你的浏览器不支持访问用户媒体设备！');
}

//绑定拍照按钮的单击事件
document.getElementById("capture").addEventListener("click", function () {
    context.drawImage(video, 0, 0, 480, 320);//将video绘制在canvas上
});