This was all working just fine until the Chrome 84 update, with 85 not fixing it either. Disabling chrome altogether on the impacted devices is my only current workaround. I am trying to render the camera preview from a Samsung Galaxy Tab A inside a cordova app.
First, I fetch the devices and select the rear facing camera if there are multiple:
navigator.mediaDevices.enumerateDevices().then(function(dev) {
ctrl.devices = dev.filter(function(el) { return el.kind == "videoinput"; });
if (ctrl.devices.length > 1) {
// default to the back facing camera
ctrl.selectedDevice = ctrl.devices[1];
ctrl.startCamera();
}
else if (ctrl.devices.length == 1) {
ctrl.selectedDevice = ctrl.devices[0];
ctrl.startCamera();
}
else {
ctrl.NoDeviceFound = true;
console.log("No camera found!");
}
});
Once I have a device selected, I start the camera up with this function:
ctrl.startCamera = function startCamera() {
ctrl.stopCamera(); //this function just stops the stream if one was already open
if (ctrl.selectedDevice) {
var constraints = {video: { deviceId: { exact: ctrl.selectedDevice.deviceId } }};
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
}
My success handler is where the stream then gets injected into the video element and rendered:
function handleSuccess(stream) {
ctrl.stream = stream;
window.stream = stream; // make stream available to browser console
window.video = angular.element("video")[0];
if (window.screen.orientation.type.indexOf('landscape') == 0) {
video.width = angular.element("div.modal-body").width();
video.height = video.width / 1.33;
}
else {
video.height = angular.element("div.modal-body").height();
video.width = video.height * .75
}
if (typeof video.srcObject != "undefined") {
video.srcObject = stream;
}
else {
video.src = window.URL.createObjectURL(stream);
}
video.play();
}
I have a simple <video autoplay></video>
element as my target.
Here's a video of what the preview looks like
It ends up just being the preview that is broken though. You can see that it's stuck on the first frame there, however if I go ahead and capture an image it will accurately reflect where the camera is pointed despite the rendered stream being broken. Occasionally instead of getting stuck on that first frame, it will sort of 'boomerang' between the first few frames.