【Tips】Using ffmpeg/Streamlink+Artplayer for live streaming relay

Preface#

I have previously built a live broadcast relay solution using dplayer check it out here. I found that when the play button on dplayer is clicked on a mobile device and the loading time is a bit long, it always thinks that it hasn't been clicked to play. So, referring to V's relay page, I switched to Artplayer. At the same time, this time I found that I can use the live broadcast function of Zhihu or QQ channels to extract FLV, so that the webpage itself only needs any random server (or even space) to relay.

The following is the main content

Environment Setup#

This article uses Ubuntu 22.04 for setup
This article cancels the use of Baota panel as the nginx control panel and uses a fully command line configuration [Updated on 22nd October 2023]

Formal Setup#

Install nginx & ffmpeg & certbot#

apt-get -y install ffmpeg nginx certbot

Create website directory#

mkdir -p /var/www/your.site

Configure Nginx#

Generate configuration using nginxconfig.io#

Open Nginxconfig.io and use the following configuration:

Then configure according to the instructions in the "Using the Configuration" section of the website. Note:

In my server, certbot always fails to obtain the certificate, and it is found that it may be due to the temporary inability to access the website, so the standalone mode is used for application. Before applying, temporarily stop the Nginx service, and then start it after successful application.
```
sudo systemctl stop nginx
certbot certonly --standalone -d your.website --email your.email -w /var/www/_letsencrypt -n --agree-tos --force-renewal
sudo systemctl start nginx
```

Remove the .html suffix from web requests#

Add the following rewrite rule in /etc/nginx/nginxconfig.io/general.conf:

location ^~ / {  
    if (!-e $request_filename){ 
        rewrite ^(.*)$ /$1.html last;
        break;
    }
    try_files $uri $uri/ =404;
}

Save the file and run sudo nginx -t && sudo systemctl reload nginx to apply the configuration.

Start live streaming using OBS or other software#

Set as follows:

Server: rtmp://your.server.address:1935/live/
Stream key: Set as desired, but should be consistent with the stream code in the HTML code

Pull and relay streams using ffmpeg#

The approximate command is as follows:

ffmpeg -i $streaming_address -c copy -f flv $weibo_streaming_address

Pull and relay streams using Streamlink#

Install Streamlink and Screen#

apt-get install python3-pip screen  
pip3 install streamlink

Relay media streams (using YouTube live as an example)#

echo "Please input the youtube url:"  
read URL  
streamlink $URL best -O | ffmpeg -i pipe:0 -c copy -f flv $weibo_streaming_address

Relay YouTube Unlisted live streams【Gan】#

The premise of this relay is that you need to know the address of the live stream, such as https://youtu.be/abcdefg

Install Screen#

apt -y install screen

I only know how to use screen for background running... I'm a noob...

Download and deploy yt-dlp#

wget -O /usr/local/bin/yt-dlp https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp

Use Screen to run in the background#

screen -S youtube

Relay YouTube Unlisted live streams#

clear  
echo "Please input the YouTube url:"  
read URL  
ffmpeg -re -i $(yt-dlp -f best -g $URL) -c copy -bsf:a aac_adtstoasc -f flv -buffer_size 256M rtmp://localhost/live/youtube

Here, yt-dlp is used to parse the YouTube live link into an m3u8 link and pass it to ffmpeg for reading. Setting buffer_size to a smaller value seems to cause errors (I don't know why, but increasing it works).

Battle Zhihu#

Start a live broadcast on Weibo Live Backend
Use the following code to relay media streams

#!/bin/bash
clear
read -p "Enter the original file address: " URL
echo ""
read -p "Enter Weibo stream link: " LINK
streamlink $URL best -O | ffmpeg -re -i pipe:0 -c copy -f flv $LINK

Use the following code to call Weibo live stream on a webpage

<!DOCTYPE HTML>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LIVE</title>
    <link rel="icon" type="image/x-icon" href="https://gcore.jsdelivr.net/gh/imbalaomao/picx-images-hosting@master/image.4akbdjz0ewy0.png">
    <script src="https://gcore.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <style>
        .artplayer-app {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="artplayer-app"></div>
    <script>
        function playFlv(video, url, art) {
            if (flvjs.isSupported()) {
                if (art.flv) art.flv.destroy();
                const flv = flvjs.createPlayer({ type: 'flv', url });
                flv.attachMediaElement(video);
                flv.load();
                art.flv = flv; 
                art.on('destroy', () => flv.destroy());
            } else {
                art.notice.show = 'Unsupported playback format: flv';
            }
        }
        
        var art = new Artplayer({
            container: '.artplayer-app',
            url: 'Weibo live stream address',
            type: 'flv',
            isLive: true,
            customType: {
                flv: playFlv,
            },
        });
        
        art.on('ready', () => {
            console.info(art.flv);
        });
    </script>
</body>