js获取本地摄像头并拍照

/*
 * 获取本地设备列表
 * label为设备名称、deviceId为设备ID
 * 注意：设备名称需要浏览器赋予权限才能获取到，新版的火狐浏览器和谷歌浏览器均能赋予权限
 */
navigator.mediaDevices.enumerateDevices()
.then(function (devices) {
    devices.forEach(function (device) {
        //打印设备类型、设备名称、设备ID
        console.log(device.kind + ":" + device.label + "  id=" + device.deviceId);
        //根据设备名称，去获取特定的摄像头
        if (device.label.indexOf("Logitech") != -1){
            getCamera(device.deviceId);
        }
    });
}).catch(function (err) {
    console.log(err.name + ":" + err.message);
})


/*
 * 初次使用，没有浏览器赋予摄像头权限，获取不到设备名称，在这里发起一次摄像头调用
 * 根据浏览器弹框提示，赋予摄像头永久权限
 * 浏览器赋予权限后，前面就能够获取到设备名称label，能够正常获取video视频，此处就不再调用
 */
var v = document.querySelector("video");
if (v == null){
    getCamera_lvke("");
}

/*
 * 根据设备ID获取特定的摄像头，并将视频流展示到页面
 */
function getCamera(deviceId) {
    var constraints;
    if (deviceId != ''){//传入的设备ID不为空，设置特定的设备ID
        constraints = {
            audio: false,
            video: { deviceId: { exact: deviceId}}
        }
    } else {//传入的设备ID为空，不设定设备ID，video开启就行
        constraints = {
            audio: false,
            video: true
        }
    }

    //创建video标签
    var video = document.createElement('video');
    //设置video元素参数
    video.setAttribute('autoplay', 'autoplay');
    video.style.width = '198px';
    video.style.height = '148px';
    video.setAttribute("id","lvke_cam");

    //将创建的video标签放入页面上指定的div内
    document.getElementById("passenger_camera").appendChild(video);
    //获取摄像头
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function (mediaStream) {
            //将获取到的视频流放入video标签内展示
            var video = document.getElementById('lvke_cam');
            if ("srcObject" in video) {
                video.srcObject = mediaStream;
            } else {
                video.src = window.URL.createObjectURL(mediaStream);
            }
            video.onloadedmetadata = function(e){
                video.play();
            }
        }).catch(function (err) {
        console.log(err.message);
    })
}


//拍照
function capture(){
    //创建canvas标签
    var canvas = document.createElement('canvas');
    //设置canvas宽高
    canvas.width = 1280;
    canvas.height = 960;
    var context = canvas.getContext('2d');
    //获取之前获取到的视频video标签
    var video = document.getElementById('lvke_cam');
    //利用video画图
    context.drawImage(video, 0, 0, 1280, 960);
    //将canvas图像转换为base64字符串，设置格式以及压缩比例
    var datauri =  canvas.toDataURL('image/jpeg', 90 / 100 );
    //将base64字符串放入页面图片显示区域，显示拍照的图片
    $("#PassengerPic").attr("src",datauri);
}