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.