DOMException：play（）只能由用户手势启动 [英] DOMException: play() can only be initiated by a user gesture

问题描述

我正在使用JavaScript编写QRCode Reader。
如果用户在我的Wensite上，它会要求获得使用相机的许可。一旦用户接受它，它就会打开frant camara。我正在使用带有最新Chrome版本的三星Galaxy S4，到目前为止一切正常。

I'm working on a QRCode Reader with JavaScript. If a user is on my Wensite, it asks for permission to use the camera. As soon the user accept it, it turns on the frant camara. I'm useing a Samsung Galaxy S4 with the latest Chrome Version and this works fine so far.

我添加了一个从前到后改变的下拉列表。
一旦我更换相机，视频流就会停止，我收到此错误。

I've added a Dropdown to Change from the front to the rear camara. As soon I Change the camera the Video stream stops and I get this error.

未捕获（在承诺中）DOMException：play （）只能通过
用户手势发起。

Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

我在较旧版本的Chrome上尝试过它即使是camare改变也工作正常。

I've tried it on a older Version of Chrome which worked fine even the camare Change.

            var videoElement = document.createElement("video");
            var videoSelect = document.querySelector("select#videoSource");

            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

            function start() {
              if (window.stream) {
                videoElement.src = null;
                window.stream.stop();
              }
              var videoSource = videoSelect.value;
              var tw = 640 // 320 // 640 // 1280;
              var th = 480 // 240 // 480 // 720

              var hdConstraints = {
                audio: false,
                video: {
                    mandatory: {
                            maxWidth: tw,
                            maxHeight: th
                        },
                    optional: [{
                        sourceId: videoSource
                    }]
                }
              };
              if (navigator.getUserMedia) {
                navigator.getUserMedia(hdConstraints, success, errorCallback);
              } else {
                    errorCallback("");
                }
            }

            videoSelect.onchange = start;
            start();

            function gotSources(sourceInfos) {
              for (var i = 0; i !== sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                var option = document.createElement("option");
                option.value = sourceInfo.id;

                if (sourceInfo.kind === "video") {
                  option.text = sourceInfo.label || "camera " + (videoSelect.length + 1);
                  videoSelect.appendChild(option);
                } else {
                  console.log("Some other kind of source: ", sourceInfo);
                }

              }
            }

            if (typeof MediaStreamTrack === "undefined") {
              alert("This browser does not support MediaStreamTrack.\n\nTry Chrome.");
            } else {
              MediaStreamTrack.getSources(gotSources);
            }

            function errorCallback(e) {
                console.log("Cant access user media", e);
            }

            function success(stream) {

                window.stream = stream;
                videoElement.src = window.URL.createObjectURL(stream);
                videoElement.onclick = function() { videoElement.play(); };
                videoElement.play(); //Here is the Error


                function getFrame() {
                    requestAnimationFrame(getFrame);

                    if (!videoElement.videoWidth) return;

                    if (!image) {
                        width = videoElement.videoWidth, height = videoElement.videoHeight;
                        log("videoElement", width, height, videoElement);

                        var canvas = document.createElement("canvas");
                        canvas.width = width;
                        canvas.height = height;
                        canvas.style.transform = "scale(1, 1)";

                        ctx = canvas.getContext("2d");
                        document.body.appendChild(canvas);

                        log("start");
                        image = Module._xsetup(width, height);
                        log("_xsetup", image, "pointer");
                        return;
                    }

                    ctx.drawImage(videoElement, 0, 0, width, height);
                    var imageData = ctx.getImageData(0,0, width, height);
                    data = imageData.data;
                    gofill();
                }

                getFrame();

}

推荐答案

这可能与受信任的安全模型有关。某些操作仅在用户启动时才允许。这就是很多弹出窗口阻止程序的工作原理。同样，Chrome可能希望保护用户免受自动播放视频的影响。

This probably has to do with the trusted security model. Certain operations are only allowed if they're initiated by the user. This is for instance how a lot of popup blockers work. Likewise Chrome may want to protect users against auto-playing videos.

确保拨打 videoElement.play（）在与手势相关联的事件处理程序中。

Make sure you call videoElement.play() in an event handler that is associated to a gesture.

// this should be ok
videoElement.addEventListener("click", function () {
    videoElement.play();
});

// this is not ok
setTimeout(function () {
    videoElement.play();
});

因为您的函数是在中调用的navigator.getUserMedia 再次询问用户输入似乎很奇怪。您是否尝试在视频元素上使用 autoplay ？

Since your function is called in navigator.getUserMedia it would seem strange to ask for user input again. Have you tried using autoplay on the video element?

这篇关于DOMException：play（）只能由用户手势启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！