navigator.mediaDevice.getUserMedia ...如何访问实际的流?

问题描述 投票:0回答:1

我测试了一段来自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的流信息将保存到视频和视频中。问题是,getStserMedia本身并没有给出mediaStream。要说清楚:即使getUserMedia正在工作并且授予了权限,我还能从哪里获取流? ty回答

recording mediastream
1个回答
0
投票

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

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>
© www.soinside.com 2019 - 2024. All rights reserved.