Add videostream library to repackage mp4s for MediaSource API

[jknoll]

Some .mp4s, for example http://www.w3schools.com/html/mov_bbb.mp4 work properly when using instant.io for both seeding and downloading, but not when using instant.io for seeding and webtorrent's example code for downloading, because they are not compatible with the MediaSource API format. This can sometimes result in this exception:

Uncaught InvalidStateError: Failed to execute 'endOfStream' on 'MediaSource'

Adding videostream support would allow playback of a wider range of files.

[feross]

Thanks for the issue. This will be fixed soon!

In the meantime, those looking for a workaround can see what instant.io does here: https://github.com/feross/instant.io/blob/master/client/index.js#L236

[feross]

This is released as webtorrent 0.52.

The commit log is pasted here for your reference:

BREAKING: Add file.appendTo(); remove file.pipe(videoNode)

Removed API file.createReadStream().pipe(videoNode)

Previously, the stream.pipe method was overridden in a non-standard
and confusing way to be able to pipe to <video> and <audio> tags.
This is removed now. stream.pipe still exists, but it works just like
in node now.

New API: file.appendTo(rootElem, function callback (err, elem) {})

Show the file in a the browser by appending it to the DOM. This is a powerful function that handles many file types like video (.mp4, .webm, .m4v, etc.), audio (.m4a, .mp3, .wav, etc.), images (.jpg, .gif, .png, etc.), and other file formats (.pdf, .md, .txt, etc.).

The file will be fetched from the network with highest priority and streamed into the page (if it's video or audio). In some cases, video or audio files will not be streamable because they're not in a format that the browser can stream so the file will be fully downloaded before being played. For other non-streamable file types like images and PDFs, the file will be downloaded then displayed.

rootElem is a container element (CSS selector or reference to DOM node) that the content will be shown in. A new DOM node will be created for the content and appended to rootElem.

callback will be called once the file is visible to the user. callback must be specified, and will be called with a an Error (or null) and the new DOM node that is displaying the content.

file.appendTo('#containerElement', function (err, elem) {
  if (err) throw err // file failed to download or display in the DOM
  console.log('New DOM node with the content', elem)
})