使用getUserMedia与离子只能得到黑屏

Question

林测试一些媒体与离子和IM功能，同时试图使用使用此代码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

这个问题的最终解决方案是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); 
    } 

}); 

Answer 2

我设法重现问题，并通过使用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/