HTML Camera API in Android webview

Question

I'm using the following html code. I'm able to get a video stream on my desktop, but I'm getting a grey play button in the android webView app. I'm serving this over a https connection. Please guide me as Im new to both of these code snippets.

HTML

<div id="video-container">
 <video id="camera-stream" width="500" autoplay></video>
</div>

Script.js

window.onload = function() {
 navigator.getUserMedia = (navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia || 
                        navigator.msGetUserMedia);
 if (navigator.getUserMedia) {
  navigator.getUserMedia({ video: true },
  function(localMediaStream) {
   var vid = document.getElementById('camera-stream');
   vid.srcObject = localMediaStream;
  },
function(err) {
  console.log('The following error occurred when trying to use getUserMedia: ' + err);
 }
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}

This screenshot is taken from my desktop chrome browser.

and this is taken from my phone webView.

Answer 1

I know this is an old thread but I recently run into the same issue and only after a lot of tries I finally found the solution.

If you see this play button all the permission should be set correctly. It seems that the webview is waiting for an user interaction to start the stream but tapping on the icon does not starts the video (idk how the user should "approve" the streaming)

The solution is to change the setting of the webview in you webapp:

webView.settings.mediaPlaybackRequiresUserGesture = false;

In this way the stream starts correctly without any user interaction