实现拍照功能需要使用电脑的摄像头,可以使用 navigator.mediaDevices.getUserMedia() 方法,传递相应的参数就能开启摄像头
navigator.mediaDevices 是一个媒体设备对象,通过 getUserMedia( )方法开启音频和视频媒体设备。
getUserMedia
参数:
- options:需要开启的设备的配置对象,可以开启audio、video
getUserMedia() 方法返回的是一个promise,promise得到的结果是 mediaStream 对象。把它赋值给 video.srcObject 就能播放。
开启视频媒体设备,需要在参数中设置
navigator.mediaDevices.getUserMedia({video:true}).then(res => {});
上面是简单的使用摄像头的能力,还可以设置摄像头的分辨率
// 设置固定值
navigator.mediaDevices.getUserMedia({video:{width:2400, height:1080}}).then(res => {});
// 设置区间
navigator.mediaDevices.getUserMedia({video:{width:{min:1080,max:2400}, height:{min:1080,max:2400}}}).then(res => {});
还可以设置使用前摄像头还是后摄像头
// 使用前摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:'user'}}).then(res => {});
// 使用后摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:{ext:'enviroment'}}}).then(res => {});
开启音频设备
navigator.mediaDevices.getUserMedia({audio:true});
示例
<img src="" alt="" id="img" />
<canvas id="canvas"></canvas>
<video src="" id="video"></video>
<button id="button"></button>
navigator.mediaDevices.getUserMedia({video:true}).then(meidaStream => {
const video = document.getElementById('video');
const button = document.getElementById('button');
const canvas = document.getElementById('canvas');
const img = document.getElementById('img');
// 设置为none不让其他的元素显示,只显示最终的结果
video.style.display = 'none';
canvas.style.display = 'none';
// 把摄像头得到的数据流,赋值给video让其显示
video.srcObject = mediaStream;
video.onloadmetadata = function (){
// video播放得到的数据流
video.play();
}
button.onclick = function (){
// 按钮点击的时候暂停播放,把当前的视频帧传递给canvas绘制然后通过toDataURL()方法导出图片
video.pause();
canvas.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgSrc = canvas.toDataURL();
img.src = imgSrc;
}
});
补充
mediaDevices 对象处理上面使用的方法外,还有下面这些事件和方法
方法
- enumerateDevices():列举出能使用的输入、输出的媒体设备
该方法返回一个promise对象,promise返回的数据是可使用的媒体设备的列表
navigator.mediaDevices.enumerateDevices().then(res => {
console.log(res);
});
事件
devicechange:当设备连接到系统或移除时触发
该事件可以用于监听设备的连接,当有设备连接时获取设备,没有设备时可以向客户端输出提示信息。