mobile camera won't open with navigator.mediaDevices.getUserMedia on ios chrome browser

Viewed 327

The following code is working fine on android mobile device, However on IOS (iPhone) on Chrome browser the following is not working as expected. I saw a lot of problems regarding this issue on IOS devices. Someone has any idea how to fix this issue?

customCamera.js:

   this.Play = function (_this, stream) {

            _this.stream = stream;
            console.log(stream)
            videoElement.srcObject = stream;

            videoElement.onloadedmetadata = function () {

                // console.log("mediadataloaded");
                try{
                    videoElement.play();
    
                    window.videoElement = videoElement
    
                    animate();
                } 
                catch(error) {
                    console.error("Failed to acquire camera feed: " + error.name);
                    alert("Failed to acquire camera feed: " + error.name);
                }
                
            };
        };


async start() {

        var _this = this;

        (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) || alert("No navigator.mediaDevices.getUserMedia exists.");

        try {

            const stream = await navigator.mediaDevices.getUserMedia({
                // audio: false,
                video: {
                    facingMode: _this.options.facingMode,
                    width: _this.options.width,
                    height: _this.options.height,
                    frameRate: _this.options.frameRate
                }
            });
            this.currentStream = stream;
            window.stream = stream
            _this.Play(_this, stream);


        } catch (err) {
            if(err.name === "OverconstrainedError") {
                alert("Device dont have a back camera !")
            }
        }

    }
 

I use this "customCamera.js" in my main.js file on regular video tag:

main.js

import Camera from './customCamera.js';

 const deviceCamera = new Camera(videoElement, {
      onFrame: async () => {
            facingMode: "environment"
        });

        deviceCamera.start();
1 Answers

In IOS 12, Chrome version 19.0.4515 and below doesn't support camera but works fine in Safari.

Related