使用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/