Amazon Connect アドベントカレンダー 2025、17日目の記事です！
クラスメソッドさんとギークフィードさん、ユニフォームネクスト、AWS Japanさんの有志が募ってチャレンジしている企画になります。
(アドベントカレンダーのカレンダー一覧はこちら↓)
はじめに
Amazon Connect で、「画面を切り替えた瞬間に着信に気づけない」 という課題に直面しました。
他ブラウザやツールを操作している間でも、着信や通話状態を常に把握できる UI が欲しい。
そこで今回、Picture-in-Picture（PiP） と Amazon Connect Streams API を組み合わせて
ブラウザ操作中でも通話状況を即座に確認できる仕組みを実装しました。
課題
従来の構成では、以下のような問題がありました。
- 別タブ・別操作中に気づけない
- Amazon Connect のタブがどこにいったのかわからなくなる
特に Amazon Connect Streams API を使った カスタム CCP では、
UI の作り込み自由度が高い分、
「通話中であることをどうユーザーに気づせるか」が課題になります。
解決策：Picture-in-Picture の活用
Picture-in-Picture とは
Picture-in-Picture（PiP）は、
ブラウザとは独立した常駐ウィンドウを表示できる Web API です。
主に動画用途で知られていますが
Chrome では documentPictureInPicture を使うことで
任意の DOM を PiP ウィンドウに描画できます。
これにより、
- タブを切り替えても
- 他のアプリを操作していても
常に通話操作を行うことが出来るようになります。
Amazon Connect Streams API の扱い
Streams API 自体は PiP 専用の設定は不要です。
通常どおり初期化した Streams API を使い
その UI を表示するコンポーネントを PiP に描画します。
connect.core.initCCP(container, options);
この container に相当する DOM を
PiP ウィンドウ側に用意するイメージです。
Picture-in-Picture の実装
PiP ウィンドウを開く
const pipWindow = await window.documentPictureInPicture?.requestWindow({
width: 320,
height: 200,
});
取得した pipWindow に対して、React Portal を使って UI を描画します。
const container = pipWindow.document.createElement('div');
pipWindow.document.body.appendChild(container);
この container に対して
既存の Amazon Connect Streams API の UI をそのままマウントします。
React を使っている場合は、Portal を使う形でも実装できます。
createPortal(<ConnectCCP />, pipWindow.document.body);
注意点
1. ブラウザ対応
-
documentPictureInPictureは Chromium 系のみ対応
使用しているブラウザが対応しているか確認が必要です。
2. CSS の引き継ぎ
Picture-in-Picture のウィンドウは 元のドキュメントとは別の document として生成されます。
そのため、元画面で読み込まれている CSS は 自動では引き継がれません。
↓ CSS のコピーはこちらの記事が参考になりました。
導入効果
- 画面遷移中でも着信に対して、即把握できる
- 通話時にAmazonConnectのブラウザを探す手間が無くなる
特に 他の Web アプリ × Amazon Connect という状況では
PiP は非常に相性が良いと感じました。
まとめ
Amazon Connect Streams API と Picture-in-Picture を組み合わせることで
「通話に気づける UI」 をブラウザ標準機能だけで実現できました。
カスタム CCP を作っている方や
着信 UX に課題を感じている方の参考になれば幸いです。
ご質問や改善案があれば、ぜひコメントで教えてください。
Discussion