Call Control Bar
ビデオ通話画面の操作バー。マイク / カメラ / 画面共有 / 通話終了 / 録画 / ユーザー追加 / 設定 の 7 つの円形ボタンを横並びで配置する。マイク・カメラ・画面共有・録画はトグル可能で、OFF 状態は赤系のトーンで明示する。
プレビュー
各ボタンをクリックすると、トグル可能なボタン(マイク / カメラ / 画面共有 / 録画)は ON / OFF が切り替わります。OFF 状態は赤 16% の透過で示します。
実装例
"use client";
import { CallControlBar } from "@/components/CallControlBar";
export function VideoCallControls() {
return (
<CallControlBar
defaultMicOn
defaultCameraOn
defaultScreenOn
onHangUp={() => {
// 通話を終了する処理
}}
onAddPerson={() => {
// ユーザー追加ダイアログを開く
}}
onSettings={() => {
// 設定パネルを開く
}}
/>
);
}使用イメージ
16:9 のスライド全体にタイル(929:448 比率)が並び、タイマーは左上、PIP(354:231 比率)は右上、コントロールバーは下部中央にオーバーレイ表示される。比率は維持され、表示領域の幅に応じてスケール。