I am implementing Screen Capture API and I want to combine both primary and extended monitor for streaming and taking screenshots. How can i do that?

Viewed 429

I am implementing Screen Capture API and I want to combine both primary and extended monitor for streaming and taking screenshots. Here is how I can capture one screen and save the screenshot and I want to enable the same for extended display as well.

    screenshot = async() => {

    const mediaDevices = navigator.mediaDevices as any;
    

    let displayMediaOptions = {
        video: {
            mediaSource: 'screen'
        }
    }


    const stream = await mediaDevices.getDisplayMedia(displayMediaOptions);


    console.log('stream', stream.getTracks())

    const track = stream.getVideoTracks()[0]
  
    // init Image Capture and not Video stream
    console.log(track)
    
    const imageCapture = new ImageCapture(track)

    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 

}

I can get the screenshot from single screen and attach it to a canvas. How can I do for extended display as well ?

enter image description here

0 Answers
Related