Created
May 8, 2017 02:05
-
-
Save skrater/eecebed67a26a1b107dd447e3165d4d4 to your computer and use it in GitHub Desktop.
Websocket Media Source Extensions
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>MSE Demo</title> | |
| </head> | |
| <body> | |
| <h1>MSE Demo</h1> | |
| <div> | |
| <video controls width="80%"></video> | |
| </div> | |
| <script type="text/javascript"> | |
| //ffmpeg -f x11grab -s 1920x1080 -r 25 -i :0.0+0,0 -f webm -codec:v libvpx -quality good -cpu-used 0 -b:v 600k -maxrate 600k -bufsize 1200k -qmin 10 -qmax 42 -vf scale=-1:480 -threads 4 http://localhost:8081/test | |
| var websocket = new WebSocket('ws://localhost:8082'); | |
| websocket.binaryType = 'arraybuffer'; | |
| var mediaSource = new MediaSource(); | |
| var buffer; | |
| var queue = []; | |
| var video = document.querySelector('video'); | |
| video.src = window.URL.createObjectURL(mediaSource); | |
| mediaSource.addEventListener('sourceopen', function(e) { | |
| video.play(); | |
| buffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"'); | |
| buffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + mediaSource.readyState); }); | |
| buffer.addEventListener('update', function(e) { console.log('update: ' + mediaSource.readyState); }); | |
| buffer.addEventListener('updateend', function(e) { console.log('updateend: ' + mediaSource.readyState); }); | |
| buffer.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); }); | |
| buffer.addEventListener('abort', function(e) { console.log('abort: ' + mediaSource.readyState); }); | |
| buffer.addEventListener('update', function() { // Note: Have tried 'updateend' | |
| if (queue.length > 0 && !buffer.updating) { | |
| buffer.appendBuffer(queue.shift()); | |
| } | |
| }); | |
| }, false); | |
| mediaSource.addEventListener('sourceopen', function(e) { console.log('sourceopen: ' + mediaSource.readyState); }); | |
| mediaSource.addEventListener('sourceended', function(e) { console.log('sourceended: ' + mediaSource.readyState); }); | |
| mediaSource.addEventListener('sourceclose', function(e) { console.log('sourceclose: ' + mediaSource.readyState); }); | |
| mediaSource.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); }); | |
| websocket.addEventListener('message', function(e) { | |
| if (typeof e.data !== 'string') { | |
| if (buffer.updating || queue.length > 0) { | |
| queue.push(e.data); | |
| } else { | |
| buffer.appendBuffer(e.data); | |
| } | |
| } | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
asset.ts:242 Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.