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?

did you try to remove `video.onloadedmetadata` and call `video.play()` directly? — Sarantis Tofas, Sep 21 '16 at 23:12
i can see "stream start" in the console so i think video.play() is called correctly — Vanojx1, Sep 22 '16 at 06:47
can you check if you have the correct permissions in the android manifest file ` ` — Sarantis Tofas, Sep 22 '16 at 15:22
did reproduced the problem on a cordova app, and managed to overcome the problem by setting the camera to rear. it was by default to front — Sarantis Tofas, Sep 22 '16 at 18:13

Sarantis Tofas · Answer 1 · 2016-09-26T15:31:49.390

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/

my device ve front camera, i ve tested your solution using ionic and it wont work ( still black screen )... but it works ( only with front camera ) using browser on simpl.info website. I think is something related to ionic — Vanojx1, Sep 26 '16 at 09:57
@Vanojx1 are you getting console errors? I am sure that the `constraints` options will solve your problem. Have a read on the articles i posted as well, they explain in details how things work — Sarantis Tofas, Sep 26 '16 at 10:04
im having this in console "file:///android_asset/www/null" as a GET error — Vanojx1, Sep 26 '16 at 10:29

score 4 · Accepted Answer · answered Oct 25 '16 at 16:14

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

});

Use getUserMedia with ionic get only black screen

2 Answers2