html5-qrcode icon indicating copy to clipboard operation
html5-qrcode copied to clipboard

On iOS error: realtimemediasource selectsettings failed constraint 10

Open e1sep0 opened this issue 4 years ago • 14 comments
trafficstars

Hello! WHen i try to open camera on iOS 14.6 in xCODE i get error: RealtimeMediaSource:selectSettings failed constraint 10 And instead camera view i see black screen (

Help please)

Html5Qrcode.getCameras().then(devices => {
                    if (devices && devices.length) {
                        cameraId = $(devices).get(-1).id;
                        $('#qr-camera-modal').modal();
                        startScan();
                    }
                }).catch(err => {
                    $('#qr-error').show();
                });


function startScan() {
                html5QrCode.start(
                    cameraId,     // retreived in the previous step.
                    {
                        fps: 10,    // sets the framerate to 10 frame per second
                        qrbox: '100%'  // sets only 250 X 250 region of viewfinder to
                                    // scannable, rest shaded.
                    },
                    qrCodeMessage => {
                        if (qrCodeMessage.match("^(register|login)")) {
                            location.href = '/' + qrCodeMessage;
                        }else {
                            console.log(`QR Code detected: ${qrCodeMessage}`);
                        }
                    },
                    errorMessage => {
                        // parse error, ideally ignore it. For example:
                        // console.log(`QR Code no longer in front of camera.`);
                    })
                    .catch(err => {
                        console.log(`Unable to start scanning, error: ${err}`);
                    });
            }

e1sep0 avatar Sep 21 '21 07:09 e1sep0

it seems your camera does not support 10 frames/sec try 15 or 20

ROBERT-MCDOWELL avatar Sep 21 '21 11:09 ROBERT-MCDOWELL

No, didn`t work( One time i was able to get the camera to work, when added controls to video element in js:

return e.style.width=A+"px",e.muted=!0,e.setAttribute("muted","true"),e.setAttribute("playsinline","true"), e.playsInline=!0,e.controls=!0,e}

But camera works only after pressing on play button and in Fullscreen mode. Error RealtimeMediaSource:selectSettings failed constraint 10 keeps appearing in XCode

e1sep0 avatar Sep 22 '21 07:09 e1sep0

It seems, that element in iOS doesn`t want take attributes playsInline and autoplay

e1sep0 avatar Sep 22 '21 07:09 e1sep0

No ideas ?

e1sep0 avatar Sep 23 '21 09:09 e1sep0

it's an xcode issue, you better to ask in xcode forums

ROBERT-MCDOWELL avatar Sep 23 '21 11:09 ROBERT-MCDOWELL

Why XCode? I think? it problem of navigator.getMediaDevices or problem in video element attributes. Camera works only with controls and in FullScreenMode, but i use attributes playsinline, muted, autoplay

e1sep0 avatar Sep 24 '21 12:09 e1sep0

Does it work, if you remove the faulty attributes?

mebjas avatar Sep 30 '21 15:09 mebjas

Hello) No, it works only after adding attribute controls. Appears play button, after pressing open full screen camera. Only this way (( No inline playing, no autoplaying unfortunately

e1sep0 avatar Sep 30 '21 15:09 e1sep0

Hello, I had the same issue when using this library with cordova on iOS. The solution was to enable the inline video playing in the cordova configuration:

Edit config.xml and add the following preference: <preference name="AllowInlineMediaPlayback" value="true" />

No need to modify the attributes of the video element defined in src/camera/core-impl.ts.

Reference: Is it possible to play multiple inline videos

bilal-elchami avatar Feb 14 '23 10:02 bilal-elchami

@bilal-elchami I am using Cordova Android, when i click request camera permission on the screen, it is stuck on REQESTING CAMERA PERMISSIONS, but no popup or any other indication, do i need to install another permission plugin to request that? Any pointers? Thanks

clarklight avatar Jun 06 '23 05:06 clarklight

@clarklight I remember having this particular issue on Android as well. Make sure that you have the following permissions in your AndroidManifest.xml.

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

And I think the issue was that the library couldn't prompt the camera permissions requests in an android context. So a little workaround was opening then closing the camera elsewhere in order to trigger the permission (by calling the cordova camera plugin for example) to make sure that the app has the user's permission to use the camera, then launching the scanner.

Let me know if it worked for you and good luck ✌🏼

bilal-elchami avatar Jun 06 '23 06:06 bilal-elchami

@bilal-elchami Just to update you, i got it to work!!!! SWEET!! I used the permission plugin, and triggered the request, then it worked!! Thanks for the help!!

clarklight avatar Jun 08 '23 03:06 clarklight

@clarklight congrats. @mebjas I think we need to mention this problem in a another issue for future reference and probably make a fix for it.

bilal-elchami avatar Jun 08 '23 06:06 bilal-elchami

Hello, I had the same issue when using this library with cordova on iOS. The solution was to enable the inline video playing in the cordova configuration:

Edit config.xml and add the following preference: <preference name="AllowInlineMediaPlayback" value="true" />

No need to modify the attributes of the video element defined in src/camera/core-impl.ts.

Reference: Is it possible to play multiple inline videos

@bilal-elchami Thank you for solving a problem that has been bothering me for a long time

lonjack avatar Mar 22 '24 11:03 lonjack