3

It looks like getUserMedia() is now the way to go for capturing audio recordings from a user.

But that leaves out Safari and iOS Safari.

Originally I had at least planned to included iOS Safari by taking advantage of the HTML Media Capture spec. From everything I've read, this is suppose to work. But from my tests, iOS will only offer the photo/video options. I've tried the following syntaxes with no luck:

<input type="file" accept="audio/*;capture=microphone" />
<input type="file" accept="audio/*" capture="microphone">
<input type="file" accept="audio/*" />

Capturing an image works as expected, though, allowing the user to use the camera:

<input type="file" accept="image/*" />

What do I need to change in order to get iOS Safari to work with HTML Media Capture when needing access to the microphone?

And are there any other options available for both Safari and iOS Safari other than what I'm already attempting to do?

jabacchetta
  • 45,013
  • 9
  • 63
  • 75
  • 2
    Your first two lines of code are part of obsolete HTML Media Capture specs from 2011-2012 and should not be used anymore . See [Correct Syntax for HTML Media Capture](https://addpipe.com/blog/correct-syntax-html-media-capture/) for more details. – octavn May 02 '17 at 11:54

3 Answers3

4

Safari on iOS 6+ supports the HTML Media Capture spec but only for videos and photos:

  • <input type="file" accept="image/*" />
  • <input type="file" accept="video/*" />

It does not support audio only capture so the following will not produce the expected outcome:

  • <input type="file" accept="audio/*" />

Android supports all 3 (video, audio, image).

Thus support across Android and iOS is as follows:

enter image description here

With Safari on iOS 10.3 the capture boolean attribute is also supported. It indicates capture directly from the webcam is preferred. When used, the option to choose an existing video or image will not be offered on Safari on iOS 10.3+:

  • <input type="file" accept="image/*" capture />

I've written more on the HTML Media Capture topic at https://blog.addpipe.com/correct-syntax-html-media-capture/

octavn
  • 3,154
  • 32
  • 49
  • Great, thanks for the info. Are you aware of any other ways to capture audio on Safari? – jabacchetta May 02 '17 at 13:07
  • 1
    Not at the moment. We are waiting for the Safari update this autum. There's a high chance it will support WebRTC and getUserMedia() . – octavn May 25 '17 at 09:52
  • 1
    Confirmed: Safari and iOS Safari will indeed support getUserMedia() in version 11. No word yet on whether iOS 11 will support HTML Media Capture for audio. – jabacchetta Aug 01 '17 at 19:21
4

UPDATE: New in Safari 11.0 (iOS 11) – Camera and microphone access. Added support for the Media Capture API. Added ability for websites to access camera and microphone streams from a user's device (user permission is required.)

https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_0.html

Lior Zamir
  • 71
  • 8
  • 1
    I fixed the link (Apple moved it to Archive because version 11.0 is no longer the current (newest) version. See the Media section. – Lior Zamir Aug 13 '18 at 21:11
0

Safari still doesn't support getUserMedia properly. It fails on this: 

imgCapture = new ImageCapture(stream.getVideoTracks()[0]);

This works in Chrome but Safari has no idea what ImageCapture() is.

Lachlan Dowding
  • 4,356
  • 1
  • 15
  • 18
Brobic Vripiat
  • 176
  • 2
  • 12
  • 1
    The Image Capture API is its own interface — complementary, but not related to `getUserMedia()`. – jabacchetta Oct 21 '17 at 09:30
  • What can you do with getUserMedia if you can't capture an image from the media? I thought that was its main purpose. Do you know when Safari will support this? – Brobic Vripiat Oct 30 '17 at 22:07
  • The main purpose of the MediaDevices API (which includes the getUserMedia() method) is to provide access to hardware features, along with MediaStream tracks that are produced by that hardware. Those MediaStreams are typically handled by other APIs. One thing you can do is stream a video track from getUserMedia() to a HTML – jabacchetta Oct 30 '17 at 22:49
  • And it looks like the MediaStream Image Capture API just became available on Google Chrome a few months ago, so I wouldn't expect it to be on Safari for awhile — Apple doesn't appear to be in a rush to keep up with features that are useful for progressive web apps. – jabacchetta Oct 30 '17 at 23:01