let canvas= document.getElementById('canvas');

let context= canvas.getContext('2d');varmediaStreamTrack;//访问用户媒体设备的兼容方法

functiongetUserMedia(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) {//firfox浏览器

navigator.mozGetUserMedia(constraints, success, error);

}else if(navigator.getUserMedia) {//旧版API

navigator.getUserMedia(constraints, success, error);

}

}functionsuccess(stream) {//兼容webkit核心浏览器

let CompatibleURL = window.URL ||window.webkitURL;//将视频流设置为video元素的源

//video.src = CompatibleURL.createObjectURL(stream);

//播放

video.srcObject =stream;

video.play();

mediaStreamTrack=stream

}functionerror(error) {

alert('调用摄像头失败')

}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia) {

getUserMedia({ video: { width:300, height: 400} }, success, error);

}else{

alert('不支持访问用户媒体');

}//拍照

document.getElementById('capture').addEventListener('click', function() {

context.drawImage(video,0, 0, 300, 400);//photoSrc 就是拍照得到的base64的图片数据，将数据传递给后端就可以了

var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);

// 以下就是调用接口将数据传递给后端，省略...

})//关闭摄像头

document.getElementById('close').addEventListener('click', function() {if(mediaStreamTrack) {

mediaStreamTrack.getTracks()[0].stop();

}

});