Skip to content

Instantly share code, notes, and snippets.

@billautomata

billautomata/index.html

Forked from max-mapper/index.html
Created December 19, 2015 01:16
Show Gist options
  • Save billautomata/d51db4a0042cc23f45d7 to your computer and use it in GitHub Desktop.
Save billautomata/d51db4a0042cc23f45d7 to your computer and use it in GitHub Desktop.
Download ZIP
play webm video from binary webm data
Raw
index.html
<body style="width:500px; height:500px;">
<video controls></video>
<script src="index.js"></script>
</body>
Raw
index.js
var drop = require('drag-and-drop-files')
var fileReaderStream = require('filereader-stream')
var pump = require('pump')
var through = require('through2')
drop(document.body, function(files) {
var first = files[0]
var reader = fileReaderStream(first, {chunkSize: 8192})
var video = document.querySelector('video')
var sourceBuffer
var receiver
var mediaSource = new MediaSource()
video.src = window.URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', function () {
console.log('sourceopen')
receiver = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"')
console.debug('MediaSource readyState: <', this.readyState, '>')
pump(reader, through(function (ch, enc, next) {
console.log('on data chunk', ch.length)
receiver.appendBuffer(ch)
setTimeout(next, 20) // simulate 20ms network latency
}, function () {
setTimeout(function () {
mediaSource.endOfStream()
}, 1000) // not sure how else to prevent errors when calling this
}))
}, false);
mediaSource.addEventListener('sourceended', function () {
console.log('sourceended')
console.warn('MediaSource readyState: <', this.readyState, '>')
}, false)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment