📹

Raspberry Pi 5 と USBカメラ と ffmpeg で作るライブストリーミング

に公開10

Discussion

nassynassy

こんにちは。知識もないのにラズパイ5を購入し、日々苦しんでおります。そんな中、たぬきネット?さんの記事が目に留まり、ただいまffmegによるライブストリーミングに挑戦中です。VLCによる遠隔操作、キーボード設定、IPアドレスの固定まではなんとかできました。
 一つ質問があります。こんな私でも上記の分かりやすい説明のお陰でHLS用ファイルの出力まではできました。ストリーミングされたデータも保存することができ確認もできたところです。しかし、ライブストリーミング用HTMLファイル作成後、いざブラウザでアドレス(http://×××.×××.××.××/live.html)を開くとうまく表示されません。接続を拒否される画面になります。※ちなみに、http://×××.×××.××.××と入力すると”Hi”と表示される。
 こんな状況ですが何かアドバイスを頂けるとありがたいです。

tanukinettanukinet

コメントいただきありがとうございます。何点か確認させてください。

  1. stream フォルダの中身が正常に更新され続けているか
ll /var/www/html/stream
  1. 「接続を拒否される画面になります」とは具体的にどんなメッセージか。

  2. http://×××.×××.××.××/live.html の確認

例えば次のようにファイルを入れ替えた後

cp /var/www/html/live.html /var/www/html/live.html.bk
sudo sh -c 'echo "hogehoge" > /var/www/html/live.html'

http://×××.×××.××.××/live.html にアクセスした場合に "hogehoge" が表示されるかどうか

※ちなみに、私はGoogle Chrome ブラウザを使っています。

nassynassy

早々のご連絡ありがとうございます。上記の1.2.3について早速試して報告させていただきます。本日は環境が整っていないため、明日の午前中に投稿させていただきます。もしお時間がありましたらお手数をお掛けしますがアドバイスをお願いします。※上記1.2.3について画像も一緒に投稿します。

nassynassy

おはようございます。アドバイス頂いた1.2.3について検証してみましたので報告させていただきます。
1. stream フォルダの中身が正常に更新され続けているか?
       ➡は画像を添付します。更新され続けている気がします。
   https://storage.googleapis.com/zenn-user-upload/dfc1b95ebeca-20240830.png

  1. 「接続を拒否される画面になります」とは具体的にどんなメッセージか。
      https://storage.googleapis.com/zenn-user-upload/fc75c63ed9bc-20240830.png

3. http://×××.×××.××.××/live.html の確認
    ➡「cp /var/www/html/live.html /var/www/html/live.html.bk」の結果
 https://storage.googleapis.com/zenn-user-upload/7d24f4647a33-20240830.png

3.について、そもそもファイルが存在しないといわれました。そこで、私も気になったので指定の場所?を
 スクリーンショットします。参考になればいいのですが...。
    https://storage.googleapis.com/zenn-user-upload/752b13caba82-20240830.png

以上です。宜しくお願いします。
※ラズパイのファイアーウォールは「無効」にしてあります。

tanukinettanukinet

原因

/var/www/html/live.html が存在しないのが原因となります。

http://XXX.XXX.XXX.XXX//var/www/html の階層はリンクしています。デフォルトでは http://XXX.XXX.XXX.XXX/ へのアクセスは、http://XXX.XXX.XXX.XXX/index.html 、つまり、/var/www/html/index.html のファイルを読み取っている事になります。http://XXX.XXX.XXX.XXX/live.html は、/var/www/html/live.html を読み取る事になりますが、3.のスクリーンショットを見る限り、そのようなファイルが存在しません。2. のエラー画面も Not Found となり、これはファイルが存在しない事を意味します。

対応

/var/www/html/live.html を次の中身で作成します。

/var/www/html/live.html
<!DOCTYPE html>
<html>
  <head>
      <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script> -->
    <!-- Or if you want the latest version from the main branch -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="video" controls width="640" height="480" preload="none"></video>
    <script>
      var video = document.getElementById('video');
      var videoSrc = './stream/playlist.m3u8';

      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
      }
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
      }
    </script>
  </body>
</html>
nassynassy

返信ありがとうございます。また、丁寧に答えていただき感謝します。すごく理解できました。
初歩的な質問なのですが、
” /var/www/html/live.html を次の中身で作成します。 ”
について、まず、
1.sudo vi /var/www/html/live.html
https://storage.googleapis.com/zenn-user-upload/ebd9beab215e-20240830.png

を実行し、
2.上記のプログラムを書き込み
でよろしいでしょうか?方法が間違っていたらすいません。

※1を実行すると
https://storage.googleapis.com/zenn-user-upload/4de0f3ff63fa-20240830.png
とでます。

nassynassy

連絡ありがとうございます。度々すいません。
https://storage.googleapis.com/zenn-user-upload/8b3e493b71d0-20240830.png
理解できました。swapファイルを 「:recover」で修復?削除?しようとしたものの・・・
詰まりました。
https://storage.googleapis.com/zenn-user-upload/c4480a1487a3-20240830.png
すいません。アドバイス頂けますか?削除した方が早いと思うのですが仕方がわかりません。
 教えて頂いたサイトは、警告ページの下部に4つの選択が出ますが、私のターミナルには存在しません。何か違うのでしょうか?

tanukinettanukinet

ls -la などで確認してみてください。エディタの隠しファイルがあるんだと思います。おそらくそれらを削除してしまえば解決するかと。

これらのご質問は本記事とはあまり関連が無く、Linuxやエディタの基本的な操作に関連しています。厳しい事を言うようですが、それらの対処方法はインターネットにたくさんの記事があると思われますので、まずは検索してみてはいかがでしょうか。エラーメッセージでググるなど。

Webサーバの仕組みやLinux OS の基本的操作についてあまり理解されていない場合は、まずは先にそれらを勉強するのも良いと思います。これらの基礎的な事は他に応用が効くので、勉強して損は無いはずです。

nassynassy

返信ありがとうございます。仰る通りだと思います。1から勉強し力をつけたいと思います。色々とアドバイスをいただきありがとうございました。