navigator.mediaDevices.getUserMedia... 如何访问实际流？

Question

我测试一段代码取自 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia。 我正在尝试记录麦克风数据以将其访问给其他用户并将其记录到数据库中。实际上，我什至没有从网络摄像头获取数据。

// Prefer camera resolution nearest to 1280x720.
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
 video.onloadedmetadata = function(e) {
 video.play();
  };
  })
.catch(function(err) { console.log(err.name + ": " + err.message); }); //               always check for errors at the end.

对我来说，上面的代码尝试打开用户媒体，如果成功，来自 mediaStream 的流信息被保存到视频并播放视频。问题是，媒体流不是由 getUserMedia 本身给出的。 说清楚：即使 getUserMedia 正在工作并获得许可，我从哪里获得流？ 求回答

Answer 1

这对我有用，我可以在浏览器中看到视频流。

https://granite-ambulance.glitch.me

    const video = document.querySelector('video');

    async function stream() {
      
      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
        video.srcObject = mediaStream;
      } catch (e) {
        console.error(e)
      }
      video.onloadedmetadata = async function(event) {
        try {
          await video.play();
        } catch (e) {
          console.error(e)
        }
      }
    }

    stream()

<video></video>