RecordRTC
RecordRTC copied to clipboard
Display video recorded on IOS
Hi,
I have a website that can record video from camera and screen thanks to your recordrtc plugin.
When the video is recorded, I upload it to azure storage and then get a link to display it on the website.
It both working on Chrome and Firefox. However, when I try to open the link with IOS, it just doesn't play the video or download a file that cannot be read.
I tried every video extension possible (webm, mp4, mkv, m4v) with every codecs (vp8, vp9, h264) but it just doesn't work on safari.
I checked the content type and it is indeed video/webm
or video/mp4
(I tried with everything) and the contentDisposition is "inline; filename=\"test.mp4\""
.
I precise that if I upload a random video from my computer folders, it is working everywhere and even of IOS safari, it is only happening when I record a video and upload it.
Here is an example of what it's in my code (typescript) to record a video:
var options = { mimeType: "video/webm;codecs=h264", video: {width: 1920, height: 1080}, bitsPerSecond: 51200000 } that.recordRTC = RecordRTC([stream], options); that.recordRTC.startRecording();
Hope you can help me.
Same here: a video recorded in Chrome on Windows or Android does not play in iOS. The other way around: A video recorded on IOS does seem to play on Chrome in Windows.
The problem appears to be that Chrome records the audio part of the stream with the "Opus" codec. The video is encoded with H264. When Apple records something the audio codec uses "AAC" and the video is also H264. The Apple video plays everywhere, but the Chrome video (Opus) does not work on iOS.
Whatever I try in Chrome to get it to record in something else than "Opus" the result is still "Opus". I guess there is some sort of limitation here.
Does anyone know how to get Chrome to the audio stream in "AAC" or something that iOS understands?
var recordingPlayer = mediaElement.media;
var mediaContainerFormat = 'h264,AAC';
var mimeType = 'video/mp4';
var fileExtension = 'mp4';
var type = 'video';
var recorderType;
var defaultWidth;
var defaultHeight;
also tried:
var mediaContainerFormat = 'vp8';
var mimeType = 'video/webm\;codecs=vp8';
var fileExtension = 'webm';
The result in VLC:
Same issue on me :(