How to use getUserMedia with Cordova on Android?
<p>Previewing camera input in a video element using <code>getUserMedia</code> 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?</p>

<p><a href="https://s3-eu-west-1.amazonaws.com/rafal-temp/index.html" rel="noreferrer">Example code.</a></p>

<h3>Added an example using Mozilla gUM polyfill:</h3>

<pre><code>(()=&gt;{
  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 =&gt; {
              videoElement.src = window.URL.createObjectURL(stream);
              videoElement.onloadedmetadata = () =&gt; {
                videoElement.play();
              };
            }
          )
          .catch(
            err =&gt; {
              console.log('The following error occurred: ' + err.message)
            }
          );
  }

  initCamera();

})()
</code></pre>

<p>(note that both new and deprecated gUM APIs don't work).
This results in an empty, black <code>&lt;video&gt;</code> 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.</p>

<h3>CSP config:</h3>

<pre><code>&lt;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:"&gt;
</code></pre>

<h3>AndroidManifest.xml (features and permissions)</h3>

<pre><code>&lt;uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" /&gt;
&lt;uses-feature android:name="android.hardware.camera" /&gt;
&lt;uses-feature android:name="android.hardware.camera.autofocus" /&gt;
&lt;uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&gt;
&lt;uses-permission android:name="android.permission.CAMERA" /&gt;
&lt;uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&gt;
&lt;uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&gt;
</code></pre>