将getUserMedia与离子一起使用只会黑屏答案

【问题标题】：Use getUserMedia with ionic get only black screen将getUserMedia与离子一起使用只会黑屏
【发布时间】：2016-10-26 00:14:55
【问题描述】：

我正在使用 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>

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

【问题讨论】：

您是否尝试删除video.onloadedmetadata 并直接致电video.play()？
我可以在控制台中看到“stream start”，所以我认为 video.play() 被正确调用
你能在android manifest文件<uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.CAMERA" />中检查你是否有正确的权限
是的，我两个都有
确实在科尔多瓦应用程序上重现了该问题，并通过将摄像头设置为后置设法克服了该问题。默认情况下在前面

标签： ionic-framework getusermedia

【解决方案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/

【讨论】：

谢谢，我会试试你的解决方案！！
@Vanojx1 是的，伙计告诉我你什么时候做
我的设备有前置摄像头，我已经使用 ionic 测试了您的解决方案，但它不起作用（仍然是黑屏）......但它可以使用 simpl.info 网站上的浏览器（仅适用于前置摄像头）。我认为是与离子有关的东西
@Vanojx1 您是否收到控制台错误？我确信constraints 选项会解决您的问题。阅读我发布的文章，它们详细解释了事情是如何工作的
我在控制台“file:///android_asset/www/null”中将此作为 GET 错误

【解决方案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);
    }

});

【讨论】：