javascript、ブックマークレットでエラー

Question

Videoタグの動画のスナップショットを保存するブックマークレットです。
以下になります。

javascript: (function(){ var video = document.getElementsByTagName('video'); if (video) { var canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; var context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height);var url = canvas.toDataURL(); var image = new Image(); image.src = url; var a = document.createElement('a'); a.download = ${location.host}_${new Date().toISOString()}.png; a.target = '_blank'; a.href = image.src; a.click(); } else { alert('There is no video tag.'); } })()

コンソールから実行してみたところ、次のようなエラーが表示されました。

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
at <anonymous>:1:253
at <anonymous>:1:577

どのように修正すれば良いでしょうか？

追記

Lhankor_Mhyさん、ご回答ありがとうございます。
セキュリティの警告が出るため、クロスドメインだと思います。
また、「Execution Context Selector」の特定のメニューを選択するコマンドがあればいいのですが、それがないため、コンソール画面内の同メニュー「top」とある部分、毎回選択し直さないといけません。
こちらで該当フレームを選択してから実行すると成功することが分かりましたので、動画部分を右クリックしてどうの・・・というのは必要ないことが分かりました。
また、ChromeのDataURIに2MBの制限があることが分かったため、スナップショットのサイズがこれを超過した場合、失敗します。
そのため、Blobオブジェクトへの変換が必要になりますが、これに関する記事は既にありました。

暫定的な解決策

コンソール画面を開く
Execution Context Selectorの該当メニューを選択
コンソール画面にコードを貼り付けて実行（※Blob必須の場合あり）

Execution Context Selectorに関するコマンドがあれば完全自動化可能？
ブックマークレットの時のみ失敗するというのもこれが原因。
ブックマークレット実行時の場所は、同メニューで言うところの「top」に該当しており、
つまりは「top」で得られる情報以外の情報は取得できない仕組み？

Comments

[Lhankor_Mhy]

常にエラーになるのですか？　それとも上手くいくページもあるのですか？　そうであればエラーの出るページをご提示いただけますか？

問題が発生する条件を具体的に書きましょう
https://teratail.com/help/question-tips#questionTips3-5-3

[kankan0]

Lhankor_Mhyさん、ありがとうございます。

今現在、Youtubeで動作確認したところうまくいきました。
ご回答いただいたshinji709さんの [0] を付加したコードです。
しかしGoogleフォトで試すとコンソール上からの実行時のみ成功し、ブックマークレットからの実行で失敗します。
これは、Googleフォトをご利用されている方であれば再現可能な事象かと思われます。

[Lhankor_Mhy]

Googleフォトで試しましたが、当方の環境ではコンソールからでも上手くいかないですね。当方、firefoxですが、そちらはChromeですか？

Googleフォトのコードを見ると、動画はフレームで隔離されていたので、もしかしたらiframeの影響かもしれませんね。試しにフレームを別タブで開いてみたら、一応、なにかしらのファイルが保存されました。

[kankan0]

Lhankor_Mhyさん、お試しいただきありがとうございます。
こちらはChromeを使用中です。
Googleフォトで成功させるために自分なりに色々試したんですが、構成が少し特殊なのか何も操作せずにいきなりJavascriptを走らせると失敗するようです。
まず、動画部分を右クリックすると次のようなメニューが表示されるはずです。

ループ再生
デバッグ情報をコピー
再生に関する問題をトラブルシューティングする
詳細統計情報

この状態でもう一度右クリックして、「検証」を選択してください。

するとElements内video タグが選択されていると思います。
この状態で、コンソール内から実行してみて下さい。

私の場合、フレームを新しいタブで開いてもYoutubeの再生ボタンが表示されただけでした。

[Lhankor_Mhy]

あー、やはりiframeですね。

[Lhankor_Mhy]

すでにご解決されているようですので、蛇足ですが。

私は、ブックマークレットでクロスドメインアクセスが必要になる場合に、こちらを使っています。
https://qiita.com/shika-e/items/808ccdd047133315b95c

Answer 1

HTMLVideoElementのつもりがHTMLCollectionなんでしょう。

var video = document.getElementsByTagName('video');

を

var video = document.getElementsByTagName('video')[0];

にしてみては？

Comments

[kankan0]

ありがとうございます。
[0] によってエラーはなくなりました。
しかし、コンソール上から実行すると正常に動作するものの、ブックマークレットとして使用を試みると「There is no video tag.」が表示され動作しません。
なぜコンソール上からの実行のみ成功するのかわからない状態です。

失敗する具体的なページについては質問に対するコメント欄に書き込ませてもらいます。

Answer 2

videoタグがiframeの中にあるサイトで失敗しているようです。

DOM の HTMLIFrameElement オブジェクトでは、スクリプトはフレーム化されたリソースの window オブジェクトに contentWindow プロパティを使ってアクセスすることができます。 contentDocument プロパティは iframe の内側の document 要素を参照します (contentWindow.document と等価です)。

スクリプト操作 | <iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN

　

topの↓矢印を展開すると、iframeに切り替えが可能です。この場合、iframe内でJSを実行できます。

Chrome デベロッパーツールの使い方まとめ - Qiita

　

Firefox 34 より開発ツールで、ドキュメント内にある特定の iframe を対象にすることができます。

iframe での作業 - 開発ツール | MDN

---

修正方法ですが、同一ドメインであれば、MDNにあるとおり、iframeを舐めてcontentDocumentから参照するようにすればいいかと思います。

If the iframe and the iframe's parent document are Same Origin, returns a Document (that is, the active document in the inline frame's nested browsing context), else returns null.

contentDocument - Web APIs | MDN

なお、クロスドメインのiframeについては、セキュリティの制限がありますから修正方法はないと思った方がいいかと思います。