Youtube LiveChat
www.youtube.com/live_chat にてコメントのみが流れるHTMLビュワーを得られる.
code:open-chat-window.js
window.open(document.querySelector('iframe.ytd-live-chat-frame').src)
DOM Structure
div#item-offset
div#items
yt-live-chat-text-message-renderer
div#content
yt-live-chat-author-chip
span#autor-name
span#chip-badges
yt-live-chat-author-badge-renderer type="verified"
確認済み
(モデレータなら更に下記のDOMが存在する)
span#chat-badges
yt-live-chat-author-renderer[type="moderator"]
コメントの位置を変えようとした時、
div#item-offsetにかかったoverflow: hidden
div#itemsにかかったtransform: translateY(0px)
が邪魔をする。
Python, Seleniumを使って取得することを考える。
方法1: Chromeのdev toolsにアクセスして、コメントのXHRを取得する。
現在stableのSelenium3系では、headerは見れるが、bodyが見れない...
JavaだとSelenium4.0.0-alpha-2から、より詳細なリクエストが見れるようになるっぽい。
Python版を待っている...
方法2: コメントの流れるDOMを監視して、更新がある度に取得する。
を使って、変更があれば取得する、ができそう。
JavaScriptサイドでは、Mutationを使って、DOMの変更を検知できる。
生放送などでYouTube Live上のコメントを配信用のアプリケーションに映したい
ElectronなどでWeb Viewを開く。transparentをElectron自体とWeb Viewで設定する。
あとは、配信用のアプリケーションでElectronのウィンドウを取り込む。
LiveChatだけを独立したウィンドウとして利用する
生放送画面でdocument.querySelector('#chatframe')とすれば、その動画のLiveChatウィンドウを取得できる。
iframeで別のドメインに埋め込む場合は、embed_domain=example.comのようにクエリを追加すること。
iframeで読み込んだやつをJSで弄るのはできない。 Permission denied to access property "document" on cross-origin object. youtube.com上のものなら違反しないので弄れる。