Cannot record video+audio on Safari 11/12/13 #332

ledzgio · 2019-02-11T17:23:01Z

Description

Cannot record video/audio on Safari 12.0.3 using the following libraries:

VIDEOJS: Using video.js 7.5.0 with videojs-record 3.4.2 and recordrtc 5.5.4

Steps to reproduce

Just try to record a video using Safari browser

Results

Expected

Record the video correctly

Actual

The video has a small delay (less than 2 seconds) and when I start recording, the video doesn't stop and I see the error below in the console

Error output

Browser console produces the following:

VIDEOJS: – "ERROR:" – "Your browser does not supports Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder."
(funzione anonima) — video.min.js:12:1481
error — video.min.js:12:2368
dispatcher — video.min.js:12:10365
pe — video.min.js:12:11112
trigger — video.min.js:12:15153
(funzione anonima) — video.min.js:12:193742
n — video.min.js:12:12359
n — video.min.js:12:12359
dispatcher — video.min.js:12:10341

The text was updated successfully, but these errors were encountered:

thijstriemstra · 2019-02-11T17:24:55Z

@ledzgio can you also post the player config?

ledzgio · 2019-02-11T17:26:16Z

@ledzgio can you also post the player config?

These are the player options:

var options = {
	    controls: true,
	    width: 320,
	    height: 240,
	    fluid: true,
	    muted: false,
	    plugins: {
	        record: {
	            audio: true,
	            video: true,
	            maxLength: 15,
	            videoMimeType: "video/webm"
	        }
	    },
	    html5: {
	        nativeTextTracks: false
	      },
	     controlBar: {
	        fullscreenToggle: false,
	      }
	};

thijstriemstra · 2019-02-11T19:27:17Z

I also tested with Safari 12 but they have not included the MediaRecorder API that is available in Safari Technology Preview. We'll have to wait till Safari 13 (autumn 2019) I guess.

Relevant webkit ticket: https://bugs.webkit.org/show_bug.cgi?id=85851

Also see https://addpipe.com/blog/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/

ledzgio · 2019-02-12T08:59:39Z

I also tested with Safari 12 but they have not included the MediaRecorder API that is available in Safari Technology Preview. We'll have to wait till Safari 13 (autumn 2019) I guess.

Relevant webkit ticket: https://bugs.webkit.org/show_bug.cgi?id=85851

Also see https://addpipe.com/blog/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/

So the only version where the video record works in on the Safari Technology Preview? are there other versions supported? In the README you wrote:
Safari | Stable / Beta/ Preview (OSX/iOS) | Audio + Video + Image + Screen

which in that case is not true! Can you please clarify?

thijstriemstra · 2019-02-12T13:38:03Z

So the only version where the video record works in on the Safari Technology Preview?

Correct.

which in that case is not true! Can you please clarify?

Audio + Screen + Video + Image work in Safari Tech Preview. Audio + Image works in Safari 11/12. If you have a better way of structuring that documentation table, feel free to open a pull request.

alexsorokoletov · 2019-03-28T06:13:36Z

@thijstriemstra I know this question is popping up often here :)

Audio + Image works in Safari 11/12

What is exactly Audio + Image? Still photo, 1 frame?

Big respect for the videojs-project and nice wiki on how to get it started on different frameworks!

thijstriemstra · 2019-03-30T18:51:44Z

Finally got my hands on an iPhone running iOS 12.2 and when you go to Settings > Safari > Advanced > Experimental Features > MediaRecorder you can enable the MediaRecorder API for Safari!

thijstriemstra · 2019-03-30T18:55:29Z

Did some testing with Safari iOS 12.2. After enabling MediaRecorder in Experimental Features as described in previous comment, results for online demos are:

audio-only: record/playback worked, no glitches
screen-only: error: navigator.mediaDevices.getDisplayMedia is not a function (as expected)
image-only: worked ok, except the captured image is skewed when displaying
video-only: recording is fine, but recorded blob is not loaded, stays on the video preview screen. no errors logged.
audio-video: recording seems ok but no record complete callback after pressing stop, log ends with:

[Log] Stopped recording video stream. (RecordRTC.js, line 125)
[Log] Recorder state changed: – "stopped" (RecordRTC.js, line 705)

thijstriemstra · 2019-03-30T20:34:38Z

What is exactly Audio + Image? Still photo, 1 frame?

@alexsorokoletov Yea it's more like Audio or Image. Image is a single snapshot, correct. I'll improve the table.

Thanks for the kind words.

alexsorokoletov · 2019-04-01T15:28:22Z

@thijstriemstra thank you for the update.

By the way, with iOS 12.2 (public, not beta) one can go to Settings -> Safari -> Advanced -> Experimental features and enable MediaRecorder API and the recording will work.

I noticed small glitch that width and height of the recording are mixed up and because of that the video is stretched.

jelenamilanovic · 2019-09-25T12:05:38Z

As Safari 13 is released and: "Added support for the navigator.mediaDevices property of the Media Capture and Streams API to SFSafariViewController.", can you test and verify that it is working?
I am getting the same error as mentioned above.

thijstriemstra · 2019-09-25T14:15:50Z

I am getting same error as mentioned above.

What version are you using?

I'm using an iPhone 6, no support for iOS 13 :-/ maybe someone else can verify..

jelenamilanovic · 2019-09-26T07:06:37Z

Ok, thanks.

I'm using iOS 13.1, Safari 13.0.1 on iPhone 7.

VenkatachalamVE · 2019-10-03T12:49:50Z

Wow, Good for developers. navigator.mediaDevices supports in iOS 13.

Is anyone tested in iOS 13?

ledzgio · 2019-10-15T16:02:15Z

Safari 13.0.1 (13608.2.11.1.10), I did enable Experimental Media Recorder API from the settings, I can register but audio and video are not synchronised, this is the log I see in the console:

Any idea?

thijstriemstra · 2019-10-20T11:36:27Z

I tested with Safari 13.0.2 on OSX 10.14.x and was able to record after enabling the experimental MediaRecorder API. So Safari 13 still can't record out-of-the-box.

cogdog · 2020-01-27T04:30:39Z

I'm building audio recording functionality into a WordPress theme- it enables recording, playback, and when saved, converts to mp3 and uploads to media library

https://lab.cogdogblog.com/splotbox/share-it/

It's working well but not in iOS Safari 13.3.

With MediaRecorder API Experimental features on I see waveforms while recording, but on playback/saving it's flat lined nothingness.

I've not been able to get it connected to my laptop to access the Web Inspector console so I can't access error messages. Any suggestions welcome.

ledzgio · 2020-06-18T09:41:22Z

Any update on this one? I am trying to record video + audio on iOS with Chrome and it doesn't work. Any suggestion?

thijstriemstra · 2020-06-18T11:56:38Z

Any update on this one? I am trying to record video + audio on iOS with Chrome and it doesn't work. Any suggestion?

Do you see any updates? It's very bad form to add comments like this. Also, this ticket isn't about Chrome but Safari.

Igor-Techsee · 2020-06-29T15:41:19Z

@thijstriemstra It looks like on Mac+Safari WebAssemblyRecorder working without enabling MediaRecorder, but it still not working on iOS ... How can I configure WebAssemblyRecorder or WhammyRecorder in the plugin?

thijstriemstra · 2020-06-29T16:57:24Z

How can I configure WebAssemblyRecorder or WhammyRecorder in the plugin?

Use the videoRecorderType option. See https://collab-project.github.io/videojs-record/#/options

cogdog · 2020-06-29T17:46:07Z

My recordings via iOS Safari are still silent. I use this in a custom WordPress theme that incorporates Video.js to record audio. Start here

https://lab.cogdogblog.com/splotbox/share-it/

and pick Method of Sharing option to "By Recording"

On iOS it seems to record, I get waveforms, but the saved mp3 is silent.

I added this option to my scripts

  audioRecorderType: 'WebAssemblyRecorder',

but no change in iOS Safari in this attempt https://lab.cogdogblog.com/splotbox/2020/06/29/finally-ios-maybe/

Hoping to figure this out, thanks.

miguel258 · 2020-08-12T18:33:05Z

Hi guys, i have the same problem, in this moment the only way for record in IOS is enable experimental feature for MediaRecorderAPI?

Its incredible i need this feature for production environment, but its some complicated that the end user must be make this....

I'm implementend one solution using Vonage Video API, but the additional work its incredible!

thijstriemstra · 2020-08-12T18:37:10Z

in this moment the only way for record in IOS is enable experimental feature for MediaRecorderAPI?

Yes.

kapilkarda · 2020-10-07T09:49:19Z

This is not working on Safari Browser as well

thijstriemstra · 2020-10-09T11:52:45Z

Safari 14 produces video recordings that are corrupt using the MediaRecorder, this ticket is related to fixing the bug https://bugs.webkit.org/show_bug.cgi?id=85851

The latest Safari hopefully will have MediaRecorder out of experimental: https://bugs.webkit.org/show_bug.cgi?id=216664 / https://bugs.webkit.org/show_bug.cgi?id=216663

youennf · 2020-11-12T09:06:05Z

Latest Safari Tech Preview has MediaRecorder enabled by default, which contains MediaRecorder fixes.
I tried https://collab-project.github.io/videojs-record/demo/video-only.html but it does not seem to work.
Any idea what might be the issue? Is it webm vs. mp4?

youennf · 2020-11-13T17:59:28Z

iOS 14.3 first beta has MediaRecorder enabled by default as well, if anybody want to try it out.

thijstriemstra · 2020-11-14T21:26:20Z

Latest Safari Tech Preview has MediaRecorder enabled by default, which contains MediaRecorder fixes.
I tried https://collab-project.github.io/videojs-record/demo/video-only.html but it does not seem to work.

No console errors @youennf?

youennf · 2020-11-15T16:08:53Z

No JS console errors, the recording seems to go fine (I do not see any exception) when clicking on the record button.
When trying to render the recorded video, the live stream is rendered, not the recorded one.

youennf · 2020-11-23T14:44:38Z

I had a look today and it seems like a WebKit bug.
I'll track it there: https://bugs.webkit.org/show_bug.cgi?id=219258.
It seems a video element attached to a MediaStream will not consider further possibilities.
A temporary workaround might be to have two different video elements (one for regular media and one for MediaStream).

thijstriemstra · 2020-11-23T15:22:12Z

A temporary workaround might be to have two different video elements (one for regular media and one for MediaStream).

Making things more complex, just for Safari, sounds like a bad idea.

thijstriemstra · 2021-03-03T13:37:49Z

I just tested with videojs-record 4.2.0 and video.js 7.11.4 with:

Platform	Version	Device
MacOS 11.2.2	Safari 14.0.3	Desktop
MacOS 11.2.2	Safari Technology Preview 121	Desktop
iOS 14.4	Mobile Safari 14.0.3	iPhone 12

and recording audio + video worked with the default settings.

So Safari versions older than 14.0.3 are not, and cannot be, supported. I will update the browser support docs and consider this closed.

thijstriemstra · 2021-03-03T13:45:43Z

When trying to render the recorded video, the live stream is rendered, not the recorded one.

I also saw this issue, and opened a new ticket for it: #552

ledzgio changed the title ~~Cannot record video/audio on Safari 12~~ Cannot record video/audio on Safari Feb 11, 2019

gkatsev mentioned this issue Feb 11, 2019

Cannot record video on Safari videojs/video.js#5791

Closed

thijstriemstra added the known-browser-issue label Feb 11, 2019

thijstriemstra changed the title ~~Cannot record video/audio on Safari~~ Cannot record video/audio on Safari 12 Feb 11, 2019

thijstriemstra mentioned this issue Feb 11, 2019

Can't record video in Safari #181

Closed

thijstriemstra changed the title ~~Cannot record video/audio on Safari 12~~ Cannot record video+audio on Safari 11/12 Mar 5, 2019

thijstriemstra mentioned this issue Mar 22, 2019

Record Video with Chrome on iOS not triggering "allow access" #353

Closed

thijstriemstra mentioned this issue May 14, 2019

iOS Safari video orientation #370

Closed

thijstriemstra mentioned this issue Apr 20, 2020

Video Recorder doesn't work on mobile devices #459

Closed

thijstriemstra added the safari-desktop Safari macOS browser issues label May 19, 2020

thijstriemstra changed the title ~~Cannot record video+audio on Safari 11/12~~ Cannot record video+audio on Safari 11/12/13 Nov 14, 2020

thijstriemstra mentioned this issue Jan 6, 2021

Eternal Safari problem ... let's summarize and solve it ;-) #534

Closed

thijstriemstra added the safari-mobile safari iOS browser issues label Feb 1, 2021

thijstriemstra closed this as completed in 93d1146 Mar 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot record video+audio on Safari 11/12/13 #332

Cannot record video+audio on Safari 11/12/13 #332

ledzgio commented Feb 11, 2019 •

edited by thijstriemstra

Loading

thijstriemstra commented Feb 11, 2019 •

edited

Loading

ledzgio commented Feb 11, 2019 •

edited by thijstriemstra

Loading

thijstriemstra commented Feb 11, 2019 •

edited

Loading

ledzgio commented Feb 12, 2019

thijstriemstra commented Feb 12, 2019 •

edited

Loading

alexsorokoletov commented Mar 28, 2019

thijstriemstra commented Mar 30, 2019

thijstriemstra commented Mar 30, 2019 •

edited

Loading

thijstriemstra commented Mar 30, 2019

alexsorokoletov commented Apr 1, 2019 •

edited

Loading

jelenamilanovic commented Sep 25, 2019 •

edited

Loading

thijstriemstra commented Sep 25, 2019

jelenamilanovic commented Sep 26, 2019 •

edited

Loading

VenkatachalamVE commented Oct 3, 2019

ledzgio commented Oct 15, 2019

thijstriemstra commented Oct 20, 2019

cogdog commented Jan 27, 2020

ledzgio commented Jun 18, 2020

thijstriemstra commented Jun 18, 2020

Igor-Techsee commented Jun 29, 2020

thijstriemstra commented Jun 29, 2020

cogdog commented Jun 29, 2020

miguel258 commented Aug 12, 2020

thijstriemstra commented Aug 12, 2020

kapilkarda commented Oct 7, 2020

thijstriemstra commented Oct 9, 2020

youennf commented Nov 12, 2020

youennf commented Nov 13, 2020

thijstriemstra commented Nov 14, 2020

youennf commented Nov 15, 2020

youennf commented Nov 23, 2020

thijstriemstra commented Nov 23, 2020

thijstriemstra commented Mar 3, 2021

thijstriemstra commented Mar 3, 2021

Cannot record video+audio on Safari 11/12/13 #332

Cannot record video+audio on Safari 11/12/13 #332

Comments

ledzgio commented Feb 11, 2019 • edited by thijstriemstra Loading

Description

Steps to reproduce

Results

Expected

Actual

Error output

thijstriemstra commented Feb 11, 2019 • edited Loading

ledzgio commented Feb 11, 2019 • edited by thijstriemstra Loading

thijstriemstra commented Feb 11, 2019 • edited Loading

ledzgio commented Feb 12, 2019

thijstriemstra commented Feb 12, 2019 • edited Loading

alexsorokoletov commented Mar 28, 2019

thijstriemstra commented Mar 30, 2019

thijstriemstra commented Mar 30, 2019 • edited Loading

thijstriemstra commented Mar 30, 2019

alexsorokoletov commented Apr 1, 2019 • edited Loading

jelenamilanovic commented Sep 25, 2019 • edited Loading

thijstriemstra commented Sep 25, 2019

jelenamilanovic commented Sep 26, 2019 • edited Loading

VenkatachalamVE commented Oct 3, 2019

ledzgio commented Oct 15, 2019

thijstriemstra commented Oct 20, 2019

cogdog commented Jan 27, 2020

ledzgio commented Jun 18, 2020

thijstriemstra commented Jun 18, 2020

Igor-Techsee commented Jun 29, 2020

thijstriemstra commented Jun 29, 2020

cogdog commented Jun 29, 2020

miguel258 commented Aug 12, 2020

thijstriemstra commented Aug 12, 2020

kapilkarda commented Oct 7, 2020

thijstriemstra commented Oct 9, 2020

youennf commented Nov 12, 2020

youennf commented Nov 13, 2020

thijstriemstra commented Nov 14, 2020

youennf commented Nov 15, 2020

youennf commented Nov 23, 2020

thijstriemstra commented Nov 23, 2020

thijstriemstra commented Mar 3, 2021

thijstriemstra commented Mar 3, 2021

ledzgio commented Feb 11, 2019 •

edited by thijstriemstra

Loading

thijstriemstra commented Feb 11, 2019 •

edited

Loading

ledzgio commented Feb 11, 2019 •

edited by thijstriemstra

Loading

thijstriemstra commented Feb 11, 2019 •

edited

Loading

thijstriemstra commented Feb 12, 2019 •

edited

Loading

thijstriemstra commented Mar 30, 2019 •

edited

Loading

alexsorokoletov commented Apr 1, 2019 •

edited

Loading

jelenamilanovic commented Sep 25, 2019 •

edited

Loading

jelenamilanovic commented Sep 26, 2019 •

edited

Loading