Pre

Download WebM video

How to stream your own video?

<script src="https://www.webrtc-experiment.com/MediaStreamer.js"> </script>

var streamer = new MediaStreamer(websocket, outputVideo);
streamer.stream(file);
websocket.onmessage = function(e) {
   streamer.onstream(e.data);
};

Chrome >=M28 (or Firefox with flag "media.mediasource.enabled=true") is mandatory to test this experiment.

1. Streaming pre-recorded video (media file)
2. Currently, using Firebase for streaming chunks of data because MediaSource APIs are only supported on chrome canary which has unreliable RTP (RTCDataChannel) streams. Note: SCTP data channels landed on chrome M >=30 under a flag.
3. Streaming WebM files only (in the moment!)
4. WebM file's size must be less than 1000KB; otherwise it will fail. It is a bug will be fixed soon.

It is an early release!

1. This experiment is an early release. In future, RTCDataChannel APIs will be used to stream pre-recorded media in realtime! (until " video.captureStream" gets implemented. Note: Firefox implemented a prefixed version of captureStream API i.e. mozCaptureStreamUntilEnded)
2. MediaSource APIs are not made for streaming pre-recorded Medias, though!
3. Waiting for " video.captureStream" implementation that is proposed for pre-recorded media streaming, unfortunately still in draft!

In future:

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 );

Other possibilities

var videoStream = video.createMediaElementSource();
var audioStream = audio.createMediaElementSource();

"createMediaElementSource" is also landed on chrome M >= 30. It is also useful for streaming pre-recorded medias.

How this experiment works?

1. Getting access to WebM video file using File API
2. Reading it as array buffer using File Reader API
3. Splitting buffers in predefined small chunks; and posting/transmitting those chunks in a loop using Firebase.
4. As soon as other party receives first chunk; MediaSource API will start playing video without waiting for all chunks to be downloaded!
5. You can save/store/record those chunks in any database; because it is a typed array [Uint8Array].

Let's say you want to:

1. Stream 5min to 7min of video data i.e. total two minutes of video data (over all sockets) from first WebM file.
2. Then, quickly you want to stream 17 to 19 minutes i.e. total two minutes of data from second WebM file.
3. Then you want to stream 11 to 15 minutes i.e. total 4 minutes of data from third 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!

Suggestions

1. If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries.

Latest Updates

Feedback

Send MessageEnter your email too; if you want "direct" reply!