Last active
March 28, 2020 01:42
-
-
Save max-mapper/108134f035decfcfdf15 to your computer and use it in GitHub Desktop.
play webm video from binary webm data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body style="width:500px; height:500px;"> | |
| <video controls></video> | |
| <script src="index.js"></script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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