I want to send a video stream from an iOS device (version 11 and above) to a server (from a client using html5 on iOS).
For other browsers I get the stream from navigator.getUserMedia, and pass it to the server using mediaRecorder and a WebSocket:
this.mediaRecorder = new MediaRecorder(this._stream);
this.mediaRecorder.start(50);
this.mediaRecorder.ondataavailable = function(e) {
app.socket.emit("frameRequest", e.data);
}
however, MediaRecorder is not supported on iOS. Is there an alternative to sending the stream from iOS devices?
There are a handful of polyfills that add MediaRecorder API support to browsers that don't support it natively, including iOS Safari. My current favorite is Opus Media Recorder.
One problem I'm running into is that it only supports recording in Ogg or Wav formats, however iOS doesn't support playback of Ogg - only Wav, AAC, or MP3. Unfortunately, Wav and AAC files are too big. So, I am taking the approach of recording in Wav and transcoding to MP3 in the browser using lamejs.
Related
Update:
I record VP8 video from Android that is saved as MP4 format, which should be supported by Safari. From some research I know Opus audio format is partially supported by Safari...
What else do I need to add while saving file (eg: output settings)?
Is it because of the Opus audio format that Safari is not playing VP8 video format?
Question:
In my application which records the video from any device and saving in AWS server, and admin can play recorded videos from any os/ device.
After the iOS updated on Dec 14 2022, my video component is messed up, I cannot record or play video from Apple devices.
As I cannot write entire project code, I have the code in the below link
video player code - Github
In the code the video src is from AWS S3 (storage) which is recorded from Android phone, from the link below you can play the video.
video player testing
This video can be played in Mac Chrome, but not in Mac Safari, Apple Safari and Apple Chrome.
I am looking for quick solution.
I don't use and don't have access to iOS or Mac Safari, so you must test this for us...
Looking at your MP4 file in a hex editor I see this:
It seems you have a WebM file that simply has .mp4 added to the file name. It is not an MP4 (there is no MPEG header/data inside these file bytes, etc). Your file here has webm in second line something which a real MP4 would never do. A valid MP4 usually has ftyp written in its first line.
Possible solutions:
(1) To avoid confusing some decoders (about file format) try renaming file as:
159_159_1652901854.webm
Some players will use the file .type extension to decide which decoder to use. If it is file.mp4 and some player uses the MPEG decoder on those VP8 bytes then you will get no picture or sound.
(2) Also try to set correct WEBM mime-type (ie: because it's not a video/mp4)
<video height="700" controls muted autoplay playsinline loop>
<source src="https://api.tenrol.com/uploads/videos/159_159_1652901854.webm" type="video/webm">
</video>
note: consider testing a WebM video with no sound, to answer if Opus audio is the problem.
See if the above <video> tag code works on Mac Safari and iPad Safari. I think Opus (usually audio for OGV files) and Vorbis (usually audio for webM files) are not supported on iPhone (unless you put the audio in an MOV format, but then you lose the video part). Basically iPhone has no WebM sound.
(3) If all else fails then just understand the following:
MP4 plays in all major browsers.
MP4 contains H.264 or H.265 picture codecs, and also AAC or MP3 audio codecs.
Browsers prefer to record in their own in-house/licensed codecs.(Google == WebM (VP8/9), Mozilla == OGV (Theora) and Apple == MP4 (H.264/H.265)).
Don't use Webm (Chrome/Firefox) if you want guaranteed Safari playback of video.
Don't use MP4/H265 (Safari) if you want guaranteed Chrome/Firefox video playback.
There is no easy solution. So your options are:
To guarantee that you get H264/MP4 encoded in Chrome/Firefox browsers, then try finding a Javascript based H.264 encoder. Here's a search example to start with. Then you also need an audio encoder for AAC or MP3 formats. Such a file would play in Safari.
Or else, push for getting WebM decoded by Safari browser (even if without sound). This means a lot of testing. Use a tool like FFmpeg to output short 10 second test videos of WebM (at different settings) until something displays. Then you can move onto dealing with sound.
The video you recorded is using the vp8 video codec which should be supported on Safari on Mac but also the opus audio codec which is not usually supported.
Video Info for https://api.tenrol.com/uploads/videos/159_159_1652901854.mp4
Input #0, matroska,webm, from 'test.mp4':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A>
Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)>
Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1080x1920, SAR 1:1 >DAR 9:16, 1k tbr, 1k tbn, 1k tbc (default)>
You can check the video format using ffprobe (https://ffmpeg.org/ffprobe.html)
or online here (it will take a little while): https://getvideoinfo.westshoretechnology.com
You can check browser support for codecs in the browser release notes or at sites like this which are usually up to date: https://caniuse.com/opus
The Android video encoding recommendations are available online and the current recommendations at the time of writing are:
These are pretty good guides cross device at this time also - the link is here: https://developer.android.com/guide/topics/media/media-formats
I have an issue to stream a video conference for many mobile device(Andriod, iPhone etc) and I have troubles with streaming.
RTMP stream uses a flash and didn't work with this devices.
What stream can I use? and how can I convert rtmp to this supported stream?
For mobile devices you would need to convert your video to HTTP Live Streaming (HLS). If it's truly a live stream, you could use something Zencoder live streaming to convert it. If the RTMP stream is just reading from an MP4, you could use Handbrake or Zencoder to transmux it to HLS.
Web App which supports desktop, tablet and mobile.
Issue:
Not able to play below mentioned audio wav stream in iphone/ipad safari browsers
8000 hz, 16 bit, mono, signed
8000 hz, 16 bit, stereo, signed
Added below header into the audio wav stream
content-type: "audio/x-wav"
.header("Content-Length", ""+rawAudio.length)
.header("Accept-Ranges", "bytes")
.header("Last-Modified", "Wed, 27 Nov 2013 16:40:59 GMT")
.header("Connection", "keep-alive")
Wav as a stream: a get restful api returns binarystream as a response with the above mentioned header.
sample restful: /audio/getWav.do (this is an spring based web app, which returns binary wav stream as response)
Options tried, but did not work:
1. web audio api, called audio.play() function on_touch_start
2. jplayer to play wav stream
3. jquery.mb.audio API to play wav stream
Option worked:
1. upload the wav file into web app, iphone/ipad play the file.
why is that ipad/iphone safari browser plays the wav file from the web server, but does not play the wav stream.
Pls provide inputs or pointers to play wav stream in iphone or ipad.
I have RTSP feed coming from my IP Camera as my source input and need to publish it to HTTP Live Streaming (HLS) for playback on iOS devices. I have already tried RTSP-to-RTSP on iOS and it worked; this time I want to try RTSP-to-HLS. I already have Wowza and ffmpeg installed but I just don't know what commands I should run to produce HLS. I've googled for the right commands but I just couldn't find them. What should I run?
Safari supports HLS. Does it also mean that UIWebView supports HLS as well?
I'm using Flash to play a RTMP stream to a Wowza server.
I publish my microphone with
m_MicStream.publish ("mic_user1", "live");
Unfortunately, my receiving end only supports AAC audio. Is there a way to publish AAC audio with Flash?
Note : I tried the mp4:mic_user1, but it does not work. The stream negociation seems ok, but the received audio is garbage
Unfortunately Flash doen't support AAC audio encoding.
The only way to solve this in Flash side is using Flash Media Live Encoder (even with an AIR app what communicates with that) with this plugin:
http://www.mainconcept.com/products/apps-plug-ins/plug-ins-for-adobe/aac-encoder.html