ネット上のライブカメラの動画を自作のHTMLに埋め込む

Machine Learning

YouTube を例に、ネットのライブカメラなどの動画を自作の HTML に埋め込む手順をまとめておきます。
スタンドアロンのパソコンで動作します。

以下の２つの環境で、それぞれ動作確認をしています。
環境１： Windows パソコン、Microsoft Edge ブラウザ
環境２： Raspberry Pi、Chromium ブラウザ

背景　～　ネット上のライブカメラの画像を自由に扱いたい！

YouTube のサイトを見ていると、ライブカメラの動画が公開されていることがあります。また、リンクフリーでライブカメラの動画を公開しているところがあります。
こうしたライブカメラの動画を自作の HTML に表示させて、自由に扱いたいことがあります。
また、YouTube など動画の公開元のサイトでライブカメラの動画を見ようとすると、再生するごとに毎回広告が出てきて、とても煩雑です。

そこで、ライブ画像を自作の HTML に表示するスクリプトをまとめておくことにします。
自作の HTML 上で読み込むようにすると、広告表示をなくすことができます（現在のところ）。
以下の手順は、YouTube の動画の例としましたが、ネット上で公開されているライブカメラ（Panasonic、Canon）についてもアクセス時の静止画程度であれば、画像を表示することができました。
なお、YouTube のライブカメラに関しては、発信元が再設定などをするとリンク先が変わるようです。
したがって、数週間といった長期間で、ずっと中継しているようなライブカメラを参照するようにするとよさそうです。
なお、不要な／頻繁なアクセスは避け、相手方のサーバーに負荷をかけないようご注意ください。また、ライブカメラの画像の再配布等をする場合は著作権等に留意し、配信されている方のライセンスポリシーを確認するようにしてください。

手順

HTML ファイルの作成＆動作確認

①　Windows などのパソコン上で、HTML ファイルを入れるためのフォルダを作ります。
例： C:\user\live_camera1\
②　①のフォルダ内に、”live_camera1.html” などの名前でテキストファイルを作成し、末尾に示したスクリプトを貼りつけて保存します。
簡単な HTML ファイルになっており、サンプルとして動画のリンクを貼っています。
（動画のリンクは、以下の④～⑤で差し替えます。）
例： C:\user\live_camera1\live_camera1.html
③　②の HTML をダブルクリックすると、ライブ動画が再生されます。

動画のリンク（iframe）の挿入

YouTube の動画のリンクを貼りつける場合、例えば、以下の手順とします。
④　YouTube のサイト上で、”ライブカメラ” などとして検索し、任意の動画をクリックして選択します。
※　ライブカメラでなくても HTML に埋め込むことができます。このページの下の「外部リンク」で、ライブカメラの事例を貼りました。
⑤　YouTube で動画を表示した状態で、「共有」→「＜＞埋め込む」→「コピー」をクリックし、②のテキストの <body>…</body>の中にペーストします。
例えば、上記の②のテキストで、<iframe>…</iframe> となっている部分（★）のつぎの行に改行を入れ、⑤の内容をペーストして保存します。
⑥　（★）の記載を参照し、動画の表示サイズを調整します。画像サイズを変える場合は、横：縦の比率を維持するように修正します。
⑦　”src = … ” となっている部分の末尾に 「&mute=1&autoplay=1」を追加します。この記載の追加により、HTML を開いたときに動画が自動で再生されるようになります。うまく動いたら、不要になった（★）の部分は削除してください。
例： “src = … ” → ”src = …&mute=1&autoplay=1″

※　ネット上で公開されているライブカメラの動画を表示させる場合も、上記と同様に <iframe>…</iframe> の部分を追加することで表示させることができます。（詳細は省略します。）
※　上記のように、Windows パソコンなどで作成した HTML ファイルを Raspberry Pi (Linux)にコピーすると、Raspberry Pi 上でもライブ画像を表示できます（処理が重くなりますが。。）。
※　また、HTML は、後日、Python を使ってHTML の画面のキャプチャをしようと思っています。そこで、ブラウザの HTML の画面の左上ぴったりに動画が表示されるよう、<style>…</style>部分で表示を調整しています。不要であれば、削除してください。

まとめ

ネット上にあるライブカメラの動画を自作の HTML で表示するスクリプトについてまとめました。
この HTML 上のライブ画像について、Python でスクリーンショットを撮って保存するスクリプトを関連リンクでまとめています。関心のある方は参照してみてください。

最近、災害や事故などが起きています。そうしたエリアでも、ライブカメラを探すとライブ画像が無料公開されているようです。災害、事故、盗難などの見回り、異常検出のプログラム程度であれば、Python などで作成して公開＆無料配布していくこともできるかなと思っています。

関連リンク
・　ウェブサイトのスクリーンショットを撮る 【Windows 版】
・　Raspberry Pi でブラウザを自動操作してみる 【Python】
・　静止画でオブジェクト検出 【Raspberry Pi & Tensorflow Lite】

外部リンク
　YouTube のライブカメラの例
・　【ライブカメラ】羽田空港 “T2” HANEDA,Tokyo International Airport（日テレNEWS LIVE）
・　【LIVE】恵比寿駅前のライブカメラ　Ebisu Live Camera 
・　【ライブ】中央自動車道・元八王子バス停付近の道路状況をLIVE配信中！【LIVE: CHUO EXPWY】

 

サンプルコード　live_camera01.html

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <style> 
    .class1 { 
      background-color:#f0f0ff; 
      margin:0; 
      padding:0; 
      overflow-y:scroll; 
      scrollbar-width:none; 
    }
    .class1::-webkit-scrollbar { 
      display:none; 
    } 
  </style>
</head> 
<body class="class1" > 
<iframe width="640" height="360" src="https://www.youtube.com/embed/LR7i5_pkJBg?si=zoHeSy9XMPyAllAr&mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br>
</body>
</html>
タイトルとURLをコピーしました