Use getUserMedia with ionic get only black screen

Question

Im testing some media features with ionic and im stuck while trying to set the camera output into a video tag using getUserMedia using this code:

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

this is the 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>

i can actually get only a black screen. Is my approach right or im missing something?

Answer 1

I managed to reproduce the problem and solved it by using the constraints options. Using constraints you can set the sourceId that allows you to select between front or rear camera. Im sure that your device has no front camera and i guess this is why you are getting the black screen.

First we create our constraint options:

var constraints = {};

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

Then we call the 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");
}

Warning: MediaStreamTrack.getSources returns a promise so that means that if you try to run your navigator.getUserMedia code at once, it will fail. You will have to wrap it in a function and run it as a callback.

More info about camera and audio source selection can be found here: https://developers.google.com/web/updates/2015/10/media-devices

also a nice example here: https://simpl.info/getusermedia/sources/

Answer 2

The final solution to this problem is that getUserMedia require a runtime permission check to work. To achieve that i used this plugin. Then this worked like a charm:

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

});