Frage Verwenden Sie GetUserMedia mit ionischen erhalten nur schwarzen Bildschirm


Ich teste einige Medienfunktionen mit ionischen und bin fest, während ich versuche, die Kameraausgabe mit getUserMedia unter Verwendung dieses Codes in ein Video-Tag zu setzen:

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

das ist der 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>

Ich kann tatsächlich nur einen schwarzen Bildschirm bekommen. Ist meine Annäherung richtig oder fehlt mir etwas?


7
2017-09-15 10:29


Ursprung


Antworten:


Ich habe es geschafft, das Problem zu reproduzieren und löste es mit dem constraints Optionen. Verwenden constraints du kannst das einstellen sourceId Damit können Sie zwischen der vorderen oder hinteren Kamera wählen. Ich bin sicher, dass Ihr Gerät keine Frontkamera hat und ich vermute, das ist der Grund, warum Sie den schwarzen Bildschirm bekommen.

Zuerst erstellen wir unsere Constraint-Optionen:

var constraints = {};

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

Dann rufen wir an 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");
}

Warnung: MediaStreamTrack.getSources gibt ein Versprechen zurück, das bedeutet, dass wenn Sie versuchen, Ihre navigator.getUserMedia Code auf einmal, es wird fehlschlagen. Sie müssen es in eine Funktion umbrechen und es als Callback ausführen.

Weitere Informationen zur Auswahl von Kamera und Audioquelle finden Sie hier: https://developers.google.com/web/updates/2015/10/media-devices

auch ein schönes Beispiel hier: https://simpl.info/getusermedia/sources/


3
2017-09-22 18:07



Die endgültige Lösung für dieses Problem ist, dass getUserMedia eine Laufzeitberechtigungsprüfung benötigt, um zu funktionieren. Um das zu erreichen, habe ich gebraucht Dies Plugin. Dann funktionierte das wie ein Zauber:

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

});

1
2017-10-25 16:14