Android WebView - Switching between cameras: Working in browsers (Firefox and Chrome) but not working in WebView - OnChange issue?

Viewed 1000

I am developing an Android video app using WebRTC and I would like to add the ability to change from front to back camera. To practice this functionality I used this website: https://simpl.info/getusermedia/sources/ and amended the code so that now I can switch between the camera using a browser working on Chrome and Firefox on Android but it will not work properly on WebView - It will show the stream from the front camera when it is opened first but it will then not update to the back camera when I change my selection to back camera.

Does anyone know a solution or any workaround for this? Is it to do with onChange not working in Android WebView? (I have searched this but cant find a solution)

I hope this is not a stupid question, I am a complete noob to Android development.

My HTML:

<!DOCTYPE html>


<html lang="en">
  <head>
    <script src="main.js"></script> 
    <base target="_blank">
    <title>Video TEST</title>

  </head>
  <body>
    <p>This is a test</p>
    <div id="container">
      <div class="select">
        <label for="videoSource">Video source: </label><select id="videoSource"></select>
      </div>
      <video muted autoplay></video>
    </div>
  </body>
</html>

My JavaScript (main.js):

'use strict';

var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices).then(getStream).catch(handleError);

videoSelect.onchange = getStream; 



function gotDevices(deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    //This creates an element that can be used later
    var option = document.createElement('option');
    //this sets the value of the option to the ID of the Device
    option.value = deviceInfo.deviceId;
    if(deviceInfo.kind === 'videoinput') {
    option.text = deviceInfo.label || 'camera' + (videoSelect.length + 1);
    videoSelect.appendChild(option);
  } else {
      console.log('Found one other kind of source/device: ', deviceInfo);
    }

    }

}

function getStream() {
  if (window.stream) {
    window.stream.getTracks().forEach(function(track) {
      track.stop();
    });
  }

  var constraints = {
    video: {
      optional: [{
        sourceId: videoSelect.value
      }]
    }
  };

  navigator.mediaDevices.getUserMedia(constraints).
      then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream; // make stream available to console
  videoElement.srcObject = stream;
}

function handleError(error) {
  console.log('Error: ', error);
}

My Permissions (There is probably more than there needs to be)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="uk.co.babyvideolink.babyvideolink1">
    <!--Added 20/07 CB-->

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.CAPTURE_SECURE_VIDEO_OUTPUT" />
    <uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT" />
    <uses-permission android:name="android.permission.CAPTURE_AUDIO_OUTPUT" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="true" />
    <uses-feature android:name="android.hardware.camera.front" android:required="true" />
    <uses-feature android:name="android.hardware.camera.level.full" android:required="true" />
    <uses-feature android:name="android.hardware.camera.capability.raw" android:required="true" />
    <uses-feature android:name="android.hardware.camera.any" android:required="true" />
    <uses-feature android:name="android.hardware.microphone" android:required="true" />
    <uses-feature android:name="android.hardware.camera2" android:required="true" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />

Please note copyright notices have been removed from the code for brevity.

0 Answers
Related