Capture puppeteer video

Author: Murali Govardhana

.gitignore

@@ -0,0 +1 @@
+node_modules/

background.js

@@ -0,0 +1,81 @@
+/* global chrome, MediaRecorder, FileReader */
+
+chrome.runtime.onConnect.addListener(port => {
+  let recorder = null;
+  let filename = null;
+  port.onMessage.addListener(msg => {
+    console.log(msg);
+    switch (msg.type) {
+      case 'SET_EXPORT_PATH':
+        filename = msg.filename
+        break
+      case 'REC_STOP':
+        port.recorderPlaying = false    
+        recorder.stop()    
+        break
+      case 'REC_CLIENT_PLAY':
+        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: filename
+              }, ()=>{
+              });
+              chrome.downloads.onChanged.addListener(function(delta) {
+                if (!delta.state ||(delta.state.current != 'complete')) {
+                  return;
+                }
+                port.postMessage({downloadComplete: true})
+              });
+            }
+
+            recorder.start();
+          }, error => console.log('Unable to get user media', error))
+        })
+        break
+      default:
+        console.log('Unrecognized message', msg)
+    }
+  })
+})

content_script.js

@@ -0,0 +1,23 @@
+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) {
+      port.postMessage(event.data)
+    }
+    if(event.data.type === 'PLAYBACK_COMPLETE'){
+      port.postMessage({ type: 'REC_STOP' }, '*')
+    }
+    if(event.data.downloadComplete){
+      document.querySelector('html').classList.add('downloadComplete')
+    }
+  })
+
+  document.title = 'puppetcam'
+  window.postMessage({ type: 'REC_CLIENT_PLAY', data: { url: window.location.origin } }, '*')
+}

export.js

@@ -0,0 +1,46 @@
+const puppeteer = require('puppeteer');
+const Xvfb      = require('xvfb');
+var xvfb        = new Xvfb({silent: true});
+var width       = 1280;
+var height      = 720;
+var options     = {
+  headless: false,
+  args: [
+    '--enable-usermedia-screen-capturing',
+    '--allow-http-screen-capture',
+    '--auto-select-desktop-capture-source=puppetcam',
+    '--load-extension=' + __dirname,,
+    '--disable-extensions-except=' + __dirname,
+    '--disable-infobars',
+    `--window-size=${width},${height}`,
+  ],
+}
+
+async function main() {
+    xvfb.startSync()
+    var url = process.argv[2], exportname = process.argv[3]
+    if(!url){ url = 'http://tobiasahlin.com/spinkit/' }
+    if(!exportname){ exportname = 'spinner.webm' }
+    const browser = await puppeteer.launch(options)
+    const pages = await browser.pages()
+    const page = pages[0]
+    await page._client.send('Emulation.clearDeviceMetricsOverride')
+    await page.goto(url, {waitUntil: 'networkidle2'})
+    await page.setBypassCSP(true)
+
+    // Perform any actions that have to be captured in the exported video
+    await page.waitFor(8000)
+
+    await page.evaluate(filename=>{
+        window.postMessage({type: 'SET_EXPORT_PATH', filename: filename}, '*')
+        window.postMessage({type: 'REC_STOP'}, '*')
+    }, exportname)
+
+    // Wait for download of webm to complete
+    await page.waitForSelector('html.downloadComplete', {timeout: 0})
+    await browser.close()
+    xvfb.stopSync()
+}
+
+main()
+

manifest.json

@@ -0,0 +1,18 @@
+{
+  "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"
+  ]
+}