ウェブサイトのスクリーンショットを撮る【Windows 版】

Python を使って、任意のウェブサイトのスクリーンショットを撮るスクリプトについてまとめておきます。
事前に Python と selenium 等をインストールしておく必要があります。

以下の環境で動作確認をしています。
環境：
・　Windows 11 パソコン、Microsoft Edge　（インターネットに接続済み）
・　Python 3.X、selenium のインストール済み
・　Microsoft Edge 用の selenium のドライバをパソコンに設定済み

背景　HTML のスクリーンショットを撮る！

先日、ネット上のライブカメラの動画を自作の HTML に表示させる方法についてまとめました。
このようなライブカメラの画像や、インターネット上のサイトの画面、自作の HTML について、簡単にスクリーンショットを撮ることができると、とても便利です。

たとえば、一定時間おきにライブカメラ画像部分をスクリーンショットで保存ようにすると、定点カメラを構成することができます。また、時系列の画像で差分を検出すれば、監視カメラなどでの異常検出ができます。
そこで、これらの応用の前段として、任意の HTML のスクリーンショットを撮る Python のスクリプトについてまとめておくことにします。

以下のサンプルスクリプトでは、スクリーンショットをする HTML は、ライブカメラを表示した自作の HTML とします。この画面を Python の selenium を使って取得し、画像を保存します。URL を差し替えると、任意のサイトのスクリーンショットを撮ることができると思います。
このような構成にすると、カメラのハードウェア仕様や内部仕様とは切り分けて、ライブカメラの画像の取得ができることになります。
取得した画像を使って、物体検出などのプログラムを実行することなどが可能となります。

手順

①　パソコン内にスクリーンショットを撮るためのフォルダ（例：”screen_shot1″）を作ります。
例： C:\user\screen_shot1\
②　スクリーンショットを撮るサイトを決めます。ここでは、live_camera01.html という HTML とし、①のフォルダに保存することにします。①のフォルダ内に、テキストファイルで live_camera01.html というファイルを作成し、末尾の HTML のスクリプトを貼りつけて保存してください。
例： C:\user\screen_shot1\live_camera01.html
③　①のフォルダ内に screen_shot1.py という名前でテキストを作成し、末尾の Python のスクリプトをコピー＆ペーストして保存してください。
例： C:\user\screen_shot1\screen_shot1.py
④　selenium を動かすための Microsoft Edge のドライバのありかを確認し、スクリプトの path0 = “…” の部分を修正してください。
⑤　③と同じフォルダ内にさらに、”image01″ という名前でフォルダを作ってください。このフォルダに画像を保存します。
⑥　コマンドプロンプト（または、Anaconda Prompt）を起動し、③の Python のスクリプトを実行してください。
例：　”python c:\user\screen_shot1\screen_shot1.py”

→　HTML の画像が “image01” フォルダに保存されたら成功です！

※　Python のスクリプトで、url1（HTML の URL を指定している部分）を修正すると、任意の HTML の画面を保存できると思います。
※　Python のスクリプトの後半でコメントアウトしている部分は、例えば、ライブカメラの画像を何ショットか撮りたい場合のスクリプトの例です。ご自由にカスタマイズしてください。
※　また、同様に HTML を追加していけば、複数のライブカメラ等の画像を順次保存する、なども可能です。ライブカメラの事例は、関連リンクの「ネット上のライブカメラの動画を自作のHTMLに埋め込む」等を参照してください。
※　Python を実行すると、ブラウザが起動されて使用中のパソコンの画面を埋めてしまうため、ブラウザを非表示にしたくなることがあります。
Windows では selenium の option を別途インストールして、headless モードを指定することでブラウザを非表示にできます。とはいえ、インストールが煩雑です。そこで、Raspberry Pi に今回のスクリプトを移植して headless モードで動かしてみることにします。
関心のある方は、関連リンク（ウェブサイトのスクリーンショットを自動化する【Raspberry Pi 版】）も参照してみてください。

まとめ

Python を使って、任意の HTML のスクリーンショットを撮るスクリプトについてまとめました。

このスクリプトを Raspberry Pi （Linux）などに移植することで、定点カメラや、ネット上のライブカメラを使ったオブジェクト検出なども自由に構成できることになります。

サンプルスクリプト

スクリーンショットの対象とする HTML の例： 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>

スクリーンショットを撮る Python のスクリプト screen_shot1.py

import os 
import datetime as dt1 
import time as tm1 
from selenium import webdriver 

def screen_shot1(driver1, path1): 
  now1  = dt1.datetime.now() 
  file1 = "{0:%y%m%d_%H%M%S}".format( now1 ) + ".png" 
  print( file1 ) 
  file2 = path1 + file1 
  driver1.get_screenshot_as_file( file2 ) 

path0 = "C:/user/edgedriver_win64/" + "msedgedriver.exe" 
path1 = os.path.dirname(__file__) + "/image01/"  

url1 = "file:///C:/user/screen_shot1/live_camera01.html"

driver1 = webdriver.Edge( executable_path=path0 ) 
driver1.get( url1 ) 

tm1.sleep( 5 ) 
screen_shot1(driver1, path1) 

# driver1.refresh() 
# tm1.sleep( 5 ) 
# screen_shot1(driver1, path1) 

driver1.quit()