js 获取摄像头列表并拍照 或者录制视频保存到本地

可以使用 JavaScript 的 `navigator.mediaDevices.enumerateDevices()` 方法来获取设备列表，然后选择摄像头设备。

拍照：

1. 获取媒体设备的流：`navigator.mediaDevices.getUserMedia({video: true})`
2. 将流渲染到 `<video>` 标签中
3. 使用 `canvas` 将 `<video>` 标签中的图像画到画布上
4. 使用 `canvas.toDataURL()` 方法将图片转换为 `base64` 格式并保存

录制视频:

1. 获取媒体设备的流：`navigator.mediaDevices.getUserMedia({video: true, audio: true})`
2. 使用 `MediaRecorder` 对象录制视频
3. 使用 `MediaRecorder.ondataavailable` 事件来获取视频数据
4. 使用 `blob` 对象或 `URL.createObjectURL()` 方法将视频保存到本地

注意：需要在 https 环境下才能使用媒体设备。

相关问题

js调用摄像头拍照和录制视频

JavaScript 可以通过访问浏览器的 `MediaDevices.getUserMedia()` API 来访问用户的摄像头并拍照或录制视频。

拍照的示例代码如下:

// 获取摄像头视频
navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => {
    // 将视频流渲染到 video 标签上
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
    // 给拍照按钮绑定事件
    takePhotoButton.onclick = function() {
      // 创建 canvas
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 获取 canvas 的 DataURL
      const dataURL = canvas.toDataURL('image/jpeg');
      // 将 DataURL 设置到 img 标签上显示照片
      img.src = dataURL;
    };
  })
  .catch(error => {
    console.log("An error occurred: " + error);
  });

录制视频的示例代码如下:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        const mediaRecorder = new MediaRecorder(stream);
        //将视频流渲染到 video 标签上
        video.srcObject = stream;
        video.onloadedmetadata = function (e) {
            video.play();
        };
        //开始录制
        recordButton.onclick = function () {
            mediaRecorder.start();
            recordButton.style.background = "red";
            recordButton.innerHTML = "Recording";
        }
        //结束录制
        stopButton.onclick = function () {
            mediaRecorder.stop();
            recordButton.style.background = "";
            recordButton.innerHTML = "Record";
        }
        //处理视频
        mediaRecorder.ondataavailable = function (e) {
            chunks.push(e.data);
        }
        mediaRecorder.onstop = function (e) {
            const blob = new Blob(chunks, { type: "video/mp4" });
            chunks = [];

js获取摄像头拍照录像

可以使用HTML5的API来获取摄像头拍照录像，具体可以使用getUserMedia()方法来获取摄像头的视频流，然后使用canvas来进行截图或者录制视频。以下是一个简单的示例代码：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  });

这段代码会请求用户授权访问摄像头，然后将视频流绑定到video元素上，最后播放视频。你可以使用canvas来截取视频帧或者使用MediaRecorder API来录制视频。