vue3-video-player调用摄像头视频流？

Question

请问如果用vue3-video-player调用摄像头实时播放，需要怎么搞？有没有例子？

Answer 1

通过navigator.mediaDevices.getUserMedia获取到摄像头采集，然后在 video标签播放

MDN 官方文档：https://developer.mozilla.org...

<video id="video"></video>

const constraints = {
  audio: true,
  video: { width: 1280, height: 720 }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then((mediaStream) => {
    const video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = () => {
      video.play();
    };
  })
  .catch((err) => {
    // always check for errors at the end.
    console.error(`${err.name}: ${err.message}`);
  });

请自行复制到本地运行，在线编辑器一般都有权限问题，效果如下