Zastosowanie getUserMedia z jonowa się tylko czarny ekran

Question

Im testowania niektóre media cech z jonowe i im zatrzymany podczas próby ustawić wyjście z kamery na tagu wideo za pomocą getUserMedia użyciu tego kodu:

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"); 
} 

Jest to 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> 

Mogę dostać tylko czarny ekran. Czy moje podejście jest słuszne, czy też brakuje mi czegoś?

Answer 1

Ostateczne rozwiązanie tego problemu jest to, że getUserMedia wymagają sprawdzenia uprawnienia wykonawcze do praca. Aby to osiągnąć użyłem wtyczki this. Wtedy to działało jak czar:

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

Udało mi się odtworzyć problem i rozwiązać go, korzystając z opcji constraints. Za pomocą constraints można ustawić opcję sourceId, która umożliwia wybór między kamerą przednią lub tylną. Jestem pewien, że twoje urządzenie nie ma przedniego aparatu i chyba dlatego dostajesz czarny ekran.

Najpierw tworzymy nasze możliwości przymusu:

var constraints = {}; 

MediaStreamTrack.getSources (function(sources) { 
    sources.forEach(function(info) { 
     if (info.facing == "environment") { 
      constraints = { 
       video: { 
       optional: [{sourceId: info.id}] 
       } 
      }; 
     } 
    }) 
}) 

Wtedy nazywamy 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"); 
} 

Ostrzeżenie: MediaStreamTrack.getSources zwraca obietnicę więc to oznacza, że ​​jeśli spróbujesz uruchomić navigator.getUserMedia kod naraz, to się nie powiedzie. Będziesz musiał zawinąć go w funkcję i uruchomić jako callback.

Więcej informacji na temat aparatu i wybór źródła dźwięku można znaleźć tutaj: https://developers.google.com/web/updates/2015/10/media-devices

również ładny przykład tutaj: https://simpl.info/getusermedia/sources/