DOMException: play() can only be initiated by a user gesture

Question

I'm working on a QRCode Reader with JavaScript. If a user is on my website, it asks for permission to use the device camera. As soon the user accept it, it turns on the front 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.

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

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

}

Answer 1

This might help.

webViewSettings.setMediaPlaybackRequiresUserGesture(false);