7

Previewing camera input in a video element using getUserMedia works perfectly fine in Chrome, but breaks as soon as I run the same code within a Cordova container. Any ideas what could've caused that?

Example code.

Added an example using Mozilla gUM polyfill:

(()=>{
  var promisifiedOldGUM = function(constraints) {

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

    if(!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });

  }

  if(navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }

  if(navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
  }





  function initCamera() {
      const constraints = { audio: false, video: { width: 1280, height: 720 } };
      const videoElement = document.createElement('video');
      videoElement.style.width = '100px';
      videoElement.style.height = '100px';
      document.body.appendChild(videoElement);

      navigator.mediaDevices
          .getUserMedia(constraints)
          .then(
            stream => {
              videoElement.src = window.URL.createObjectURL(stream);
              videoElement.onloadedmetadata = () => {
                videoElement.play();
              };
            }
          )
          .catch(
            err => {
              console.log('The following error occurred: ' + err.message)
            }
          );
  }

  initCamera();

})()

(note that both new and deprecated gUM APIs don't work). This results in an empty, black <video> element. No errors are fired. I assumed initially that this issue was related to AndroidManifest.xml permissions and CSP, but fixing them makes no difference.

CSP config:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' android-webview-video-poster: data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * blob:">

AndroidManifest.xml (features and permissions)

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
2
  • Hi #Rafal, Have you able to fix this issue? i am facing the same issue?
    – Abdul Rauf
    Commented Nov 24, 2016 at 10:44
  • Hi Abdul, I filed an issue on the official Jira account a few months ago and now it seems to be resolved. Because of some other, performance related problems, I've decided to switch to Unity in my project, so I didn't have a chance to test it again. Perhaps try to update your Cordova packages to the most recent version (in case you haven't tried it yet)? Please let me know if this works for you, so we can update the question. Good luck:) Commented Nov 24, 2016 at 11:59

1 Answer 1

1

Sorry, not enough reputation to comment. I have not read your code, so can't comment on it.

I was getting just a black box on the video element.

My problem was fixed by (Android 7.0):

Settings -> Apps -> [My App] -> Permissions -> Camera (allow)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.