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的流信息将保存到视频并播放视频。问题在于，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>

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

1 个答案: