[Q&A] rtmp-moduleを使ったブラウザ上でのストリーミング再生

rtmp-moduleを使ったブラウザ上でのストリーミング再生

解決したいこと

Nginxとrtmp-moduleを使ってUSBウェブカメラの映像をライブストリーミング再生しようとしたら詰まりました。

発生している問題・エラー

ブラウザからアクセスしても映像が流れません。


$ sudo ffmpeg -i example.mp4 -c:v libx264 -c:a aac -strict -2 -f hls /tmp/hls/live.m3u8

$ sudo ffmpeg -i /dev/video0 -c:v libx264 -c:a aac -strict -2 -f hls /tmp/hls/live.m3u8

/dev/video0のウェブカメラではなく、ダウンロードしたmp4ファイルを引数に指定すると問題なくブラウザに映像が表示されます。

VLCメディアでhttp://10.0.2.15/hls/live.m3u8に接続するとウェブカメラの映像が流れます。

/tmp/hlsディレクトリには問題なくhlsファイルが生成されています。

$ sudo ls /tmp/hls
live.m3u8  live0.ts  live1.ts  live2.ts

該当するソースコード

nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4096;

        application  hls {
            live on;
            hls on;
            hls_path /tmp/hls;
        }
    }
}

http {
    server {
        listen 80;

        location / {
            root /var/www/html;
        }

        location /hls {
    		add_header Access-Control-Allow-Origin *;

            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
    	    root /tmp;
            add_header Cache-Control no-cache;
        }
    }
}

<!doctype html>
<head>
    <title>Live Stream</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="videoPlayer" controls autoplay></video>
    <script>
        var video = document.getElementById('videoPlayer');
        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource('http://10.0.2.15/hls/live.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'http://10.0.2.15/hls/live.m3u8';
            video.addEventListener('loadedmetadata', function () {
                video.play();
            });
        }
    </script>
</body>

自分で試したこと

1. ブラウザの開発ツールでエラーを確認しました。

開発ツール.

Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

上記のエラーは.mp4ファイルでもでていたので関係はないと思われます。

2. add_header Access-Control-Allow-Origin *;を追加

開発ツール.

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://10.0.2.15/hls/live.m3u8 にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 404

これはnginx.confのhttpブロックのhlsブロック内に

add_header Access-Control-Allow-Origin *;

を追加することで解決されました。
これを追加しないと.mp4ファイルでもブラウザ上で映像が再生されませんでした。

3. ネットワークタブを見る

sudo ffmpeg -i example.mp4 の方は継続的にlive.m3u8とlive.tsファイルを受信していました。

sudo ffmpeg -i /dev/video0 の方はリロードするごとにlive*.tsファイルが一つ受信され、リロードしない限り次の.tsファイルが受信されることはありませんでした。

1Answer

@nak435 posted at 2024-05-20

当方、RasPi3で環境が違うので、同じではないと思いますが、それぞれ以下の内容で（音声付き）ライブストリーミングできています。ご参考まで。

$ uname -a
Linux raspberrypi3 5.10.103-v7+ #1529 SMP Tue Mar 8 12:21:37 GMT 2022 armv7l GNU/Linux

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 10 (buster)
Release:	10
Codename:	buster

起動コマンド

ffmpeg -hide_banner -f alsa -ac 1 -thread_queue_size 8192 -i hw:1 -f v4l2 -thread_queue_size 8192 -input_format yuyv422 -video_size 1280x720 -framerate 8 -i /dev/video0 -c:v h264_omx -b:v 768k -bufsize 768k -vsync 1 -g 10  -vf drawtext="fontfile=monofonto.ttf: fontsize=24: box=1: boxcolor=black@0.75: boxborderw=5: fontcolor=white: x=(w-text_w)/2: y=(10): text='%{localtime}'" -c:a aac -b:a 96k -ar 44100 -af "volume=30dB" -f flv rtmp://localhost/live/stream

index.html

<head>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
</head>
<body>
  <video-js
    id="my-video"
    controls
    liveui="true"
    preload="auto"
    width="1280"
    height="720"
    data-setup="{responsive: true}">
    <source
      src="/live/stream.m3u8"
      type="application/x-mpegURL" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video</a>
    </p>
  </video-js>
  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
</body>

スマホやPCのブラウザからraspberrypi3.localにアクセスすると、下記画面が出てきて、左上の再生ボタンをタップすると、ライブ再生を開始します。