Skip to content

Instantly share code, notes, and snippets.

@PaulKinlan

PaulKinlan/canvasrecord.js

Last active May 7, 2024 04:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PaulKinlan/def79b32a6cfec88f7b61e531523c743 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PaulKinlan/def79b32a6cfec88f7b61e531523c743 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. PaulKinlan revised this gist Dec 14, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions canvasrecord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@
    let canvas = document.querySelector('canvas');
    // Optional frames per second argument.
    let stream = canvas.captureStream(25);
    var options = {mimeType: 'video/webm; codecs=vp9'};
    let recorder = new MediaRecorder(stream, options);
    let blobs = [];

  2. PaulKinlan revised this gist Nov 6, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion canvasrecord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    }

    recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};
    recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));
    recorder.onstop = (e) => download(new Blob(blobs, {type: 'video/webm'}));

    recorder.start(10); // collect 10ms chunks of data

  3. PaulKinlan revised this gist Nov 6, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion canvasrecord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,8 @@
    recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};
    recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));

    recorder.start(10); // collect 10ms of data
    recorder.start(10); // collect 10ms chunks of data

    // Record for 10 seconds.
    setTimeout(()=> recorder.stop(), 10000);
    })();
  4. PaulKinlan revised this gist Nov 6, 2016. 1 changed file with 24 additions and 22 deletions.
    46 changes: 24 additions & 22 deletions canvasrecord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,28 @@
    let canvas = document.querySelector('canvas');
    // Optional frames per second argument.
    let stream = canvas.captureStream(25);
    let recorder = new MediaRecorder(stream, options);
    let blobs = [];
    (function() {
    let canvas = document.querySelector('canvas');
    // Optional frames per second argument.
    let stream = canvas.captureStream(25);
    let recorder = new MediaRecorder(stream, options);
    let blobs = [];

    function download(blob) {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    }, 100);
    }
    function download(blob) {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    }, 100);
    }

    recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};
    recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));
    recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};
    recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));

    recorder.start(10); // collect 10ms of data
    recorder.start(10); // collect 10ms of data

    setTimeout(()=> recorder.stop(), 10000);
    setTimeout(()=> recorder.stop(), 10000);
    })();
  5. PaulKinlan created this gist Nov 6, 2016.
    26 changes: 26 additions & 0 deletions canvasrecord.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    let canvas = document.querySelector('canvas');
    // Optional frames per second argument.
    let stream = canvas.captureStream(25);
    let recorder = new MediaRecorder(stream, options);
    let blobs = [];

    function download(blob) {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    }, 100);
    }

    recorder.ondataavailable = e => { console.log(e.data); if (e.data && e.data.size > 0) blobs.push(e.data)};
    recorder.onstop = (e) => download(new Blob(blobs, , {type: 'video/webm'}));

    recorder.start(10); // collect 10ms of data

    setTimeout(()=> recorder.stop(), 10000);