7

Now that iOS 11.3 is out with the updated version of Safari.

Has anybody been able to successfully use the getUserMedia APIs to display the camera output onto a canvas?

e.g We've opened both

https://simpl.info/getusermedia/

and

https://webrtc.github.io/samples/src/content/getusermedia/canvas/

in Safari, they both ask for access to the camera - however, neither of them render anything but a black square

e.g

screenshot of the issue

owenmelbz
  • 6,180
  • 16
  • 63
  • 113
  • i get the prompt and the video here - and I am on ios 11.3 – G-Man Apr 10 '18 at 13:35
  • simpl.info/getusermedia link worked for me but second link just showed black box. iOS 11.3 on iPhone SE in Safari. – jagat Apr 24 '18 at 12:30
  • Did you find a fix to this? I am experiencing a black screen on iOS 12.1.2. I can get the microphone input correctly but I just get the black box for the camera – Shwabster Jan 17 '19 at 13:49
  • Please improve your question by isolating your problem. Is the specific problem that it won't copy to a canvas even though camera otherwise plays fine in a video element? Or you can't get camera video to [play at all](https://webrtc.github.io/samples/src/content/getusermedia/gum/)? – jib Apr 05 '19 at 14:33
  • @owenmelbz If my answer worked for you (it seems to work for most people), please mark it as the accepted answer. It would mean a lot. Thanks! – jknotek Sep 17 '22 at 15:09

1 Answers1

25

Adding a playsinline attribute to the relevant <video> tag should do the trick:

var video = document.getElementById("video-element");    
video.setAttribute("playsinline", true);

I've also found this bug difficult to replicate. And judging from the comments above, I'm not sure it's due to iOS version changes alone. Moreover, I'm unable to find any official documentation on the topic.

Nonetheless, here is some related reading material:

See this issue on GitHub

And this StackOverflow question: iOS 11 getUserMedia not working?

Edit: The WebKit BugZilla thread was mentioned in the GitHub issue I referenced above, which seems to be the closest thing to "official documentation" available.

jknotek
  • 1,778
  • 2
  • 15
  • 23