【html2canvas】スクリーンショットが真っ白になってしまう

Question

前提・実現したいこと

ローカルに保存している動画ファイルをChromeブラウザで表示し、
該当画面のvideoタグ範囲のスクリーンショットを取得したいです。

pngファイルのダウンロードはできたのですが、
中身が真っ白の状態になってしまい困っています。(容量は67KB)

いくつか他のウェブサイトで試したところ、
スクリーンショットが取得できたサイトもあれば同様の真白状態になるサイトもありました。

該当のソースコード

◇main.js

    html2canvas(document.getElementsByTagName("video")[0]).then(canvas => {

      var imageData = canvas.toDataURL("image/png");
      console.log(imageData);
      var dl = document.createElement("a");
      dl.setAttribute("download","test.png");
      dl.setAttribute("href",imageData);
      dl.click();
      
});

◇manifest.js

{
 "manifest_version":2,
 "name":"fbVideoID",
 "version":"1.0",

 "browser_action":{
 "default_popup":"popup.html"
 },

 "icons":{
  "16":"icon.png"
},
 
"permissions":[
  "tabs",
  "notifications",
  "http://*/",
  "https://*/",
  "file:///*/*",
  "fileBrowserHandler"
]
}

補足情報

上記で取得できたcanvas.toDataURLは下記でした。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACgAAAAWgCAYAAACSABrfAAAgAElEQVR4XuzawQkAMAwDsXb/oV3oFgfKBEbO03fbjiNAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRSAtcAMNWXsAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4AsYAHoEAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQFDAADJYmMgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQMAD0AwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIChgABgsTWQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGAA6AcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBQwAAwWJrIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDAANAPECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBoIABYLA0kQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAgAGgHyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAkEBA8BgaSITIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEDQD9AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSCAgaAwdJEJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBoB+gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIBAUMAIOliUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAwA/QABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEAgKGAAGSxOZAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgYAPoBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQFDAADJYmMgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQMAD0AwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIChgABgsTWQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGAA6AcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBQwAAwWJrIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDAANAPECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBoIABYLA0kQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAgAGgHyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAkEBA8BgaSITIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEDQD9AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSCAgaAwdJEJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBoB+gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIBAUMAIOliUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAwA/QABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEAgKGAAGSxOZAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgYAPoBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQFDAADJYmMgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQMAD0AwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIChgABgsTWQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGAA6AcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBQwAAwWJrIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDAANAPECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBoIABYLA0kQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAgAGgHyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAkEBA8BgaSITIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEDQD9AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSCAgaAwdJEJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBoB+gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIBAUMAIOliUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAwA/QABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEAgKGAAGSxOZAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgYAPoBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQFDAADJYmMgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQMAD0AwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIChgABgsTWQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGAA6AcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBQwAAwWJrIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDAANAPECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBoIABYLA0kQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAgAGgHyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAkEBA8BgaSITIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEDQD9AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSCAgaAwdJEJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBoB+gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIBAUMAIOliUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAwA/QABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEAgKGAAGSxOZAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgYAPoBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQFDAADJYmMgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQMAD0AwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIChgABgsTWQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGAA6AcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBQwAAwWJrIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDAANAPECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBoIABYLA0kQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAgAGgHyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAkEBA8BgaSITIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEDQD9AgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSCAgaAwdJEJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIE

Comments

[oikashinoa]

可能ならdataurlの結果ではなく画像としてアップしたほうが良いですし回答付きやすいです。あと画像元のurlも質問本文に追記してください。

画像が取れているサイトは動画の部分はサムネイル表示で、取れないサイトはサムネイル無しとか…動きに違いがありませんか？

[n.nishiyama]

ご確認ありがとうございます。返信が遅れて申し訳ありません。

再度確認したところ、スクリーンショットが取れていたのは静止画の画面で、
そもそも動画はうまく取得できていませんでした。
追加で調べてみたところChromeだとfile:///にはtoDataURLが使用できないという制約があったので、firefoxで実行したところ上手くいきました。

＞可能ならdataurlの結果ではなく画像としてアップしたほうが良いですし回答付きやすいです。あと画像元のurlも質問本文に追記してください。

アドバイスありがとうございます。次回以降の参考にさせていただきます(__)

Answer 1

スマホからなので簡単に。
chromeが未解決なので、以下を調べてみてください。

screen capture api(chrome)
desktopCapture(extention向け)

使用感などレポートしていただけると嬉しいです。

Answer 2

Chromeだとfile:///にはtoDataURLが使用できないという制約があったので、
firefoxで実行したところ上手くいきました。

  var video = document.querySelector('video'); 
  if (video) { var canvas = document.createElement('canvas');
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  var image = new Image();
  image.src = canvas.toDataURL('image/jpg');
  var a = document.createElement('a');
  a.download = `${filename}.jpg`;
  a.target = '_blank';
  a.href = image.src; a.click();
   } else { 
       alert('There is no video tag.'); } })(); void 0;

Comments

[miyabi_pudding]

ローカルに対してはセキュリティ上できないということなのでしょう。おそらく。
ローカルサーバーを立てれば、ローカルでもhttpアクセスとなるので、Chromeでもできると思いますよ。