【技巧】ffmpeg/Streamlink+Artplayerを使用してストリームの中継を行う

前言#

以前、dplayer を使用してライブ中継のソリューションを構築しました こちらをご覧ください。dplayer はモバイルデバイスで再生ボタンをクリックした後、読み込み時間が長い場合、再生ボタンが押されていないと誤認識することがありました。そのため、V 佬の中継ページを参考にして、Artplayer に切り替えました。同時に、Weibo や QQ チャンネルのライブ機能を利用して FLV を取得することができることに気づきました。これにより、ウェブページ自体は単一のサーバー（またはスペース）で中継することができるようになりました。

以下は本文です。

環境の構築#

この記事では、Ubuntu 22.04 を使用して構築します。
この記事では、Nginx の制御パネルとして Baota を使用せず、完全なコマンドライン方式で設定します【2023/10/22 更新】

正式な構築#

Nginx と ffmpeg、certbot のインストール#

apt-get -y install ffmpeg nginx certbot

ウェブサイトディレクトリの作成#

mkdir -p /var/www/your.site

Nginx の設定#

nginxconfig.io を使用した設定の生成#

Nginxconfig.ioを開き、以下の設定を使用します：

次に、ウェブサイトの 使用設定 のセクションの説明に従って設定を行います。以下に注意してください：

私のサーバーでは、certbot が常に証明書を取得できないことがわかりました。調査の結果、一時的にウェブサイトにアクセスできないためだと判明しました。そのため、スタンドアロンモードを使用して証明書を申請することにしました。証明書を申請する前に一時的に Nginx サービスを停止し、申請が成功したら再度開始します。
```
sudo systemctl stop nginx
certbot certonly --standalone -d あなたのウェブサイト --email あなたのメールアドレス -w /var/www/_letsencrypt -n --agree-tos --force-renewal
sudo systemctl start nginx
```

ウェブページの.html 拡張子を削除する#

/etc/nginx/nginxconfig.io/general.confに以下のリライトルールを追加します：

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

保存後、sudo nginx -t && sudo systemctl reload nginxを入力して設定を適用します。

OBS などのソフトウェアを使用してライブを開始する#

以下の設定を行います：

サーバー：rtmp://あなたのサーバーアドレス:1935/live/
ストリームキー：任意の設定ですが、HTMLコードのストリームキーと一致する必要があります

ffmpeg を使用してストリームをプルして転送する#

以下は大まかなコマンドです：

ffmpeg -i $プルURL -c copy -f flv $WeiboストリームURL

Streamlink を使用してストリームをプルして転送する#

Streamlink と Screen のインストール#

apt-get install python3-pip screen  
pip3 install streamlink

メディアストリームの転送（YouTube ライブを例に）#

echo "YouTubeのURLを入力してください:"  
read URL  
streamlink $URL best -O | ffmpeg -i pipe:0 -c copy -f flv $WeiboストリームURL

YouTube の非公開 (Unlisted) ライブストリームを転送する【淦】#

この転送を行うためには、ライブストリームの URL を知っている必要があります。例えば、https://youtu.be/abcdefgのような URL です。

Screen のインストール#

apt -y install screen

バックグラウンドで実行するためには、screen を使用する必要があります... 私は無知です...

yt-dlp のダウンロードとデプロイ#

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

Screen を使用してバックグラウンドで実行する#

screen -S youtube

YouTube の非公開ライブストリームを転送する#

clear  
echo "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

ここでは、yt-dlpを使用して YouTube のライブリンクを m3u8 リンクに解析し、ffmpeg に渡して読み込むために使用しています。また、buffer_sizeを小さく設定するとエラーが発生するようです（なぜかはわかりませんが、とにかく大きくすれば問題ありません）。

Weibo の中継#

Weibo ライブのバックエンドで中継を開始します。
以下のコードを使用してメディアストリームを転送します。

#!/bin/bash
clear
read -p "元のファイルのアドレスを入力してください: " URL
echo ""
read -p "Weiboのストリームリンクを入力してください: " LINK
streamlink $URL best -O | ffmpeg -re -i pipe:0 -c copy -f flv $LINK

以下のコードを使用してウェブページで Weibo のライブストリームを呼び出します。

<!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 = '再生形式がサポートされていません：flv';
            }
        }
        
        var art = new Artplayer({
            container: '.artplayer-app',
            url: 'Weiboのライブアドレス',
            type: 'flv',
            isLive: true,
            customType: {
                flv: playFlv,
            },
        });
        
        art.on('ready', () => {
            console.info(art.flv);
        });
    </script>
</body>