Skip to content

Instantly share code, notes, and snippets.

@phantomtnt

phantomtnt/screenshotCaptureStream.js

Last active October 27, 2023 15:34
Show Gist options
  • Save phantomtnt/dd395d40fe3275198c013ea62a5658ae to your computer and use it in GitHub Desktop.
Save phantomtnt/dd395d40fe3275198c013ea62a5658ae to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. phantomtnt revised this gist Oct 27, 2023. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion screenshotCaptureStream.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,12 @@
    /*
    Source:
    https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7
    It need permission from user
    It needs permission from uses to access display
    */

    const capture = async () => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
  2. phantomtnt created this gist Oct 27, 2023.
    24 changes: 24 additions & 0 deletions screenshotCaptureStream.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /*
    Source:
    https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7
    It need permission from user
    */
    const capture = async () => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const video = document.createElement("video");

    try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, 0, 0, window.width, window.height);
    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());
    window.location.href = frame;
    } catch (err) {
    console.error("Error: " + err);
    }
    };

    capture();