Cordova Android mediaDevices.getUserMedia 立即暂停

Question

我在科尔多瓦应用程序中遇到了相机问题。

下面的代码适用于浏览器、cordova iphone 以及 android 和 iphone 浏览器，但在 android 上没有编译的 cordova 应用程序。

const constraints = {
            audio: false,
            video: {
                    width: {min: 800, ideal: 1024, max: 1280},
                    height: {min: 600},
                    facingMode: {exact: 'user'}
                   }
            }
navigator.mediaDevices.getUserMedia(constraints)
                .then(Stream => {
                    localMediaStream = Stream;
                    if ('srcObject' in video) {
                        console.log("Stream");
                        video.srcObject = Stream;
                    } else {
                        console.log("Stream Src");
                        video.src = window.URL.createObjectURL(Stream);                     
                    }

                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                    
                    //video.play();

                    window.addEventListener("onbeforeunload", function(event) {     
                        //const tracks = Stream.getTracks();
                        const tracks = localMediaStream.getTracks();
                        tracks.forEach(function(track) {
                            track.stop();
                            console.log("Stop Track");
                        })
                        video.srcObject = null;
                        //Stream = null;
                        localMediaStream = null;
                    })


                })
                .catch(err => {
                    alert("Camera Not Supported");
                    console.log(err);
                });

我对代码进行了权限检查，相机最初会显示流，但立即暂停，在屏幕上留下静态图像。 如果我在任何位置触摸移动屏幕，相机视频都会完美工作，直到我将手指从屏幕上移开时它再次暂停。

有什么想法吗？

Answer 1

使用以下方法解决了问题：

video.onloadedmetadata = function(e) {
                    video.play();
                    setInterval(drawVideoFrame, 100);
                };

function drawVideoFrame() {
            context.drawImage(video, 0, 0, width, height);      
        }

它现在可以在我尝试过的所有浏览器（包括移动cordova）中完美运行。

Answer 2

请检查 html 文件头部的 CSP（内容安全策略）元标记以阻止此问题。

它应该包含类似的内容：

media-src 'self' mediastream: data: blob: *; 
img-src 'self' data: blob: android-webview-video-poster: *;

通过 setInterval 卸载帧以渲染到画布非常昂贵，最适合仅拍摄快照图片。

Answer 3

我通过添加一个带有无限动画的块解决了这个问题：

<div class="fake">
 m
</div>

该块的 CSS 代码是：

.fake {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  color: transparent;
  font-size: 1px;
  animation: rotate 100s infinite;
  z-index: -100;
  pointer-events: none;
}

动画由以下关键帧定义：

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
}