本文
はじめに
Chrome 116 で導入された Document Picture-in-Picture API をご存知でしょうか？従来の PiP API は動画ストリームをフローティングウィンドウに表示するだけでしたが、Document PiP API ではウィンドウ内に完全な HTML ドキュメントをレンダリングできます。
この API を活用して、PiP ウィンドウ内で字幕、再生コントロール、弾幕、ジェスチャー操作を実現する Chrome 拡張機能「DualPiP」を開発しました。最近リリースした v1.7 では、ASR（自動音声認識）リアルタイム字幕と 30+ AI 翻訳プロバイダーの BYOK 対応を追加しました。
Document PiP API の基本
const pipWindow = await documentPictureInPicture.requestWindow({
width: 640,
height: 360,
});
const container = pipWindow.document.createElement('div');
pipWindow.document.body.appendChild(container);
従来の PiP API（video.requestPictureInPicture()）とは異なり、Document PiP API は新しいブラウザウィンドウのようなものを作成し、任意の HTML/CSS/JS をレンダリングできます。
制限事項:
- Chromium 系ブラウザのみ対応（Chrome 116+、Edge、Brave など）
- Firefox・Safari は非対応
- ウィンドウサイズに制限あり
ASR リアルタイム字幕の実装
v1.7 の最大の新機能は、任意の Web 動画に対してリアルタイムで字幕を生成する ASR 機能です。
Deepgram Cloud ASR
WebSocket 経由でブラウザから直接 Deepgram API に音声ストリームを送信し、リアルタイムで文字起こし結果を受信します。レイテンシは 300ms 未満。22+ 言語の自動検出に対応。
ローカル Whisper
OpenAI Whisper 互換の API サーバー（Whisper.cpp、faster-whisper など）に対応。音声データをクラウドに送信せず、完全にローカルで処理できます。
ASR 字幕の活用
- 生成された ASR 字幕は、AI 翻訳と組み合わせてリアルタイムバイリンガル字幕を表示可能
- 学習モード（AB ループ、自動一時停止）にも完全対応
- スマートマージ機能で断片的な認識結果を完全な文に統合
AI 翻訳アーキテクチャ（BYOK）
v1.7 では AI 翻訳のアーキテクチャを全面的に刷新しました。
プロバイダー/モデル分離設計: プロバイダーとモデルを独立管理。一つの API キーで複数モデルを切り替え可能。
30+ プリセットプロバイダー: OpenAI、Anthropic（Claude）、Google（Gemini）、DeepSeek、xAI（Grok）、Mistral、Groq、Cohere、Together AI、OpenRouter など。ワンクリックで追加、API キーを入力するだけ。
BYOK（Bring Your Own Key）: API リクエストはユーザーのブラウザから直接 AI プロバイダーに送信。中間サーバーなし、マークアップなし。
コンテキスト注入: 直近の対話履歴と TMDB 動画メタデータ（タイトル、ジャンル、年、あらすじ）をプロンプトに注入。キャラクター名や文脈の一貫性が大幅に向上。
字幕検索と外部字幕
- オンライン字幕検索: OpenSubtitles、SubDL から拡張機能内で直接検索・ダウンロード
- ローカル字幕インポート: SRT/VTT/ASS/SSA/SUB 形式に対応
- 自動マッチング: 動画の IMDb ID、TMDb ID、タイトルを自動認識して検索
まとめ
Document PiP API は、ブラウザ動画の視聴体験を大きく変える可能性を持つ API です。DualPiP では、この API を活用して PiP ウィンドウ内に完全なプレーヤー UI を実現し、v1.7 では ASR リアルタイム字幕と BYOK AI 翻訳を追加しました。
Chrome Web Store: https://chromewebstore.google.com/detail/dualpip/ddkmobcljbfggkmibabekgpbighaogpn
開示: 筆者は DualPiP の開発者です。