2

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.

Edit: I believe this issue is being tracked here

schube
  • 21
  • 2

1 Answers1

0

It was in fact this chromium bug, which has been fixed for Chrome 86 and confirmed working on my devices.

schube
  • 21
  • 2