CODEWITHSUNDEEP
javascriptiossafaricameragetusermedia
QI SHUN WONG
QI SHUN WONG

Reputation: 61

javascript- getUserMedia on Safari

https://caniuse.com/?search=getusermedia

Based on the link provided above, does Safari 15 support getUserMedia? I trying use it to access camera, when I test it on safari 15 it asked camera permission, after I allow the permission it still show me nothings. The link show Safari 15 is support getUserMedia/Stream API but not support Navigator API: getUserMedia. Below is my code, which one I should refer to? getUserMedia/Stream API or Navigator API: getUserMedia

    navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
        track = stream.getTracks()[0];
        cameraView.srcObject = stream;
    })
    .catch(function (error) {
        console.error("Oops. Something is broken.", error);
    });

HTML

            <video id="camera--view" autoplay></video>

Upvotes: 2

Views: 7876

Answers (2)

QI SHUN WONG
QI SHUN WONG

Reputation: 61

after I allow the permission it still show me nothings

I solved it by adding muted and playsinline in html. Base on what I know iOS will not allow autoplay when the video does not playsinline and muted.

            <video id="camera--view" muted autoplay playsinline></video>

Upvotes: 4

O. Jones
O. Jones

Reputation: 108676

You definitely want navigator.mediaDevices.getUserMedia() method. It definitely works on iOS. The other one is deprecated. Apple is so late to the getUserMedia() party that they did not implement the deprecated API.

You can read about viewing the iOS console. You need to connect your iOS device to a mac, then use the Safari on that mac, to do that. It's a pain in the xxx neck. Explaining how is beyond the scope of a Stack Overflow answer.

Or you can use alert() for debugging.

You need to call cameraView.play() at the right moment. Here's the documentation.

It recommends doing something like this.

 navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
        cameraView.srcObject = stream
        cameraView.onloadedmetadata = function(e) {
            cameraView.play()
        }
      })
    .catch(function (error) {
        alert(error)
    })

with alert in place of console output.

Upvotes: 1

Related Questions