JavaScript：模拟拍照

实现拍照功能需要使用电脑的摄像头，可以使用 navigator.mediaDevices.getUserMedia() 方法，传递相应的参数就能开启摄像头

navigator.mediaDevices 是一个媒体设备对象，通过 getUserMedia( )方法开启音频和视频媒体设备。

getUserMedia
参数：

• options：需要开启的设备的配置对象，可以开启audio、video

getUserMedia() 方法返回的是一个promise，promise得到的结果是 mediaStream 对象。把它赋值给 video.srcObject 就能播放。

开启视频媒体设备，需要在参数中设置

navigator.mediaDevices.getUserMedia({video:true}).then(res => {});
1

上面是简单的使用摄像头的能力，还可以设置摄像头的分辨率

// 设置固定值
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 => {});
1
2
3
4

还可以设置使用前摄像头还是后摄像头

// 使用前摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:'user'}}).then(res => {});

// 使用后摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:{ext:'enviroment'}}}).then(res => {});
1
2
3
4
5

开启音频设备

navigator.mediaDevices.getUserMedia({audio:true});
1

示例

<img src="" alt="" id="img" />
  <canvas id="canvas">canvas>
  <video src="" id="video">video>
  <button id="button">button>
1
2
3
4

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;
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

补充

mediaDevices 对象处理上面使用的方法外，还有下面这些事件和方法

方法

• enumerateDevices()：列举出能使用的输入、输出的媒体设备
  该方法返回一个promise对象，promise返回的数据是可使用的媒体设备的列表

navigator.mediaDevices.enumerateDevices().then(res => {
    console.log(res);
  });
1
2
3

事件

devicechange：当设备连接到系统或移除时触发

该事件可以用于监听设备的连接，当有设备连接时获取设备，没有设备时可以向客户端输出提示信息。