需要浏览器调用相机拍照代码dom/camera_shot.htmlmediaDevices.getUserMedia()目前浏览器已经提供了可以直接访问用户媒体设备（相机）的API,麦克风），这使得浏览器可以直接从这些设备中获取相关信息，可以实现的功能包括前端拍照、录音、录像等功能。获取用户媒体，使用的函数是：navigator.mediaDevices.getUserMedia(constraints)constraints-为音频和视频指定参数，例如{audio:true,video:true}//在获取的媒体中包含音频和视频{audio:true,video:{width:1280,height:720}//获取指定尺寸的视频}该函数返回一个Promise对象，用于处理用户是否成功授权访问这些媒体。.then(success)-用于处理用户媒体成功获取后的相关操作。success回调参数包含媒体流，可用于对媒体流进行相关操作，例如：//将媒体流播放到视频元素functionsuccess(stream){letvideo=document.querySelector('#视频'）;//让compatibleURL=window.URL||窗口.webkitURL;控制台日志（流）；video.srcObject=流；//video.src=window.URL.createObjectURL(stream);video.onloadedmetadata=function(e){video.play();}}.catch(error)-用于处理调用失败，error回调参数包含错误信息。兼容性问题由于不同的浏览器对这个接口的实现方式不同，所以需要做一些兼容性处理。在新标准中，这个接口返回一个Promise对象，但是旧的浏览器使用旧的方式来处理它。functiongetUserMedia(constraints,success,error){if(navigator.mediaDevices.getUserMedia){navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);}elseif(navigator.webkitGetUserMeida){navigator.webkitGetMedia(constraints,success,error)}elseif(navigator.mozGetUserMedia){navigator.mozGetUserMedia(constraints,success,error)}elseif(navigator.getUserMedia){navigator.getUserMedia(constraints,success,error)}}如何拍照？Canvas是HTML5标准中的一个绘图接口，可用于前端的图像处理/图形绘制。在前面的代码中，我们将从浏览器获取的媒体信息显示在一个video元素上；这样我们就可以从这个元素中获取到当前帧的内容，然后把这个内容绘制到canvas元素上，实现静态图片抓取（Photograph）。letcanvas=document.querySelector('#canvas');letcontext=canvas.getContext('2d');letcaptureBtn=document.querySelector('#captureBtn');captureBtn.onclick=function(){//设置视频在Canvas上绘制当前帧，完成拍照过程context.drawImage(video,0,0,480,320);}···
