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.
Related
Sound is not playing in chat bot web application in iOS , chrome and Safari browser.
We are not using any browser specific code. We have added below listener and using audio.play() for sound notification.
Also in Mac Safari browser , we had the same issue with sound and we have enabled Auto play and it worked. According to the below reference , in iOS it is blocking the Auto play feature from version 11.0 Allowing Autoplay in Safari - Apple Community
Sound is working perfectly in Chrome browser for Android , Windows and Mac except iOS. Is it because of any security features which is blocking the audio ? Can you please help me to figure out the reason for this behavior?
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?
It seems after a recent iOS update (13.1.3) a bug appeared with Safari and audio recording.
Because the MediaRecorder is not supported by Safari/iOS I use (some polyfill) getUserMedia for capturing and ScriptProcessorNode for recording. After recording is finished raw data is decoded to wav and then audio can be played. Until recently it worked.
Now I've discovered a strange behavior. The recording is finished successfully but I can't playback the result audio. Playback doesn't start and there is no any errors. It's seems like Safari can't play audio when device/context is busy with capturing or etc. If I minimize browser to tray and open after some time (~10 sec) playback is work well.
This problem can be reproduced here
https://ai.github.io/audio-recorder-polyfill/
but this work fine
https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1
https://danielstorey.github.io/WebAudioTrack/index.html
Any help?
I’ve just update iOS from 13.1.3 to 13.2.3 and now all works fine
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?