/?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>

https://caniuse./?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>

• javascript
• ios
• safari
• camera
• getusermedia

• "which one I should refer to" Your code is using this one, which is the steram API one, 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 Commented Nov 18, 2021 at 8: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 in case you're trying to use track prematurely. – T.J. Crowder Commented Nov 18, 2021 at 8: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 Commented Nov 18, 2021 at 8: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 Commented Nov 18, 2021 at 9:00

2 Answers 2

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>

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 remends 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.