将 getUserMedia 与 ionic 一起使用仅获取黑屏

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 允许您在前置或后置摄像头之间 select。我确定您的设备没有前置摄像头，我想这就是您黑屏的原因。

首先我们创建约束选项：

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 returns 一个承诺，这意味着如果您尝试运行您的 navigator.getUserMedia 代码一次，就会失败。您必须将它包装在一个函数中，然后运行它作为回调。

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

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

Answer 2

此问题的最终解决方案是 getUserMedia 需要运行时权限检查才能工作。为此，我使用了 this 插件。然后这就像一个魅力：

cordova.plugins.diagnostic.requestRuntimePermission(function(status){
    if(cordova.plugins.diagnostic.runtimePermissionStatus.GRANTED){
      navigator.getUserMedia({video: true, audio: false}, function(localMediaStream) {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(localMediaStream);

        video.onloadedmetadata = function(e) {
          console.log('Stream is on!!', e);
        };
      }, errorCallback);
    }

});

将 getUserMedia 与 ionic 一起使用仅获取黑屏

Use getUserMedia with ionic get only black screen

getusermedia

ionic-framework