25

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.

Koby Douek
  • 16,156
  • 19
  • 74
  • 103

1 Answers1

26

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;
    });
});
Koby Douek
  • 16,156
  • 19
  • 74
  • 103
  • 1
    Yep, it's moved to navigator.mediaDevices. Also note that while video seems to work everywhere, audio doesn't work on iPod touch - asking for audio causes an Overconstrained Error. – Nathan Friedly Oct 02 '17 at 19:42
  • 1
    I got a black screen in video and I have almost the same code. did you face this problem ? thanks – Marco Feregrino Oct 16 '17 at 21:28
  • 10
    SOLVED black screen : – Marco Feregrino Oct 16 '17 at 21:44
  • I'm keep getting same issue like described here: https://stackoverflow.com/questions/46981889/how-to-resolve-ios-11-safari-getusermedia-invalid-constraint-issue Although I'm running iOS11.1 – Ivan Pandžić Nov 14 '17 at 17:44
  • @IvanPandžić I'll be happy to help if you post a new question with your code and link it to me here as a comment. Voting up my question and asnwer would be appreciated too :) – Koby Douek Nov 14 '17 at 18:18
  • in my case helped `constraints {audio: false, video: {height: 720,width:1280,facingMode: "environment",frameRate: {max:30}}}` iphone requeres, resolution empty for ipad –  Sep 03 '20 at 15:59
  • Wait, so what's the fix here? Is it that you moved from `navigator.getUserMedia` to `navigator.mediaDevices.getUserMedia` or that you converted it from callbacks to promises? Or the styling/attributes, or what? Coz none of that's working for me :( – SeriousLee Nov 23 '21 at 09:34
  • @KobyDouek Here's my new question: https://stackoverflow.com/q/70078568/6048715 . I upvoted your question but your answer doesn't work for me so I can't upvote it :P – SeriousLee Nov 23 '21 at 09:48