JavaScriptで任意のHTML要素をPicture-in-Pictureする

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

[gabill]

PiPってjavascriptから呼び出せたのか。クリックをトリガーにする必要があるけど広告に使うとこ出てきそう。

[shields-pikes]

こんなことできるのか。FirefoxとiOSのSafariが対象外なので、用途が限られそうだけど。Androidユーザー向けのスパムに使うところは出て来るだろうなー。

[kasuke18]

“PiPにするにはvideo要素の requestPictureInPicture というメソッドを呼び出すだけなのですが、呼び出すにはユーザジェスチャー（クリックイベント等）必須なので注意してください。”

[solidstatesociety]

これ広告に使われてヤベえんじゃね？

[uske_S]

あったまよ……。静的コンテンツをPiPで表示させるトリック。

[Amigomr]

悪用されるとウザそうと思ったら、Firefoxがしっかり制限かけていて安心したｗ

[tettekete37564]

そんなこと出来るのか

[yamaguchi11057]

メモ

[wdoomer]

メモ

[efcl]

`canvas.captureStream`を使ってVideo要素に描画してPicture in Pictureする話。 https://html2canvas.hertzen.com/ https://github.com/nikersify/pico などと組み合わせるともう少し手軽

[hib3]

iframeみたいなマルウェアのやつに使われそう

[zunchan3]

これすげぇな

[saikyo_tongaricorn]

pip install pip

[securecat]

なるほど面白い

[mysql8]

pip install

[mizdra]

video しか流せないはずなのにどうやってやるのかな〜と思ったら想像以上に富豪的な手法でのゴリ押しで面白かった。すごい。

[hogashi]

なるほど

[otchy210]

動画にするまで必要なくても、任意の HTML 要素を画像に描画できるのいろいろ使い道ありそう。

[everybodyelse]

大体のことはcanvasに転写すればできる

[fcicq]

canvas

[rryu]

PiPは動画しかできないはずではと思ったらDOMをSVGのforeignObject経由で画像化してcaptureStreamしているキャンバスに描画するという力技だった。

[spark7]

よくまあこんなの思いつくな...

[casm]

すっげえ！「svgには foreignObject という仕組みがあり、その中の描画をブラウザに任せる、ということができます。」知らなかった。そしてDataURLにしてcanvasに転写してさらにストリームにするって変態過ぎる。

[mohno]

「PiPが動画にしか対応していない部分は変わりません。なのでHTMLを動画にしてやれば任意の要素をPiPできる」←おっ、おぅ……。そこまでしてやりたいものなのか、PiP。「ユーザのインタラクション等は再現できません」

[kazuhi_ra]

かわいい

[ponpon_qonqon]

夢がひろがりまくりんぐ！ｗｗ　これでデスクトップマスコットとか作ったらええんやで

[kkeisuke]

“PiP”

[tofu-kun]

発想が面白いな

[ultimatebreak]

ハックやなー

[hiroomi]

"PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） macOS/iPad Safari 13.1 iPhone Safari 14 "これのテストコードこしらえたら楽しそう。

[boxshiitake]

動画以外もできるの知らなかった