Project Introduction

PixiJS WebGl Server-Side Rendering to Video

Host Environment Dependencies

1. Standard Chrome browser
2. ffmpeg for audio and video processing (download address: http://www.ffmpeg.org/download.html)
3. nodejs 18.19.0+
4. redis 5+ for saving task queues

Configuration config.js

Mainly focus on the following parts (default reserved configuration is set according to the mac development environment, other environments are set as needed)

1. Enable GPU hardware acceleration related configuration, select to enable the following comments according to the actual OS

// Hardware acceleration related configuration
//windows
// No configuration needed

//mac
'--use-gl=egl',

//linux
// '--use-gl=desktop',
// '--ignore-gpu-blacklist',
// '--enable-gpu-rasterization',
// '--enable-features=VaapiVideoDecoder,VaapiVideoEncoder,Prerender2',

2. Host browser installation address setting, modify the configuration according to the actual OS and browser installation directory

//linux
// executablePath: "/opt/google/chrome/chrome",

//windows, specific path according to the actual environment
// executablePath: "c:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",

//mac
executablePath:'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',

3. Configure .env

#1. Copy .env.example to .env
$ cp .env.example .env

#2. Modify the configuration information in .env, focusing on the following configuration items

#Set the OS platform for rendering (mac/win/ubuntu/centos), automatically select config.*.js as the pre-selected configuration to start chrome and ffmpeg parameters according to the platform
render.os=win

#Chrome browser location, default configuration is in config/config.*.js
render.executablePath=

#Resource domain configuration
render.resource=https://cdn.h5ds.com

#Redis configuration [must be the same as the server's redis configuration]
render.redis.host=127.0.0.1
render.redis.port=6379
render.redis.password=
render.redis.db=0

#[File Storage] File storage system (oss-Alibaba Cloud OSS, local-local storage, cos-Tencent Cloud COS, s3-S3, minio-Minio), default is oss
storage.disk=oss
#[File Storage] Alibaba Cloud OSS configuration
storage.oss.accessKeyId=LTAI1i16~
storage.oss.accessKeySecret=KZW1AqsC4~
storage.oss.bucket=h5ds-cdn
storage.oss.cname=true
storage.oss.endpoint=https://cdn.h5ds.com
#Tencent Cloud COS configuration
storage.cos.SecretId=
storage.cos.SecretKey=
storage.cos.Bucket=
storage.cos.Region=
#[File Storage] MinIO configuration
storage.minio.accessKey=IntJguUOlS9Iu438TZ2z
storage.minio.secretKey=W42kGBLCAnyK0pjv0rB7mFFuLui2K8Y9FoXy83LO
storage.minio.bucket=h5ds
storage.minio.endPoint=localhost
storage.minio.port=9000
storage.minio.useSSL=false
#[File Storage] AWS S3 configuration
storage.s3.accessKeyId=AKIAUO7P~
storage.s3.secretAccessKey=gTxfs6A0+3lLC4E5RIh0~
storage.s3.region=cn-north-1
storage.s3.bucket=xinfa-test

Running

# [Optional] Install yarn
$ npm install -g yarn

# Install dependency packages
$ yarn install

# Start server with default port, default listening on 8000
$ node server.js

# Start server with specified port
$ node server.js 8888

Usage

Call the service through the API interface

API document address: https://console-docs.apipost.cn/preview/8b5f1f33c527f522/2a23b18c8e596003

Docker Build and Usage

1. Set .env, set the running environment to linux

   render.os=linux

2. Build container

# Delete old container
$ docker stop xfce
$ docker rm xfce

# Build image
$ docker build -t xfce .

# Clean up TAG<none> images
$ docker image prune -f

# Test image
$ docker run -d --name xfce -v $pwd/:/www/ -p 3389:3389 -p 6901:6901 -p 8000:8000 xfce

# Container usage instructions
    https://hub.docker.com/r/soff/ubuntu-xfce-vnc

# Browser VNC link
    http://localhost:6901/?password=vncpassword


# Push to remote image repository
$ docker tag xfce registry.cn-hangzhou.aliyuncs.com/h5ds/xfce:latest
$ docker push registry.cn-hangzhou.aliyuncs.com/h5ds/xfce:latest
# Clean up redundant <none> images
$ docker image prune -f

Processing Status Description

List API: /api/job/list?types=waiting,active,failed&start=0&end=0 Detail API: /api/job/info?id=108

Result:

{
	"code": 0,
	"message": "success",
	"data": {
		"id": "108",
		"data": {
			。。。
		},
		"progress": "callbacked", // Processing status
	}
}

data.progress field status description:
Normal processing status:
    Pending processing
    ->initing(data preparation)
    ->rendering,*%(rendering in progress, progress)
    ->downloading(downloading webm and audio data)
    ->rendered(rendering logic completed)
    ->transcodeing(transcoding and merging audio and video)
    ->transcoded(transcoding and merging completed)
    ->putcosing(uploading to cos)
    ->putcosed(uploading to cos completed)
    ->callbacking(callback api)
    ->callbacked(callback api completed)

Exception status:
    rendererror(rendering error)
    transcodeerror(transcoding and merging error)
    putcoserror(uploading to cos error)
    callbackerror(callback API error)