samuelscheit / puppeteer-stream Goto Github PK

snip

I am using WSL2 and puppeteer is not working headful. Throws the following error:

/home/muratcolyaran/devops/practice/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:237
            reject(new Error([
                   ^

Error: Failed to launch the browser process!
[20057:20057:0303/161449.433072:ERROR:ozone_platform_x11.cc(234)] Missing X server or $DISPLAY
[20057:20057:0303/161449.433114:ERROR:env.cc(225)] The platform failed to initialize.  Exiting.


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

    at onClose (/home/muratcolyaran/devops/practice/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:237:20)
    at ChildProcess.<anonymous> (/home/muratcolyaran/devops/practice/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:228:79)
    at ChildProcess.emit (node:events:402:35)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

Can we update the package to work also headless?

Anyone have a recommendation?

Would love to use the adblocker plugin for my current project, and the stealth plugin for my next one.

I tried making a few adjustments to PuppeteerStream.ts:

import { LaunchOptions, Browser, Page, BrowserOptions, ChromeArgOptions } from "puppeteer";
import puppeteer from 'puppeteer-extra'
import Adblocker from 'puppeteer-extra-plugin-adblocker'

puppeteer.use(AdblockerPlugin()) // Added before the browser is initialized on line 69.

The result is an indefinitely loading blank tab – any ideas on how I could get it to work?

first of all,thank you for making this amazing package.

and here is my problem:
I run a node.js server on windows,when I lock the screen,I got this error message: Navigation timeout of 30000 ms exceeded.And I met this problem when I use electron with desktopCapturer.

I wonder if there is a solution to let the code work right when screen has been locked.

hello , i use the puppeteer-stream, save the stream to file ,but the webm file is empty !! Mac system,,thank you

I'm trying to record video and audio using puppeteer stream, but it's getting written only the video to the output file:

async function videoRecorder() {
  require("puppeteer-stream");
  const puppeteer = require("puppeteer");
  const fs = require("fs");

  const filename = `./recordings/test.mp4`;

  const file = fs.createWriteStream(filename);

  const browser = await puppeteer.launch({
    executablePath:
      "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    headless: true,
    defaultViewport: null,
    devtools: false,
    args: [
      "--window-size=1920,1080",
      "--window-position=1921,0",
      "--autoplay-policy=no-user-gesture-required",
    ],
    ignoreDefaultArgs: ["--mute-audio"],
  });

  const page = await browser.newPage();

  await page.goto(pathToPageWithVideo, {
    waitUntil: "load",
  });

  const stream = await page.getStream({
    audio: true,
    video: true,
  });

  stream.pipe(file);

  setTimeout(async () => {
    await stream.destroy();
    file.close();
    console.log("finished");
  }, 10000);
}

Even when I create browser with defined viewport (i.e. 300*600)

const width = 300;
const height = 600;

const browser = await launch({
        defaultViewport: {
          width: width,
          height: height
        },
        args: ['--no-sandbox']
      });
//...

video size of recorded video will be 1920*1080.
What am I doing wrong?

This is my code:

require('puppeteer-stream')
const puppeteer = require('puppeteer')
const fs = require('fs')

const file = fs.createWriteStream('test.webm');

(async () => {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.goto('https://example.com');
	const stream = await page.getStream({ audio: true, video: true })
	stream.pipe(file)
})()

Though even with the example code it gives the same error for me

Hello, thank you for your work!

I've been using puppeteer-stream for over a month now and it works perfectly.

However, sometimes it gives the following error at the starting of the code.

(node:20) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'page' of undefined at /app/node_modules/puppeteer-stream/dist/PuppeteerStream.js:79:63 at Generator.next () at fulfilled (/app/node_modules/puppeteer-stream/dist/PuppeteerStream.js:5:58) at processTicksAndRejections (internal/process/task_queues.js:95:5)

What can be the reason for this error? And why does it come only once in almost 100 tries? Please let me know how to deal with kind of error?

I believe the error comes because the browser has not started properly.

Thanks again!

PS:
The code where the error comes.
const browser = await launch({ defaultViewport: null, headless: true, args: [ "--autoplay-policy=no-user-gesture-required", '--start-fullscreen', '--no-sandbox', ], }); const page = await browser.newPage(); await page.setViewport({ width: 1400, height: 800}); const navigationPromise = page.waitForNavigation();

Hello! I already have the stream recording but when this finish the video appears that it has 00.00.00 sec recorder. When i touch on the video i can see it but i can't go forward or anything, even i'm trying to compress but it says that the video doesn't have any time to compress.

Application in which WebRTC calls happen, do not save the audio in EC2.

my code

After messing around for awhile I learned that you have to use --start-fullscreen to get a full capture of the page you want to record. Video outputs, plays, however it seems to missing the "end time". Any idea how I would go about fixing this?

Screenshot of playback bar in vlc

Thank you for creating this package. Using this, I am able to record the stream with both audio and video. However, just for an update, is it possible to run this in headless mode?

Hello team,
Thank you so much for this awesome NPM.
Currently, I am facing an issue, which is - I am recording and video by HTML video editor (which is developed by my team), there are lots of media is running at the same time. The issue is when I am recording the video, my media is buffering to load in the browser and it is also recorded, so I want to pause the recording on buffering time, and after properly loading my media starts re-recording.

Please suggest to me how to pause recording for some time and start it again.
Please let me know if any input you need from my end.

Thanks in advance :)

Hi,

Since .destroy kill the whole page and .pause and .resume do not allow ffmpeg to catch a stream on the fly, how does one close a stream without closing the whole page (in a way that allow to make a new one later on the same page) ?
I'm confused

Thanks

I would like to send the stream to the client-side using WebSocket. I'm pretty new to the pipe/nodejs, so sorry for the noobish questions.

I have created the websocket server using:

const WebSocket = require('ws');
server = http.createServer(app).listen(5000, () => {
        console.log(`Listening on HTTP`)
})
const wss = new WebSocket.Server({server});

Thank you!

Hi there
I'm trying to use this library to record a page, but it gets closed after stream starts piping to file

this is the code:

const puppeteer = require('puppeteer');
const puppeteerStream = require("puppeteer-stream");
const fs = require("fs");

const executablePath = 'somepath';
const file = fs.createWriteStream(__dirname + "/demo-2.webm");
(async () => {
  const browser = await puppeteerStream.launch({
    executablePath,
    args: [
      '--autoplay-policy=no-user-gesture-required',
      '--no-sandbox',
    ],
  });
  const [ page ] = await browser.pages();
  await page.goto("http://localhost:3000");
  const stream = await puppeteerStream.getStream(page, { audio: true, video: true });
  console.log("recording");

  stream.pipe(file);
  setTimeout(async () => {
	await stream.destroy();
	file.close();
	console.log("finished");
  }, 5_000);

  await browser.close();
})()

I tried the ffmpeg example too, but in both cases, as soon as I see recording on console, the browser closes without any error or warning on console

thanks for this library, and I'd appreciate if anyone can help

I was trying to use this library inside a docker container using Xvfb tool. But I came across this issue where the getStream function only doesn't work reliably. Every now and then it throws this error:

(node:33) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property 'capture' of undefined
    at START_RECORDING (chrome-extension://jjndjgheafjngoipoacpjgeicjeomjli/background.js:27:32)
    at __puppeteer_evaluation_script__:4:13
    at ExecutionContext._evaluateInternal (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async ExecutionContext.evaluate (/app/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:107:16)
(node:33) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:33) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It look like on some runs the chrome object has only keys available [ 'loadTimes', 'csi' ] other times all the APIs are present. Not sure what would make rest of the keys unavailable randomly.

Please let me know if there is any other information I need to provide to help debug this issue.

Currently to record a video of 5 minutes, we've to set time out for 300000, which is not really efficient. Is there a way to speed up the task, for example speeding up internal recording so that if there is enough machine resources, the recording for 5 min video is actually finished in 30 seconds?

Any help or thoughts would be really appreciated.

When transpiling with Typescript I obtain these errors:

node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:2:8 - error TS1192: Module '"/home/euber/Github/bbb-video-scraper/node_modules/puppeteer-stream/node_modules/puppeteer/lib/types"' has no default export.

2 import puppeteer, { LaunchOptions, Page, BrowserOptions, ChromeArgOptions } from "puppeteer";
         ~~~~~~~~~

  node_modules/puppeteer-stream/node_modules/puppeteer/lib/types.d.ts:7097:10
    7097          export * from "devtools-protocol/types/protocol";
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'export *' does not re-export a default.

node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:2:42 - error TS2305: Module '"puppeteer"' has no exported member 'BrowserOptions'.

2 import puppeteer, { LaunchOptions, Page, BrowserOptions, ChromeArgOptions } from "puppeteer";
                                           ~~~~~~~~~~~~~~

node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:2:58 - error TS2305: Module '"puppeteer"' has no exported member 'ChromeArgOptions'.

2 import puppeteer, { LaunchOptions, Page, BrowserOptions, ChromeArgOptions } from "puppeteer";
                                                           ~~~~~~~~~~~~~~~~

node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:8:5 - error TS2416: Property 'destroy' in type 'Stream' is not assignable to the same property in base type 'Readable'.
  Type '(page?: Page | undefined) => Promise<void>' is not assignable to type '(error?: Error | undefined) => this'.
    Types of parameters 'page' and 'error' are incompatible.
      Type 'Error | undefined' is not assignable to type 'Page | undefined'.
        Type 'Error' is missing the following properties from type 'Page': _closed, _client, _target, _keyboard, and 129 more.

8     destroy(page?: Page): Promise<void>;
      ~~~~~~~

Found 4 errors.

Version of ts: 4.5.5
Version of your lib: 2.0.8

After upgrading to 2.0.7 from 2.0.6 I start getting this error from tsc:

Type '(page?: Page) => Promise<void>' is not assignable to type '(error?: Error) => void'.
    Types of parameters 'page' and 'error' are incompatible.
      Type 'Error' is missing the following properties from type 'Page': _closed, _client, _target, _keyboard, and 118 more.

I bypass it by chaning destroy(page?: Page): Promise<void>; to destroy(page?: any): Promise<void>; in node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:8:5.
However that's a dirty fix.

Any ideas what could be wrong?

The current browser mime type type allow's values that are not supported by MediaRecorder API
https://github.com/Flam3rboy/puppeteer-stream/blob/c55492edc9fc6421e095cb173eff4cf8359431bf/src/PuppeteerStream.ts#L118-L129

A list for supported mimetypes can be drawn from the Chromium source code
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/fast/mediarecorder/MediaRecorder-isTypeSupported.html

https://github.com/ganganimaulik/puppeteer-stream/blob/main/src/PuppeteerStream.ts

I had to modify source file here for quick solution but we should add method to pass browser variable instead of creating it in package ?

what you think?
willing to add pr if you're busy.

ERROR: https://www.toptal.com/developers/hastebin/umowehuwej.sql
not sure what else I can say... All I do is start a steam with:

const stream = await getStream(tab, { audio: true, video: true, frameSize: 1000 })

launch options:

browser = await launch({ headless: false, args: ['--window-size=1080,1920', '--start-fullscreen', '--autoplay-policy=no-user-gesture-required', '--disable-infobars', "--no-default-browser-check","–allow-file-access-from-files","-disable-web-security"], ignoreDefaultArgs: ['--enable-automation'], });

Version 2.0.7 on npm is missing the extension fix
Version 2.0.5 on npm has the fix, on version 2.0.6 on npm I haven't tested it

I am using this stream config
await getStream(page, { audio: true, video: false, mimeType: "audio/wav"});
I stream to file, but it stops after 5 seconds and final file has 0b.

Hi. The package.json says that this package is licensed under ISC, while the repo has the GPL-2.0 as the license. I would like to ask which license would apply if I want to use the package?

So puppeteer-stream is recording the video in 1440x900 (The resolution of my screen) instead of 1350x2400 (The resolution of the browser)

The code to record is this:

    browser = await puppeteer_stream.launch(puppeteer, {
        //headless: true,
        executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        args: [`--window-size=1350,2400`],
        //args: ["--start-maximized"],
        defaultViewport: null
    })

    page = await browser.newPage()

    await page.setViewport({
        width: 1350,
        height: 2400
    })

    await page.goto("http://localhost:5085/player.html", { waitUntil: "networkidle2" })

Hi there. I have a webRTC application that I am trying to add livestreaming to. I am trying to set up a small test where I can livestream to twitch using puppeteer-stream and ffmpeg. It seems as if I am only sending data to twitch right before the script ends. Do you know what I am doing wrong in the code below? Thank you!

const { launch, getStream } = require('puppeteer-stream')
const fs = require('fs')
const { exec } = require('child_process')

require('dotenv').config()

// puppeteer stream + FFmpeg example: https://github.com/Flam3rboy/puppeteer-stream/blob/main/examples/ffmpeg.js

const ffmpegConfig = (twitch) => {
  return `ffmpeg -i - -v error -c:v libx264 -preset veryfast -tune zerolatency -c:a aac -strict -2 -ar 44100 -b:a 64k -y -use_wallclock_as_timestamps 1 -async 1 -bufsize 1000 -f flv ${twitch}`
}

let twitch =
  'rtmp://dfw.contribute.live-video.net/app/' + process.env.TWITCH_STREAM_KEY

async function test() {
  const browser = await launch({
    executablePath:
      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    defaultViewport: {
      width: 1920,
      height: 1080,
    },
  })

  const page = await browser.newPage()
  await page.goto('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
  const stream = await getStream(page, {
    audio: true,
    video: true,
    frameSize: 1000,
  })
  console.log('recording')
  // this will pipe the stream to ffmpeg and convert the webm to mp4 format
  const ffmpeg = exec(ffmpegConfig(twitch))

  ffmpeg.stderr.on('data', (chunk) => {
    console.log(chunk.toString())
  })

  stream.pipe(ffmpeg.stdin)

  setTimeout(async () => {
    await stream.destroy()
    stream.on('end', () => {
      console.log('stream has ended')
    })
    ffmpeg.stdin.setEncoding('utf8')
    ffmpeg.stdin.write('q')
    ffmpeg.stdin.end()
    ffmpeg.kill()

    console.log('finished')
  }, 1000 * 40)
}

test()

Right before the script ends loading indicator shows up

While recording a video playback , I noticed some sync issues with audio and video . Is there something similar anyone has faced ?

For context : I'm recording a 1080p video from a local server

It is a good practice not to include the source code and the tests in the published npm package

Thanks for this amazing thing,
I'm using this quite heavily to stream our dashbaords to chromecasts :) I'm looking into performance optimizations right now, and tried to use one browser instance with multiple tabs instead of a single browser instance for each stream. Unfortunately this doesn't seem to work correctly, ffmpeg errors with weird errors like " Stream map '0:a' matches no streams."

Is it possible to use this plugins with multiple tabs? If so, anything I'm missing here or could try to get it running?

Thanks
Simon

I understand this might be on purpose to allow easier streaming on websites but I'm not using it for a website and there aren't really any other good alternatives. Is there any way to either convert the file or toggle on/off so it won't be endless?

Anyways I love the project it works great for what it is supposed to do.

Do not use defaultViewport parameter, because

1. It doesn't resize the window correctly. The correct syntax is width,height it uses widthxheight
2. It neither sets the viewPort value correctly.

As the title suggests, would it be possible to enable support for headless mode?

Hey great library! I am using it for a project as it seems to be the only one I could find that supports both video and audio. My question for you is how does the library work from a 10,000 ft overview. I am guessing it uses FFmpeg underneath the hood to capture the video and audio right? I am writing an article and wanted to mention this library as a good solution to quickly record. Thank you so much!

Hi, I've just tried. It fixes all of those errors but one:

node_modules/puppeteer-stream/dist/PuppeteerStream.d.ts:8:5 - error TS2416: Property 'destroy' in type 'Stream' is not assignable to the same property in base type 'Readable'.
  Type '() => Promise<void>' is not assignable to type '(error?: Error | undefined) => this'.
    Type 'Promise<void>' is not assignable to type 'this'.
      'this' could be instantiated with an arbitrary type which could be unrelated to 'Promise<void>'.

8     destroy(): Promise<void>;
      ~~~~~~~


Found 1 error.

I can't reopen the issue so I create a new one.

Originally posted by @euberdeveloper in #36 (comment)

I am facing a problem with Typescript. You should export a type "PuppeteerStreamBrowser" that is returned when there is the launch. Otherwise either it will have to be implicit (so I can not explicitly write it in the code, e.g. in a class field type annotation) or, if the puppeteer's browser type is used, when getting the stream an as any is required, because the puppeteer browser is just a supertype

Is it possible to use puppeteer-stream to record a screencast at 60fps?

Hello,

I'm using xvfb with this parameters:

-screen 0 1920x1080x16

And puppeteer-stream like that:

var screenWidth = 1920
var screenHeight = 1080
var xvfb 		= new Xvfb({
	silent: true,
    xvfb_args:["-screen", "0", screenWidth+"x"+screeHeight+"x16", "-ac"],
});

xvfb.startSync();
var browser  = await puppeteerStream.launch({
	defaultViewport: {
		width	: screenWidth ,
		height	: screenHeight 
	},
	args: ['--no-sandbox']
});
var stream = await puppeteerStream.getStream(page, { 
	audio: false, 
	video: true 
});

But I'm never able to get correct resolution.. If i print screen.width and screen.height (you can see it in the middle of screenshots), I correctyl have 1920x1080. With window.innerWidth / window.innerHeight I also have have good value ! Looks like an issue with the stream..

What I have (this is the video output):

What I must have: (from browser):

One more issue:

I'm not able to restart the video, it's looks like there is no video duration, M I missing something ?

Video cursor is always at 0. Don't know if it's an issue with windows video reader or.. Same issue with VLC:

This is how I stop the record:

await stream.destroy();
file.close();
await browser.close(); 
xvfb.stopSync();

Don't know where to start to debug this issue, any idea?

Your help is welcome !

Does this support a video alpha channel? I've noticed webm does support alpha background channel, and so does .mov but I'm not sure if this library enables it.

I need to record a page which needs access to webcam and mic. After passing "--use-fake-ui-for-media-stream", stream is not working and recording results in a zero byte page.

example

const file = fs.createWriteStream(__dirname + "/test.webm");

async function test() {
	const browser = await launch(puppeteer, {
		defaultViewport: {
			width: 1920,
			height: 1080,
		},
		args:[
			"--use-fake-ui-for-media-stream"
		]
	});

	const page = await browser.newPage();
	await page.goto("PAGE-THAT-NEEDS-MEDIA-PERMISSIONS");
	const stream = await getStream(page, { audio: true, video: true });
	console.log("recording");

	stream.pipe(file);
	setTimeout(async () => {
		await stream.destroy();
		file.close();
		console.log("finished");
	}, 1000 * 10);
}

test();

is there any way to optimize it, it seems to take a lot of CPU when I start recording,

• I tried lowering the resolution to 720p from 1080p, it takes a bit less CPU usage m but it is still high
  @Flam3rboy thanks for the repo

function START_RECORDING({ index, video, audio, frameSize, audioBitsPerSecond, videoBitsPerSecond, bitsPerSecond, mimeType, videoConstraints }) {
	chrome.tabCapture.capture(
		{
			audio,
			video,
			videoConstraints: videoConstraints || {}
		},

then,

const videoConstraints = { mandatory: { minWidth: 480, minHeight: 680, maxWidth: 480, maxHeight: 680 } }
const stream = await puppeteerStream.getStream(page, { audio: true, video: true, videoConstraints })
console.log("recording")

videoConstraints: {
      mandatory: {
          minWidth: 1920,
          minHeight: 1080,
          maxWidth: 1920,
          maxHeight: 1080
      }
  }

If you let me put the video constant value in, the problem will be solved. Make sure to write down the size you want.

• Solving the problem that's being recorded throughout the PC screen.
• Small windows can be recorded.

Nice program. I'll use it well.

I have issues with high severity if I run npm audit. Could it be possible to update the puppeteer version?

Btw, thanks for the package, I am using it to scrape some video lectures that otherwise I could not download and put at 2x velocity and, a part from some small bugs, it is working great!

Currently recording to a file using timeout as a measure leads to inaccurate video lengths depending on the processing that needs to be done . Can there be any alternative here ?

I have an express js server and I want to create an endpoint to stream the output "Stream" object as a live video. I've got everything setup where I create the browser instance, page object, send the html, and get the stream object, but from there, I'm not sure how to create the endpoint to actually allow a consumer to stream it as a video. I know this isn't directly related to this library but any help would be appreciated!

Hey. Is there a way to use the stream as the input of FFMPEG?

I tried to write the stream to a file and use the file as the input in my FFMPEG call but it is giving me an error. This is what I have so far:

const browser = await launch({
    defaultViewport: {
        width: 1920,
        height: 1080,
    },
});

const page = await browser.newPage();
await page.goto(streamPage);
const stream = await getStream(page, {audio: true, video: true});
const file_dir = __dirname + `/${ this.name }.mp4`;
const file = fs.createWriteStream(file_dir);
stream.pipe(file);

const ffmpeg = child_process.spawn('ffmpeg', [
    '-re',
    '-i', `${ file_dir }`,
    '-framerate', '30',            
    '-f', 'flv',
    rtmpUrl
]);

This is the error that I am getting:

FFmpeg STDERR: [mov,mp4,m4a,3gp,3g2,mj2 @ 0x71efcc0]
FFmpeg STDERR: Format mov,mp4,m4a,3gp,3g2,mj2 detected only with low score of 1, misdetection possible!

FFmpeg STDERR: [mov,mp4,m4a,3gp,3g2,mj2 @ 0x71efcc0] moov atom not found

FFmpeg STDERR: /mnt/c/Users/thadd/OneDrive/Documents/NetBeansProjects/TalkiStudio/123.mp4: Invalid data found when processing input

FFmpeg child process closed, code 1, signal null

I've tried to run ffmpeg example but getting this error.

node:events:368
throw er; // Unhandled 'error' event
^

Error: write EOF
at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:98:16)
Emitted 'error' event on Socket instance at:
at Socket.onerror (node:internal/streams/readable:773:14)
at Socket.emit (node:events:390:28)
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4095,
code: 'EOF',
syscall: 'write'
}