ZEN Study (旧N予備校) の授業をピクチャー イン ピクチャーで視聴できるブラウザー拡張機能です。
Chrome ウェブストアで限定公開しています。
制作背景
ZEN Study のライブ/アーカイブ授業を他の作業をしながら視聴したいと思っていたのですが、通常の Picture-in-Picture 機能では動画のみが表示されるため、ZEN Study の特徴である流れるコメントや運営コメントを見ることができませんでした。
そこで、Canvas API を使用して動画とコメントをリアルタイムで合成し、Picture-in-Picture API で表示する拡張機能を作成しました。
主な機能
- 授業動画とコメントを 1 つのキャンバスに合成して PiP 表示
- 流れるコメントと運営コメントに対応
- Vanilla JS でシンプルに実装
関連記事
N予備校プログラミングコース Advent Calendar 2023 に投稿した記事：