Windows WSL で Ubuntu 20 に ffmpeg をインストールして H264 RTSP ストリームを HLS 変換して Web 表示するメモ

Posted on 2025-03-15

Windows WSL で Ubuntu 20 に ffmpeg をインストールして H264 RTSP ストリームを HLS 変換して Web 表示するメモです。

ffmpeg のインストール

Ubuntu 20.04.6 でした。

こちらを参考にインストールしました。

sudo apt-get update

でアップデートしつつ、

sudo apt-get -y install ffmpeg

こちらでインストール。
Download FFmpeg ここにも情報は書かれていました。

これで ffmpeg とコマンド打つと、使い方の情報が出てきます。

ローカルの H264 RTSP ストリームを HLS 変換

ローカルに H264 RTSP ストリームを出す IP カメラがあるので HLS 変換します。

ffmpeg -rtsp_transport tcp -i rtsp://:@:/stream_path \
  -c:v copy \
  -c:a aac \
  -hls_time 2 -hls_list_size 5 -hls_flags delete_segments \
  /mnt/c/workspace/ffmpeg-hls-test/public/hls/playlist.m3u8

<username>
- IP カメラの認証のユーザー名
<password>
- IP カメラの認証のパスワード
<ipAddress>
- IP カメラの認証の IP アドレス
<port>
- IP カメラの認証のポート
/stream_path
- IP カメラの RTSP のパス

を IP カメラの情報に合わせてつなぎます。これを実行すると、

こんな感じでログが出て、

対象の場所にデータを貯めていきます。

HLS を Web 表示する

この格納している public/hls フォルダは Node.js Express で表示できるフォルダです。

public/index.html を以下のように記述します。

<html>
<head>
  <title>Index</title>
</head>
<body>
<h1>Index</h1>
<video id="video" width="640" height="480" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('/hls/playlist.m3u8');
    hls.attachMedia(video);
  }
</script>
</body>
</html>

こちらで表示してみると、

以下のように RTSP から HLS に変換した video 要素で再生できます。（めちゃくちゃ家の中の映像なのでモザイクにしてます。）