Estoy trabajando en un lector de códigos QR con JavaScript. Si un usuario está en mi sitio web, solicita permiso para usar la cámara. Tan pronto como el usuario lo acepta, enciende la cámara frenética. Estoy usando un Samsung Galaxy S4 con la última versión de Chrome y esto funciona bien hasta ahora.

He agregado un menú desplegable para cambiar de la cámara delantera a la trasera. Tan pronto como cambio la cámara, la transmisión de video se detiene y aparece este error.

DOMException no capturado (en promesa): play () solo puede iniciarse mediante un gesto del usuario.

Lo probé en una versión anterior de Chrome que funcionó bien incluso el cambio de camare.

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

}