Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Run puppeteer and ffmpeg inside docker container #1

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
.env
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v20.16.0
53 changes: 53 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# Use the official Node.js LTS image as the base image
FROM node:lts
devnoname120 marked this conversation as resolved.
Show resolved Hide resolved

# Create and change to the app directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the app directory
COPY package*.json ./

# Install app dependencies
RUN npm ci
devnoname120 marked this conversation as resolved.
Show resolved Hide resolved

# Install ffmpeg
#RUN apt-get update && apt-get install -y ffmpeg libnss3 libatk1.0-0 libatk-bridge-2.0
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
#RUN apt-get update && apt-get install -y ffmpeg libnss3 libatk1.0-0 libatk-bridge-2.0

RUN apt-get update && apt-get install -y \
ffmpeg \
ca-certificates \
fontconfig \
gconf-service \
libasound2 \
libatk1.0-0 \
libcairo2 \
libcups2 \
libdbus-1-3 \
libdrm2 \
libexpat1 \
libfontconfig1 \
libgbm1 \
libglib2.0-0 \
libgtk-3-0 \
libnspr4 \
libnss3 \
libpango-1.0-0 \
libx11-xcb1 \
libxcomposite1 \
libxdamage1 \
libxi6 \
libxrandr2 \
libxss1 \
libxtst6 \
lsb-release \
wget \
xdg-utils \
--no-install-recommends

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You covered 2/3 of the recommendations the Docker gives about the usage of apt-get.

Could you add && rm -rf /var/lib/apt/lists/* at the end as well?
It should do nothing except reduce image size.


# Copy the rest of the application code to the app directory
COPY . .
devnoname120 marked this conversation as resolved.
Show resolved Hide resolved

# Expose the application port (e.g., 3000)
EXPOSE 1234

# Command to start the Node.js application
CMD ["node", "index.js"]
devnoname120 marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 12 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
version: '3.8'

services:
app:
build: .
platform: linux/amd64
environment:
- SITE_TO_STREAM=https://stage.liveaccess.online/p/f4hnpr?language=de
- STREAM_DEST=udp://127.0.0.1:1234?pkt_size=1316
ports:
- "1234:1234"
network_mode: host
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why host for the network?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question here! (There isn't a good emoji to express this sentiment on GitHub 😆)

10 changes: 3 additions & 7 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ const { spawn } = require('child_process');
(async () => {
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu', '--disable-dev-shm-usage']
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--disable-extensions']
});

const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 720 });
//await page.goto('https://swisstxt.ch'); // Replace with your target URL
await page.goto('https://stage.liveaccess.online/p/f4hnpr?language=de')
await page.goto(process.env.SITE_TO_STREAM)

// Define the selector of the element you want to capture
const elementSelector = '.mantine-Paper-root'; // Replace with your target element's selector
Expand All @@ -36,17 +36,13 @@ const { spawn } = require('child_process');
'-f', 'image2pipe',
'-r', '30',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are specifying 30 fps as a target frame rate both here and on line 73 - but on line 73, it is very implicitly encoded as the result of 1000/30.

Could you define a constant and reuse it everywhere? I am sorry if this causes weird floating point issues.
This does look very easy to overlook if the next programmer just does a "CTRL-F" for "30".

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed that part of the code already and will ask for a review in another PR.

'-i', '-',
//'-f', 'alsa', '-i', 'default', // Adjust audio input as needed
'-c:v', 'libx264',
'-preset', 'veryfast',
'-b:v', '3000k',
'-maxrate', '3000k',
'-bufsize', '6000k',
//'-c:a', 'aac',
//'-b:a', '128k',
'-f', 'mpegts',
'udp://127.0.0.1:1234?pkt_size=1316'
//'srt://listener_ip:port?pkt_size=1316' // Replace with your SRT listener details
process.env.STREAM_DEST
]);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(This regards line 73, which GitHub won't let me select :()

  1. Have you considered using setInterval?
  2. Either way, it would be safest/cleanest to also save the result of setTimeout or setInterval in a variable which is then cleared when the function exits - otherwise I am not sure if this doesn't cause captureFrame to continuously execute even after the ffmpeg process has exited.
  3. Also - I am not really that familiar with the logic of what happens if frame delays start piling up.
    If this becomes an issue at any point, it might make sense to use a more specific method like lodash's debounce/throttle or requestAnimationFrame , but I leave this to your judgement.

ffmpeg.stderr.on('data', (data) => {
Expand Down
16 changes: 16 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node index.js",
"start": "node -r dotenv/config index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"puppeteer": "^22.15.0"
},
"devDependencies": {
"dotenv": "^16.4.5"
}
}