In my sample ReactJs application I am using react-multimedia-capture - which uses navigator.mediaDevices.getUserMedia and the MediaRecorder API to record video.
I am able to record video from Chrome, but in Safari I am unable to capture the video. The error is something like
MediaRecorder is not defined.
Could someone please help me out like:
Does Safari supports basic video capturing?
Safari is currently not supporting MediaRecorder API by default, but you can enable them from Develop > Experimental Features > MediaRecorder.
The way to record video from safari is to use peer to peer connection and capture video at the other end.
There are few open-source application and third-party services which offer this and they are quite stable.
If you are only going to support recording from mobile, you can use HTML5 file API, which will pop up the camera in a single click. you can trim it for specific duration using ffmpeg or azure media services.
<input id="videoFile" type="file" class="hidden" accept="video/*" capture="">
Just make sure to save this file as .mp4 with the use of JavaScript to make it playable across every device or with <video> tag.
var file = $('#videoFile')[0];
var blob = file.files[0].slice(0, file.files[0].size, 'video/mp4');
var newFile = new File([blob], 'video.mp4', { type: 'video/mp4' });
In latest Safari you can enable MediaRecorder from Develop menu.
Try this Cam Recorder HTML5 demo that also provides detailed instructions for Safari.
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
I've covered supported/unsupported features in this article.
Hopefully, a more complete implementation will make it's way soon to Safari 12.x on macOS and iOS.
Octavian Naicu
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
Did you try video recording on Safari IOS 12.2?
Why does upload image via camera work on mobile-safari but not as iOS PWA?
Related
I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to have a proper solution. Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS? If not, can some one please help me with a solution.
A couple of discussions on the issues that are available on github:
HLS m3u8 video streaming
HLS on Safari
To your question:
Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?
Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame, Three, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.
The issue is this (from my understanding):
At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
For most browsers, the crossorigin attribute on a <video> element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.
Possible workarounds:
WebGL on Safari works with progressive (not a stream like HLS/Dash) .mp4 videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an .mp4.
Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.
Here's a good starting point to the real issue: link.
Here's another detailed thread: link.
https://github.com/video-dev/hls.js#compatibility
Please note: iOS Safari "Mobile" does not support the MediaSource API.
Safari browsers have however built-in HLS support through the plain
video "tag" source URL. See the example above (Getting Started) to run
appropriate feature detection and choose between using Hls.js or
natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, you
will not be able to play HLS.
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js#canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
</script>
I've problem: I need to record video from the webcam in browser. When I use safari, chrome mobile, safari mobile and try to record via MediaRecorder it doesnt work. Are there any free or proprietary solutions, e.g. libs to do that?
I have to develop video recording in Safari 11. I have used getUserMedia() to play video in Safari and It is working but It is not recording the video.
I have developed video recording in Chrome and Mozilla using Media Recorder.
Media Recorder is not supporting in Safari 11 for recording video.How will i record the video in Safari 11?
MediaRecorder API is not supported on Safari 11. They enabled MediaRecorder API on version 12.2, but it is experimental and you should enable it manually.
Here is good article describing supported properties and methods.
https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/
I am developing same type of app and solved recording problem, however there is other problems too. For example playback recorded video before uploading to the server. You can't do that too, because of known bug
Safari: unable to dynamically load video from blob url
Let's hope webkit team will fix in the near future.
Both recording and playback of video seem to work fine in latest Safari after enabling MediaRecorder from Develop menu.
Try with this Cam Recorder HTML5 demo.
I want to try to implement transferring audio stream from client to server via http using html5 instead of flash. Now I am collecting information. I want my solution to work on opera,firefox, safari, chrome, and this ... ie. The problem is with this .. ie.
As far as I understand I need Web Audio Api. According to https://html5test.com/compare/browser/ie-11.html IE11 doesn't support Web Audio Api. However, according to the same link Media Source Extensions (MSE) is also not supported. However, here https://msdn.microsoft.com/en-us/library/dn594470(v=vs.85).aspx I read:
Internet Explorer 11 introduces support for MPEG-DASH media streaming
through HTML5 Media Source Extensions (MSE). MSE extends the video and
audio elements that you can dynamically change for a media stream
without using plug-ins. This gives you such things as adaptive media
streaming, live streaming, splicing videos, and video editing.
Important This feature is not supported in IE11 on Windows 7.
So, is it possible using Media Source Extensions to extract only audio stream for sending it to server to make cross-browser solution using javascript and html5?
I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going. I want to record voice using HTML5 in Iphone and android. Is there any way?
You could try HTML Media Capture. An article on dev.opera says:
Android OS 3.0 was the first platform to provide HTML Media Capture
support, via its default Android Webkit browser. Now HTML Media
Capture is also supported by:
Safari and Chrome Mobile for iOS 6+
Chrome Mobile for Android OS 3+
Firefox Mobile for Android OS 3+
Opera 16 for Android OS 3+
Nonetheless some of them only partially implement the specification or
implement an older W3C specification, that makes the code above
slightly different:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
It links out to a demo page which you could try on your mobile. I also found this example page. In my quick iOS 7 testing though, it only worked correctly for photos and videos.
Edit: Further reading suggests accept="audio/*" isn't actually supported on iOS 6 and 7, only accept="image/*" and accept="video/*".
Update: A quick test on iOS 8.3 suggests nothing has changed here: accept="image/*" and accept="video/*" are supported, but accept="audio/*" is not.
Update: A quick test on iOS 10.0.2 suggests accept="audio/*" is still not supported, although it looks like you might be able to upload an audio file from iCloud Drive or Dropbox now.
Update: Despite what it says in the Webkit blog post, there still seems to be no support for accept="audio/*" in iOS 10.3 on my iPhone 5S.
Update: Same story in iOS 11.0.3. There still seems to be no support for accept="audio/*" on my iPhone 5S.
Update: Still the same in iOS 12.4.3. There seems to be no support for accept="audio/*" on my iPhone 5S.
This will not work on a website, but if you want to rework your web-app into a mobile app using Cordova this will let you use the microphone input. Takes some knowledge of web audio api to get working.
https://github.com/edimuj/cordova-plugin-audioinput
And RecorderJS to record its output:
https://github.com/mattdiamond/Recorderjs
Someone above mentioned RecorderJS not working on mobile but it does, it's just the mic input that doesn't work.
There is not currently any way I'm aware of to record mic input in a browser on mobile
You can use HTML5 WebAudio API.
Introduction to audio and video capturing Capture audio & video in HTML5
Nice Library to record audio with samples Recorder.js
On webkit-browsers i.e.Chrome and Safari in iOS you can use the get user media api with webkitGetUserMedia.
Details can be found here :
html5rocks