在Chrome OS上使用JavaScript调用摄像头

该示例代码介绍了如何在Chrome OS上通过JavaScript调用摄像头来拍照或录制视频。

// 获取设备上的摄像头设备
const devices = await navigator.mediaDevices.enumerateDevices();
const camera = devices.find(device => device.kind === 'videoinput');

// 如果未授权，则请求授权
if (camera && camera.label.includes('camera') && !camera.deviceId) {
   await navigator.permissions.query({name: 'camera'});
   window.location.reload();
   return;
}

// 将摄像头视频流挂载到video元素上
const videoElement = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({
   audio: false,
   video: {
      deviceId: camera.deviceId,
   },
});
videoElement.srcObject = stream;

// 拍照
const captureButton = document.getElementById('capture');
captureButton.addEventListener('click', async () => {
   const canvas = document.createElement('canvas');
   canvas.width = videoElement.videoWidth;
   canvas.height = videoElement.videoHeight;
   const context = canvas.getContext('2d');
   context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

   const imageUrl = canvas.toDataURL('image/png');

   const imageElement = document.createElement('img');
   imageElement.src = imageUrl;

   document.body.appendChild(imageElement);
});

// 录制视频
const recordButton = document.getElementById('record');
const stopButton = document.getElementById('stop');
const mediaRecorder = new MediaRecorder(stream);
recordButton.addEventListener('click', () => {
   mediaRecorder.start();
});
stopButton.addEventListener('click', () => {
   mediaRecorder.stop();
});
mediaRecorder.addEventListener('dataavailable', (event) => {
   const videoUrl = URL.createObjectURL(event.data);

   const videoElement = document.createElement('video');
   videoElement.src = videoUrl;
   videoElement.controls = true;

   document.body.appendChild(videoElement);
});

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com