Skip to content

Instantly share code, notes, and snippets.

@yishn

yishn/takeScreenShot.js

Created November 21, 2019 12:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yishn/7cd65ea1db0ef2a1b7658f1364b2cb41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yishn/7cd65ea1db0ef2a1b7658f1364b2cb41 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yishn revised this gist Nov 21, 2019. No changes.
  2. yishn revised this gist Nov 21, 2019. 1 changed file with 29 additions and 29 deletions.
    58 changes: 29 additions & 29 deletions takeScreenShot.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +1,37 @@
    const canIRun = navigator.mediaDevices.getDisplayMedia

    const takeScreenShot = async () => {
    const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: 'screen' },
    })
    // get correct video track
    const track = stream.getVideoTracks()[0]
    // init Image Capture and not Video stream
    const imageCapture = new ImageCapture(track)
    // take first frame only
    const bitmap = await imageCapture.grabFrame()
    // destory video track to prevent more recording / mem leak
    track.stop()
    const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: 'screen' },
    })
    // get correct video track
    const track = stream.getVideoTracks()[0]
    // init Image Capture and not Video stream
    const imageCapture = new ImageCapture(track)
    // take first frame only
    const bitmap = await imageCapture.grabFrame()
    // destory video track to prevent more recording / mem leak
    track.stop()

    const canvas = document.getElementById('fake')
    // this could be a document.createElement('canvas') if you want
    // draw weird image type to canvas so we can get a useful image
    canvas.width = bitmap.width
    canvas.height = bitmap.height
    const context = canvas.getContext('2d')
    context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
    const image = canvas.toDataURL()
    const canvas = document.getElementById('fake')
    // this could be a document.createElement('canvas') if you want
    // draw weird image type to canvas so we can get a useful image
    canvas.width = bitmap.width
    canvas.height = bitmap.height
    const context = canvas.getContext('2d')
    context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
    const image = canvas.toDataURL()

    // this turns the base 64 string to a [File] object
    const res = await fetch(image)
    const buff = await res.arrayBuffer()
    // clone so we can rename, and put into array for easy proccessing
    const file = [
    new File([buff], `photo_${new Date()}.jpg`, {
    type: 'image/jpeg',
    }),
    ]
    return file
    // this turns the base 64 string to a [File] object
    const res = await fetch(image)
    const buff = await res.arrayBuffer()
    // clone so we can rename, and put into array for easy proccessing
    const file = [
    new File([buff], `photo_${new Date()}.jpg`, {
    type: 'image/jpeg',
    }),
    ]
    return file
    }

    const button = document.getElementById('cake').onclick = () => canIRun ? takeScreenShot() : {}
  3. yishn created this gist Nov 21, 2019.
    37 changes: 37 additions & 0 deletions takeScreenShot.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    const canIRun = navigator.mediaDevices.getDisplayMedia

    const takeScreenShot = async () => {
    const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { mediaSource: 'screen' },
    })
    // get correct video track
    const track = stream.getVideoTracks()[0]
    // init Image Capture and not Video stream
    const imageCapture = new ImageCapture(track)
    // take first frame only
    const bitmap = await imageCapture.grabFrame()
    // destory video track to prevent more recording / mem leak
    track.stop()

    const canvas = document.getElementById('fake')
    // this could be a document.createElement('canvas') if you want
    // draw weird image type to canvas so we can get a useful image
    canvas.width = bitmap.width
    canvas.height = bitmap.height
    const context = canvas.getContext('2d')
    context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
    const image = canvas.toDataURL()

    // this turns the base 64 string to a [File] object
    const res = await fetch(image)
    const buff = await res.arrayBuffer()
    // clone so we can rename, and put into array for easy proccessing
    const file = [
    new File([buff], `photo_${new Date()}.jpg`, {
    type: 'image/jpeg',
    }),
    ]
    return file
    }

    const button = document.getElementById('cake').onclick = () => canIRun ? takeScreenShot() : {}