Camera Preview inside canvas

[Mario_R_]

Hello everyone,

is there a way to enter the preview of the camera within a canvas, using Object Camera? (Or other similar methods)
I need this because I should periodically check the color composition of images taken by the camera, the preview and the canvas seems suitable for this purpose.

Thanks for the help

[PaulF_IntelCorp]

You'll need to grab an image from the image roll and copy it into a canvas object, unless you find a camera plugin that does what you are looking for. Those plugin APIs are all written by third-parties, and generally the source is available in a GitHub repo. So if the API does not do what you want, you can modify it to suit. The XDK does not dictate how those APIs work. The XDK makes it more convenient to build Cordova apps.

[Mario_R_]

currently I solved using getUserMedia, the problem is that I turned on the camera front instead of the back one. And 'possible to select the camera to use?

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL;
if (navigator.getUserMedia){

      navigator.getUserMedia({
        video: true,
        audio: false
      }, function(stream){ 
              video.src = window.URL.createObjectURL(stream); 
      }, errorCallback);
 };

Thanks for the help

[PaulF_IntelCorp]

The APIs you are using are standard HTML5, so they may not work on some older Android devices (unless you stick to using Crosswalk). See this updated version of the getUserMedia API for some options that specify how to select the front and rear cameras:

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Very nice solution, thanks for sharing!

[Mario_R_]

Thanks for the input! I did some tests with MediaDevices.getUserMedia () to access the room back of the phone. Following the poor results. 

First way: select camera environment

      navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
           getUserMedia: function(c) {
             return new Promise(function(y, n) {
               (navigator.mozGetUserMedia ||
                navigator.webkitGetUserMedia).call(navigator, c, y, n);
             });
           }
        } : null);

        if (!navigator.mediaDevices) {
          console.log("getUserMedia() not supported.");
          return;
        }

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "environment"} })          
        .then(function(stream) {
          var video = document.querySelector('video');
          video.src = window.URL.createObjectURL(stream);
          video.onloadedmetadata = function(e) {
            video.play();
              initCanvas(); 
          };
        })
        .catch(function(err) {
          console.log(err.name + ": " + err.message);
        });

Error: TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object. ( = does not work)

Second way: select camera ID

navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
           getUserMedia: function(c) {
             return new Promise(function(y, n) {
               (navigator.mozGetUserMedia ||
                navigator.webkitGetUserMedia).call(navigator, c, y, n);
             });
           }
        } : null);

        if (!navigator.mediaDevices) {
          console.log("getUserMedia() not supported.");
          return;
        }

      MediaStreamTrack.getSources(gotSourceID);

 function gotSourceID(sourceInfos){

        for (var i = 0; i < sourceInfos.length; i++) {
            var sourceInfo = sourceInfos;

            if (sourceInfo.kind == 'video') {
                console.log(sourceInfo);
                
                if (sourceInfo.facing == "environment"){
                    id_cam = sourceInfo.id;
                    console.log("ID cam" + id_cam);
                }
            }
        }
        openSource(id_cam);
        return id_cam;        
    }

function openSource(id_camera){      
      navigator.mediaDevices.getUserMedia({ audio: false, video:     {
              optional: [{sourceId: id_camera }]
            }  }) 
        .then(function(stream) {
          var video = document.querySelector('video');
          video.src = window.URL.createObjectURL(stream);
          video.onloadedmetadata = function(e) {
            video.play();
             
          };
        })
        .catch(function(err) {
          console.log(err.name + ": " + err.message);
        });
  }

No error. Selecting the camera ID only works using App Preview, but if you use the XDK Debug or build does not receive data from the room, only a black screen. 

Some idea?

Thanks for the help

[Mario_R_]

It seems that Media Devices.getUserMedia () can not be used on Android, has anyone tried?

[PaulF_IntelCorp]

Mario, are you using Crosswalk and the Debug tab? If you are testing in App Preview on an Android 4.x device you will not have good results. The Android 2.x and 4.x webviews are very old. You must use Crosswalk and the Debug tab if you want to use modern HTML5 features like those you are describing here.

[Mario_R_]

Paul thanks the explanation on versions.
Let me explain, Media Devices.getUserMedia () works well with App Preview but does not work instead on Debug and build (with Crosswalk or Android - on version 5.0.1).
You have tried to use this method on Android 5? Does it work? If you build what settings you used?

Maybe I'm wrong settings build?

[PaulF_IntelCorp]

If it fails on Crosswalk it is likely to also fail on Android 5+, because they use the same Chromium web runtime. However, they can differ in how well the web runtime is "hooked up" to some device features, especially something like this. Those device features can have device-specific aspects that make things work or not work at the web runtime layer.

Probably better to search for a third-party Cordova plugin that does what you need...