I have created a web application with camera input. Using the html 5 tools I've managed to display a stream from a mobile device camera in a video element.
Using the video.facingMode I have implemented a switch between user and environment. This solution works well on Android Chrome and IOS Safari, but not properly on Android Firefox.
I've used remote debugging to get the error message that is thrown in the catch:
Error: DOMException: Starting videoinput failed
I have found that this issue might have been caused because there was already an active stream running, so I implemented the track.stop() function ahead of switching to a new video feed, but with no success.
Here is my basic code from my project to give some background on what I made:
function getStream() {
const facingMode = Session.get('facingMode');
const constraints = {
video: { facingMode: facingMode }
};
return navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(_stream) {
stream = _stream
videoElement.srcObject = stream;
}
function handleError(error) {
if (stream) {
stream.getTracks().forEach(track => {
track.stop();
});
}
console.error('Error: ', error);
}
The getStream function is run after the page is rendered and in the click event to toggle between facing modes.