android - Chrome 84 Webview 更新导致渲染 MediaStream 时出现卡顿

问题描述

在 Chrome 84 更新之前，这一切都很好，85 也没有修复它。在受影响的设备上完全禁用 chrome 是我目前唯一的解决方法。我正在尝试从 Cordova 应用程序中的三星 Galaxy Tab A 渲染相机预览。

首先，我获取设备并选择后置摄像头（如果有多个）：

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!");
    }
});

选择设备后，我会使用以下功能启动相机：

    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);
    }
}

我的成功处理程序是将流注入视频元素并渲染的地方：

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();     
}

我有一个简单的<video autoplay></video>元素作为我的目标。

这是预览的样子的视频

它最终只是被破坏的预览。您可以看到它卡在第一帧上，但是如果我继续拍摄图像，它将准确反映相机指向的位置，尽管渲染流被破坏。有时，它不会卡在第一帧上，而是在前几帧之间有点“回旋镖”。

编辑：我相信这里正在跟踪这个问题

标签： androidgoogle-chromeandroid-webviewhtml5-videogetusermedia

android - Chrome 84 Webview 更新导致渲染 MediaStream 时出现卡顿 - 三星 Tab A 8.0

问题描述

解决方案

推荐阅读