Question

我尝试使用此代码使用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会返回一个承诺，这意味着如果您尝试一次运行navigator.getUserMedia代码，则会失败。您必须将其包装在函数中并将其作为回调运行。

有关相机和音频源选择的更多信息，请访问： 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 get only black screen

2 个答案: