navigator.mediaDevices.getUserMedia, No camera feedback when using mobile browsers but works perfectly in Desktop browsers

  Kiến thức lập trình

When accessing thru desktop browser its working locally and using https:// connection
but when im using mobile (android and IOS) browser (safari for IOS)(chrome and brave) for testing no feedback from my function, not even hitting my message logger and its not also hitting the try catch if theres some error using mobile browser.

Note : Permission on app settings and site setting for browsers are enabled for camera.
I also have secured connection because it was deployed on the server.

here is my code but its not working on mobile browsers, hoping anyone can help me

THankssss.

html

js

const video = document.getElementById('video');

   try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
       video.srcObject = stream;
       document.getElementById('lblcam').innerHTML = 'it works!!!';

   } catch (err) {
       document.getElementById('lblcam').innerHTML = 'errrr: ' + error.message + '! ';
   }

I also tried this

const videotag = document.getElementById(‘video’);

const videotag = document.getElementById('video');

  try {

      navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
          .then(stream => {


              videotag.srcObject = stream;
              videotag.onloadedmetadata = () => {
                  videotag.play();
              };

              document.querySelectorAll('.btn-cam').forEach(elem => {
                  elem.disabled = false;
              });


          }).catch(err => {

              document.getElementById('lblcam').innerHTML = 'Unable to access the camera: ' + err.message + '!';
              document.querySelectorAll('.btn-cam').forEach(elem => {
                  elem.disabled = true;
              });

          });


  } catch (error) {

      document.getElementById('lblcam').innerHTML = 'Error accessing the camera: ' + error.message + '! ';
      document.querySelectorAll('.btn-cam').forEach(elem => {
          elem.disabled = true;
      });

  }

Tried parameters that suggested from docs and yet no camera feedback from mobile browsers

New contributor

Kharl John Deguma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT