CODEWITHSUNDEEP
javascriptdomgoogle-chrome-extensionpopupscreencast
JasonY
JasonY

Reputation: 770

In Chrome extensions, is it possible to screencapture and display the screen on the popup window?

I am trying to build a chrome extension which can record the current tab using chrome.desktopCapture.chooseDesktopMedia and stream the recording to the default_popup file.

Currently I am getting the stream's object url in a content script, passing it to the background script to do some checks and then pass it again to popup.js which is the javascript file for my pop up. the stream works and displays as a video when played on the page's DOM and the object passing is no problem either.

but it seems that the objectURL cannot access the video from the popup! is there any way around this?

This is the error I got when inspecting the pop up's console:

blob:https%3A//developer.chrome.com/5363c96d-69ff-4e91-8d06-48f1648ad0e4 Failed to load resource: the server responded with a status of 404 (Not Found)

Upvotes: 0

Views: 1138

Answers (2)

Chad
Chad

Reputation: 9859

Thank you @jasonY for a working solution. In my case I needed to send a ObjectURL from a background script to a content script.

async function reissueObjectURL (url) {
    return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = 'blob';
        request.onload = () => {
            resolve(URL.createObjectURL(request.response));
            URL.revokeObjectURL(url);
        };
        request.send();
    });
}

Upvotes: 0

JasonY
JasonY

Reputation: 770

I just found out how to do this.

in order to transfer blob urls across scripts and tabs in chrome extensions, you must first send an xmlhttp request to grab the blob from the original blob url created on a different script. and then recreate the blob url from that blob on the current page.

e.g.

//originalURL is the bloburl from your content script
//in your popup script, call this
var request=new XMLHttpRequest();
request.open('GET', originalURL);
request.responseType='blob';
request.send();
request.onload=function(){
var newURL=URL.createObjectURL(request.response);
}
//newURL is the bloburl which can not be used on your popup script, you can set it as the soure of a video etc...

I hope this helps somebody!

Upvotes: 1

Related Questions