How to create MediaStream from videofile?

endotakashi picture endotakashi · Jan 20, 2014 · Viewed 10.8k times · Source

Most of the Mediastream examples are explanation by webCam-stream.but I need to create MediaStream from local videofile(.webm or mp4).Please tell me.

Answer

Muaz Khan picture Muaz Khan · Jan 20, 2014

Updated at May 04, 2017: captureStream API are now supported both on Chrome and Firefox.

var stream_from_WebM_or_Mp4_File = videoTag.captureStream();
var stream_from_Canvas2D         = canvasTag.captureStream(25);

The parameter "25" is requested frame-rates.

Now you can share the resulting stream using either RTCPeerConnection API or record using MediaRecorder API.

Please check a similar answer: https://stackoverflow.com/a/42929613/552182


There are two possibilities:

1) captureStreamUntilEnded / Demo

It is supported only on Firefox as "mozCaptureStreamUntilEnded".

2) MediaSource API Demo

MediaSource APIs are supported both on chrome and firefox; however, it isn't a realtime media-stream.

What you can do is read file chunks; share them with other users using any transmission gateway like WebSockets, socket.io or WebRTC datachannels; then use MediaSource API to play those chunks as soon as possible instead of waiting from entire file to be shared.


Remember, WebRTC implementations both on chromium and gecko supports single but "live" media source in the moment; it means that you can't use captured-stream from pre-recorded media as LIVE media source. Also, you can't use fake WebAudio stream as LIVE media source.

Following code will NOT work on Firefox:

preRecordedMediaStream = preRecordedMedia.mozCaptureStreamUntilEnded();
peer.addStream(preRecordedMediaStream);

You can test a demo here.


Updated at: 1:06 PM - Sunday, July 27, 2014 (UTC)

You can capture pre-recorded mp3/ogg file using FileReader/WebAudio API and share as LIVE audio source to WebRTC peer connections, same as I did in this demo / source code.