如何解决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 举报,一经查实,本站将立刻删除。