javascript- getUserMedia on Safari

Question

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>

*"which one I should refer to"* Your code is using [this one](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), which is the [steram API one](https://caniuse.com/stream), which is supported on iOS Safari v11+ (and in standalone PWAs from Safar v13.4+). What do you mean by "it show me nothings"? Do you reach the fulfillment handler (`.then` callback) in your code? — T.J. Crowder, Nov 18 '21 at 08:25
Note that your assignment to the `track` variable is suspect (it *could* be fine, but that sort of thing is often an error), see [this question's answers](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) in case you're trying to use `track` prematurely. — T.J. Crowder, Nov 18 '21 at 08:27
@T.J.Crowder it just show me white blank after I allow the permission. I have no idea did I reach the fulfillment or not because I don't have any method to open 'console' on Iphone safari. Since it work fine on Chrome and Firefox so I just **assume** it not reach the fulfillment. Can you provide me any method to open console on Iphone safari so that I can ensure it reach the fulfillment or not. Thank you! — QI SHUN WONG, Nov 18 '21 at 08:52
*"I have no idea did I reach the fulfillment or not because I don't have any method to open 'console' on Iphone safari."* You can do *other* things to find out, like adding an element to the document, doing an `alert`, ... — T.J. Crowder, Nov 18 '21 at 09:00

score 1 · Answer 1 · answered Nov 18 '21 at 12:41

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.

score 1 · Accepted Answer · answered Nov 24 '21 at 04:18

1

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>

answered Nov 24 '21 at 04:18

QI SHUN WONG

21
1
5

Thanks! This coupled with following constraints object worked for me `{ audio: false, video: true }` – Napuu Aug 06 '22 at 09:10

javascript- getUserMedia on Safari

2 Answers2