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ファイルが受信されることはありませんでした。
0
