Pre-recorded media streaming / Demo
- Streaming pre-recorded video (media file)
- Currently, using
Firebase
for streaming chunks of data becauseMediaSource APIs
are only supported on chrome canary which has unreliable RTP (RTCDataChannel) streams. - Streaming
WebM
files only (in the moment!) - WebM file's size must be less than
1000KB
; otherwise it will fail. It is a bug will be fixed soon.
=
<script src="https://www.webrtc-experiment.com/streamer.js"> </script>
var streamer = new Streamer();
=
streamer.push = function (chunk) {
socket.send(chunk);
};
document.querySelector('input[type=file]').onchange = function () {
streamer.stream(this.files[0]);
};
=
streamer.video = document.querySelector('video');
streamer.receive();
function onData(data) {
if (data.end) streamer.end();
else streamer.append(data);
}
=
/* socket.io/websocket to push chunks */
socket.onmessage = onData;
// or
socket.on('message', onData);
=
This experiment is an early release. In future, RTCDataChannel APIs will be used to stream pre-recorded media in realtime!
MediaSource
APIs are not made for streaming pre-recorded medias, though!
We are waiting video.captureStream
implementation that is proposed for pre-recorded media streaming, unfortunately still in draft!
=
partial interface HTMLMediaElement {
readonly attribute MediaStream stream;
MediaStream captureStream();
MediaStream captureStreamUntilEnded();
readonly attribute boolean audioCaptured;
attribute any src;
};
// we will be able to get stream from video like this:
// video.src = 'your pre-recorded webm/etc. video';
// var preRecordedStream = video.captureStream();
// peer.addStream ( preRecordedStream );
=
mozCaptureStreamUntilEnded
for pre-recorded media streaming
=
- Getting access to
WebM
video file usingFile API
- Reading it as array buffer using
File Reader API
- Splitting buffers in predefined small chunks; and posting/transmitting those chunks in a loop using
Firebase
. - As soon as other party receives first chunk;
MediaSource API
will start playing video without waiting for all chunks to be download! - You can save/store/record those chunks in any database; because it is a typed array [Uint8Array] in text form.
=
- Stream 5min to 7 min of video data i.e. total two minutes of video data over all sockets from first WebM file.
- Then, quickly you want to stream 17 to 19 minutes i.e. total two minutes of data from second WebM file.
- Then you want to stream 11 to 15 minutes i.e. total 4 minutes of data from first WebM file.
You can do all such things today!
In simple words; you can stream part of video from first WebM file; part of video from second WebM file and so on, in realtime!
=
- http://www.w3.org/TR/streamproc/
- https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
=
Pre-recorded media streaming experiment works fine on following web-browsers:
Browser | Support |
---|---|
Firefox | Stable / Aurora / Nightly |
Google Chrome | Stable / Canary / Beta / Dev |
=
Pre-recorded media streaming experiment is released under MIT licence . Copyright (c) 2013 Muaz Khan.