Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
puppeteer screen capture demo. Currently records 10 second video. Change the timeout in background.js with your own logic to stop the recording when necessary. Try with `node export.js`
/* global chrome, MediaRecorder, FileReader */
chrome.runtime.onConnect.addListener(port => {
let recorder = null
port.onMessage.addListener(msg => {
console.log(msg);
switch (msg.type) {
case 'REC_STOP':
console.log('Stopping recording')
if (!port.recorderPlaying || !recorder) {
console.log('Nothing to stop')
return
}
port.recorderPlaying = false
recorder.stop()
break
case 'REC_CLIENT_PLAY':
if (port.recorderPlaying) {
console.log('Ignoring second play, already playing')
return
}
port.recorderPlaying = true
const tab = port.sender.tab
tab.url = msg.data.url
chrome.desktopCapture.chooseDesktopMedia(['tab', 'audio'], streamId => {
// Get the stream
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720,
minFrameRate: 60,
}
}
}, stream => {
var chunks=[];
recorder = new MediaRecorder(stream, {
videoBitsPerSecond: 2500000,
ignoreMutedMedia: true,
mimeType: 'video/webm'
});
recorder.ondataavailable = function (event) {
if (event.data.size > 0) {
chunks.push(event.data);
}
};
recorder.onstop = function () {
var superBuffer = new Blob(chunks, {
type: 'video/webm'
});
var url = URL.createObjectURL(superBuffer);
// var a = document.createElement('a');
// document.body.appendChild(a);
// a.style = 'display: none';
// a.href = url;
// a.download = 'test.webm';
// a.click();
chrome.downloads.download({
url: url,
//filename: "suggested/filename/with/relative.path" // Optional
});
}
recorder.start();
setTimeout(()=>{
recorder.stop()
}, 10000)
}, error => console.log('Unable to get user media', error))
})
break
default:
console.log('Unrecognized message', msg)
}
})
})
window.onload = () => {
if (window.recorderInjected) return
Object.defineProperty(window, 'recorderInjected', { value: true, writable: false })
// Setup message passing
const port = chrome.runtime.connect(chrome.runtime.id)
port.onMessage.addListener(msg => window.postMessage(msg, '*'))
window.addEventListener('message', event => {
// Relay client messages
if (event.source === window && event.data.type && event.data.type.startsWith('REC_CLIENT_')) {
port.postMessage(event.data)
}
})
document.title = 'pickme'
window.postMessage({ type: 'REC_CLIENT_PLAY', data: { url: window.location.origin } }, '*')
}
const puppeteer = require('puppeteer');
console.log(__dirname)
var options = {
headless: false,
args: [
'--enable-usermedia-screen-capturing',
'--allow-http-screen-capture',
'--no-sandbox',
'--auto-select-desktop-capture-source=pickme',
'--disable-setuid-sandbox',
'--load-extension=' + __dirname,,
'--disable-extensions-except=' + __dirname,
],
executablePath: 'google-chrome-unstable',
}
puppeteer.launch(options).then(browser=>{
return browser.pages().then(pages=>{
var page = pages[0];
return page.goto('http://tobiasahlin.com/spinkit/', {waitUntil: 'networkidle2'}).then(_=>{
return page.evaluate(()=>{
var session = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'screen',
},
optional: []
},
};
})
})
}).then(_=>{
// return browser.close()
})
})
{
"name": "Video Capture Attempt #1",
"version": "0.1.0",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"],
"run_at": "document_start"
}],
"permissions": [
"desktopCapture",
"<all_urls>",
"downloads"
]
}
@zeenalo

This comment has been minimized.

Copy link

@zeenalo zeenalo commented Jul 11, 2018

How to use?

@nollytainment

This comment has been minimized.

Copy link

@nollytainment nollytainment commented Jan 16, 2019

Hey man! are you available for a quick project no more than 5hours task. i am ready to pay for your time to make modification to this script.

@ChrisHagan

This comment has been minimized.

Copy link

@ChrisHagan ChrisHagan commented Mar 25, 2019

Would you mind pointing out the part of this that works around the Screen Sharing Request dialog please? I'm doing a very similar piece and it's a hurdle.

@Ventricule

This comment has been minimized.

Copy link

@Ventricule Ventricule commented Aug 19, 2019

Hey, that's great !
Exactly what I wanted to do since a day.
The only problem I have is that there is banners to say "chrome is actually controlled by puppeteer" and "tab is captured", and so, the size of the window is not the size I defined. Is there a way to hide the banners ? Or to record the viewport without consideration to the window size ? Or to record headless ?

@muralikg

This comment has been minimized.

Copy link
Owner Author

@muralikg muralikg commented Aug 20, 2019

@ChrisHagan sorry for the late reply but if you notice the document title is set to pickme and auto desktop source selection also set to the same value. This prevents the screen sharing request dialog box.

@Ventricule I have put together an example using xvfb to record headless.
Please check the Example and see if it solves your problem

@Ventricule

This comment has been minimized.

Copy link

@Ventricule Ventricule commented Sep 7, 2019

@muralikg Thank you for Puppetcam ! I did a fork to use without XVFB (not existing on windows) and to add size and length params : https://github.com/Ventricule/puppetcam

@NiceGuyNimni

This comment has been minimized.

Copy link

@NiceGuyNimni NiceGuyNimni commented Mar 6, 2020

Tiny note: Line 11 in export.js has double comma which causes an error since it adds an undefined arg

@svikas641

This comment has been minimized.

Copy link

@svikas641 svikas641 commented Dec 23, 2020

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.