Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Mario_R_
Beginner
157 Views

Camera Preview inside canvas

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

Tags (2)
0 Kudos
8 Replies
PaulF_IntelCorp
Employee
157 Views

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_
Beginner
157 Views

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
Employee
157 Views

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_
Beginner
157 Views

 

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_
Beginner
157 Views

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

PaulF_IntelCorp
Employee
157 Views

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_
Beginner
157 Views

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
Employee
157 Views

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...

Reply