javascript - uncaught - tr html

DOMException: play() solo puede iniciarse mediante un gesto de usuario

Question

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

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

Sin captura (en promesa) DOMException: play () solo puede iniciarse mediante un gesto de usuario.

Lo he probado en una versión anterior de Chrome que funcionó bien, incluso el cambio de cámara.

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

}

Answer 1

A quien todo este tener y tratando de resolver este problema de reproducción automática; Tal vez sea un poco tarde, pero me di cuenta de cómo resolver este problema, después de hacer algunos experimentos. Estaba tratando de crear un bucle sin fin para un sonido que comienza después del botón de reproducción y no lo quería con el atributo de autoplay HTML, que estaba creando un hueco mientras se repetía. Luego me di cuenta de que si creaba una etiqueta <audio> dos veces con el mismo sonido src y luego podía setTimeout(function); para iniciar el segundo justo después del final del primero y esto sería un bucle. Aquí es donde me enfrenté con este play() DOMException . En el escritorio era impecable pero en el móvil se detenía porque necesitaba un gesto. Luego descubrí que si play() el audio con el gesto por 1 vez, podría pause() establecer currentTime = 0; y luego play() nuevo sin el gesto del usuario. El siguiente código crea un bucle sin fin para dispositivos móviles y de escritorio sin ningún problema.

Aquí está la DEMO

HTML

<audio id="rain" src="https://www.soundjay.com/nature/sounds/water-dripping-1.mp3" preload="auto">
</audio>
<audio id="rainloop" src="https://www.soundjay.com/nature/sounds/water-dripping-1.mp3" preload="auto">
</audio>
<button>
  Rain
</button>
<div id="slider"></div>

JS

$(document).ready(function(){
  var interloop;
  var aud = document.getElementById("rain");
  var audloop = document.getElementById(''rainloop'');
  var wplay = aud;
  $(''button'').click(function(){
    if(aud.paused && audloop.paused){
      audloop.play();
      audloop.pause()
      audloop.currentTime = 0;
      looper();
    } else {
      aud.pause();
      aud.currentTime = 0;
      audloop.pause();
      audloop.currentTime = 0;
      clearInterval(interloop);
    }
  });

  function looper(){
        wplay.play();
        if(wplay == aud){
        wplay = audloop;
        } else {
        wplay = aud;
        }
    interloop = setTimeout(looper, 4600);
      }

  $(''#slider'').slider({
    value: 100,
    slide:changevolume,
    stop:changevolume
    });

  function changevolume(){
    var val = $(''#slider'').slider(''value'');
    aud.volume = (val/100);
    audloop.volume = (val/100);
  }
});

Answer 2

Esto probablemente tenga que ver con el modelo de seguridad de confianza. Ciertas operaciones solo están permitidas si son iniciadas por el usuario. Esto es, por ejemplo, cómo funcionan muchos bloqueadores de ventanas emergentes. Del mismo modo, Chrome puede querer proteger a los usuarios contra la reproducción automática de videos.

Asegúrese de llamar a videoElement.play() en un controlador de eventos que esté asociado a un gesto.

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

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

Dado que su función se llama en navigator.getUserMedia , parecería extraño pedir la entrada del usuario nuevamente. ¿Has intentado usar la autoplay en el elemento de video ?