微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Chrome 84 Webview更新导致呈现MediaStream时出现卡顿现象-Samsung Tab A 8.0

如何解决Chrome 84 Webview更新导致呈现MediaStream时出现卡顿现象-Samsung Tab A 8.0

直到Chrome 84更新,而85也没有修复,所有这些工作都很好。我目前唯一的解决方法是在受影响的设备上完全禁用chrome。我正在尝试从cordova应用程序内的Samsung 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>元素作为目标。

Here's a video of what the preview looks like

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

编辑:I believe this issue is being tracked here

解决方法

实际上是this chromium bug,已针对Chrome 86修复并确认可以在我的设备上运行。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。