ionic-framework - 使用带有 ionic 的 getUserMedia 只获得黑屏

Question

我正在使用 ionic 测试一些媒体功能，并且在尝试使用 getUserMedia 使用以下代码将相机输出设置为视频标签时卡住了:

navigator.getUserMedia = navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: false, video: { width: 500, height: 500 } },
      function(stream) {
         console.log("Im streaming!!", stream);
         var video = document.querySelector('video');
         console.log("video element", video);
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
            console.log("stream start");
            video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

这是 html:

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <video  id="video" autoplay="autoplay" width="500" height="500"></video>
      </ion-content>
    </ion-pane>

我实际上只能得到一个黑屏。我的方法是正确的还是我遗漏了什么？

Answer 1

我设法重现了这个问题并通过使用 constraints 解决了它选项。使用 constraints您可以设置 sourceId允许您在前置或后置摄像头之间进行选择。我确定您的设备没有前置摄像头，我想这就是您看到黑屏的原因。

首先，我们创建约束选项:

var constraints = {};

MediaStreamTrack.getSources (function(sources) {
    sources.forEach(function(info) {
        if (info.facing == "environment") {
            constraints = {
              video: {
                optional: [{sourceId: info.id}]
              }
            };
        }
    })
})

然后我们调用 navigator.getUserMedia :

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia(constraints,
      function(stream) {
         console.log("Im streaming!!", stream);
         var video = document.querySelector('video');
         console.log("video element", video);
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
            console.log("stream start");
            video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

警告 : MediaStreamTrack.getSources返回一个 promise ，这意味着如果你尝试运行你的 navigator.getUserMedia一次编码，它会失败。您必须将其包装在一个函数中并将其作为回调运行。

可以在此处找到有关相机和音频源选择的更多信息:
https://developers.google.com/web/updates/2015/10/media-devices

这里也是一个很好的例子:
https://simpl.info/getusermedia/sources/