topic Hey Dan, in Software Archive

getMediaStream Permission App Manifest

Florian_S_1 — Sat, 11 Jul 2015 23:28:35 GMT

I am trying to print the Camera Input to a Canvas Element in HTML5. On the desktop it works fine, but building it for Android devices with cordova, I cannot access the camera and I really don't know what I do wrong. I also tried it with Crosswalk, there I get no error, but the Camera isn't shown either. But i want to do it with Cordova.

Here is my Code:

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

   navigator.getUserMedia(options, onSuccess, onFail);

var options = {
     audio: false,
     video: {
      mandatory: {
       maxWidth: window.innerWidth,
       maxHeight: window.innerHeight
      },
      optional: [{ facingMode: "user" }]
 }
}

var onFail = function(e) {
  alert('Failed to get camera');
};

var onSuccess = function(stream) {
    var video = document.getElementById('my-webcam');
    if(navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
        console.log("videoWidth" + video.width);
    } else {
        var url = window.URL || window.webkitURL;
        video.src = url.createObjectURL(stream);
    }

    // Wait 1000 ms before starting the loop otherwise the videosize aren´t set, so the Canvas can´t get values from the video
    setTimeout(function(){
        setInterval(updateCanvas,30); //manipulating the canvas here
        // Make sure the canvas is the same size as the video
        var video = document.getElementById('my-webcam'); //invisible
        var canvas = document.getElementById('my-canvas'); //where the camera input should be shown
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight; //- $('#mainPage_ButtonPhoto').height();
    },1000);
};

But if I build this, I always get the onfail alert "Failed to get camera".

I figured out it is a "errorPermissionDeniedError". I build it with xdk. But with this android.json, or app manifest for building android it is still not working and i still got the error. Here my android.json :

{
    "prepare_queue": {
        "installed": [],
        "uninstalled": []
    },
    "config_munge": {
        "files": {}
    },
    "installed_plugins": {},
    "dependent_plugins": {},
    "permissions": {
      "audio-capture": {
        "description": "Required to capture audio using getUserMedia()",
          access: "readwrite"
      },
      "video-capture": {
        "description": "Required to capture video using getUserMedia()",
          access: "readwrite"
      }
    }
}

Thank you very much for your help.
Kind regards,
SirSandmann

The webview that your app

PaulF_IntelCorp — Mon, 13 Jul 2015 18:23:26 GMT

The webview that your app runs inside does not have direct access to the camera, the way you specify such permissions are a function of the native platform and are usually handled by a plugin. What you are trying to do will probably only work with Crosswalk (which is Cordova, just Cordova with a better webview), but I'm not clear on if their is more that has to be done to get it working with Crosswalk.

Don't have any good suggestions, have not seen anyone try to do this in the context of a Cordova app. I recommend you search for Cordova or PhoneGap solutions to using this technique for hints on how to make this work. The alternative is to use some Cordova plugins that provide access to the camera and write it using one of those APIs.

Ok, thank you so far.

Florian_S_1 — Mon, 13 Jul 2015 21:03:09 GMT

Ok, thank you so far.
I was just wondering. Already tried everything and the mediaStream should be supported by Crosswalk (https://crosswalk-project.org/documentation/apis/web_apis.html). Tried phonegap plugins (Camera2Canvas) but still nothing. I will try my luck in an Crosswalk/Cordova forum.

I'm suspecting some Android

PaulF_IntelCorp — Tue, 14 Jul 2015 01:23:22 GMT

I'm suspecting some Android permissions need to be set to get it working in the Crosswalk webview.

Hey Dan,

Florian_S_1 — Wed, 16 Dec 2015 14:52:10 GMT

Hey Dan,

yes, i solved this one.
I just tried to give the device other permissions, because obviously these weren´t enough.

Here The List of Plugins I used in the Project:

I honestly forgot which one was the Plugin I added for adding the Permission. (If youi add the Plugins, some Permissions are set automatically and one/some of them were the right one). The App is working on my Phone, after I added the other for my project needed Plugins. Hope i could help, kind regards, Flo

cordova-plugin-media

StatusBar cordova-plugin-statusbar

File cordova-plugin-file

Capture cordova-plugin-media-capture

Canvas 2 Image org.devgeeks.Canvas2ImagePlugin

SocialSharing cordova-plugin-x-socialsharing

Device Orientation cordova-plugin-device-orientation

Intel XDK Device intel.xdk.device

Notification cordova-plugin-dialogs

Camera cordova-plugin-camera

Toast cordova-plugin-x-toast

Phonegap Admob plugin com.cranberrygame.phonegap.plugin.ad.admob

Google Play Services for Android com.google.playservices