I wanted to record Laptop's webcam video stream on safari browser.
I am accessing the stream on browser by using MediaDevices.getUserMedia().
It seems MediaRecorder interface will do the trick (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder).
However this isnt supported by Safari.
Any recommendation on how i should record the webcam stream and build a video recorder that runs on Safari.
It seems there is nothing available for Safari at the moment.
MediaRecorder polyfill to record audio in Edge and Safari.
Related
I am trying to use mediaRecorder API and make it run on maximum of browsers
video/webm;codecs=vp8,opus : that works fine on chrome and Firefox.. but not on Safari
video/mp4;codecs:h264 : works on Safari and Chrome.. but not on Firefox
It looks like Safari is now able to play webm.
What would be the mime type to use to make it run on both 3 browsers ?
I've been attempting the same thing and it is painful to say the least.
I'm able to use MediaRecorder to record video across Chrome, Firefox, Edge, and Safari. BUT the resulting videos do not playback on all browsers.
Safari - records in mp4 and mp4 will playback on all browsers
Chrome & Edge - I'm recording with mimeType: "video/webm;codecs=vp9", which will playback on Chrome, Firefox, and Edge, but not Safari.
Firefox - I'm using the default. It will playback on Chrome, Firefox, and Edge, but not Safari.
Supposedly Safari will playback webm with macOS Big Sur 11.3. I need to upgrade to test this.
Unfortunately webm is still not supported by iOS, so I'm looking into the Cloudconvert API to convert webm videos to mp4 before storing in S3.
Other suggestions welcome.
You'll need to use the MediaRecorder.isMediaTypeSupported API to find out what the browser you are using supports. See this open PR for details.
That does not help with playback however.
You've stumbled into an electropolitical food fight.
Sad to say, there's no commonality of codecs between browsers. You won't be able to find a common codec. Apple (Safari) is firmly in the H.264 / AAC world, the world of MP4.
Chrome, but not open-source Chromium, supports H.264 (which carries a patent burden). The fully open source Chromium browser does not. Firefox, via an automatically installed plugin from OpenH264.org, does, but it only supports H.264's constrained baseline version, not the fancier versions. Use MIME type video/webm; codecs="avc1.42E01F" and you'll be fine in Firefox and Chrome.
Microsoft new Edge supports the same stuff as Chrome.
WebRTC is rigged to allow endpoints to negotiate codecs with each other. In my opinion this is a kludgey way to patch this electropolitical squabble.
This is not a good situation. But it's Q1CY2021 reality.
as a simple answer that I found since it's not simply out there. Use a library like below to record in mp3. It's not supported by browser MediaRecorder natively, but libraries make it easy to encode to mp3
and then you have a blob or file that can be played in any browser and even mobile devices like ios
https://github.com/closeio/mic-recorder-to-mp3
Developing a browser based webrtc streaming system, managed to get it all working properly and allows streaming from all devices. But my problem is on playback: all desktop browsers play it fine, chrome firefox on windows, chrome firefox safari on MacOs, works fine on android devices using chrome or firefox, but on iPhone/iPad iOS 13.4 it will only play in Safari. There are plenty of users using Chrome as their preferred browser on iOS devices, so I'm trying to figure out what can be preventing the videos to play on Chrome( chrome version tested on iphone is Chrome v83.0.4103.88
here is a snippet of the video
<video autoplay muted playsinline loop type ='rtmp/mp4' preload='auto' id="testVideo" style="width:100%;height:100%;" data-setup='{"techOrder": ["html5"], "nativeControlsForTouch": false, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'></video>
video source is loaded via JS and stream type is RTSP, handled in a Wowza instance media server (V4.7.8), encoding h264 baseline profile/pcma
Can't really find much on stack, most people having similar issues have it with Safari and chrome works fine for them. My problem is Safari works, but only safari on iOS devices.
Any suggestion is much appreciated!
EDIT: streams are published in mp4 format
I've tried a bunch of things to no avail. Setting the src of an audio element to the following base64 webm dataurl snippet and playing it works in most browsers, but is failing in Safari. Pasting the snippet in the location bar even works in Chrome.
https://gist.github.com/mayorbyrne/99e47f58eefcfe72e84e3e320d136c2c#file-gistfile1-txt
I am able to play a base64 encoded mp3 dataurl, as the following fiddle I found in another response works: https://www.jsfiddle.net/apo299od -- In addition, I've tried replacing the beginning of the snippet data:audio/webm with data:audio/mp3 (works in Chrome, etc), and that moves me further along, but the audio doesn't actually play, it just flashes the audio symbol in the browser for a quick second.
Just wondering if I am spinning my wheels here, or if there is a way to get this snippet playing in an audio element on Safari.
Safari on iOS doesn't support the Vorbis / Opus audio codecs in WebM and on desktop only via third-party extensions like the VLC Web Browser plugin. Safari on iOS 11+ / macOS High Sierra+ can play Opus only if it's in a CAF container.
Note: Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs
source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html
Safari can support Ogg Opus files with WebAssembly decoding. You can see the demo and code below. Not as simple as using an <audio> element, but you will get faster, low-latency playback using the Web Audio API:
https://github.com/AnthumChris/fetch-stream-audio
I am trying to play an rtsp format url in browser .i used video js to do it. But i cant play it or the browser is not streaming it.
I tested in IE,Chrome, and Firefox.
Could you please help me to find a solution?
For a WebRTC stream, how can I get the devices that streams it?
For each stream there's getAudio/VideoTracks() and for each track there's getCapabilities().deviceId, but getCapabilities() doesn't seem to be implemented.
I tested in Firefox and Chrome.
You are right, getCapabilities has not been implemented yet.
In the meantime use track.label and track.kind and compare it against the device label and kind you get from enumerateDevices. Works in Chrome and Firefox 46 (Firefox Developer Edition).