Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS 11 getUserMedia not working?

Tags:

Apple released a statement that getUserMedia will be fully functional on iOS 11. After installing iOS 11 Beta version 5, I do get a message that my website requests access to my camera and microphone, but it seems that the line:

video.src = window.URL.createObjectURL(stream);

or:

video.srcObject = stream;

Does not work. No errors, no exceptions, simply no picture from the phone's camera.

Here's my full script:

$(function () {
     video = document.getElementById('vid');

     navigator.getUserMedia = navigator.getUserMedia ||
                              navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia;

     navigator.getUserMedia(
     {
         audio: true,
         video: { facingMode: "user" }
     }, function (stream) {
         video.srcObject = stream;
         //video.src = window.URL.createObjectURL(stream);
     },
     function (err) {           
         alert(err.name);
     });
});

HTML:

<video id="vid" muted autoplay></video>

Has anyone got it working? Any ideas would be appreciated.

like image 314
Koby Douek Avatar asked Aug 15 '17 12:08

Koby Douek


People also ask

Does getUserMedia work on iOS?

Since iOS 11, getUserMedia is supposed to finally work on Apple devices. But in fact it does not work. The JavaScript sample code below works on all other OS: Blackberry, Android, etc...

Does getUserMedia work on Safari?

getUserMedia is not supported for safari.

Is getUserMedia a part of webRTC?

getUserMedia() is a part of the webRTC media capture API and is used to get access to the camera and the microphone connected to the user device (user computer, smartphone, etc.) from the browser.


1 Answers

Solved it by using the following:

$(function () {
    video = document.getElementById('vid');
    video.style.width = document.width + 'px';
    video.style.height = document.height + 'px';
    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

    var constraints = {
         audio: false,
         video: {
             facingMode: 'user'
         }
    }

    navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
        video.srcObject = stream;
    });
});
like image 80
Koby Douek Avatar answered Sep 23 '22 00:09

Koby Douek