背景のぼかしは、最新のビデオ会議アプリでよく使用される機能です。カメラの前にいる人物と背景を自動的に区別し、人物にフォーカスを合わせたまま周囲をぼかします。
Background Blur API は、ウェブに背景の隠蔽機能をもたらします。この API を使用すると、ウェブアプリは、背景ぼかし効果をカメラの動画フィードに効率的に適用するようオペレーティング システムに要求できます。これにより、TensorFlow.js、Mediapipe などの ML フレームワークやクラウドベースのソリューションを使用して、各動画フレームを個別に処理し、エフェクトを手動で適用する必要がなくなります。
Background Blur API を有効にする
デフォルトでは、Background Blur API は Chrome で有効になっていませんが、機能を明示的に有効にすることで、Chrome 114 で試すことができます。ローカルで有効にするには、chrome://flags/#enable-experimental-web-platform-features で「試験運用版のウェブ プラットフォームの機能」フラグを有効にします。
アプリのすべての訪問者にこの機能を有効にするため、オリジン トライアルが実施されています。このトライアルは Chrome 117（2023 年 11 月 3 日）に終了する予定です。トライアルに参加するには、登録して、オリジン トライアル トークンを含むメタ要素を HTML または HTTP ヘッダーのいずれかに含めます。詳細については、起点のトライアルの開始をご覧ください。
背景のぼかしの変化を監視する
MediaStreamTrack の backgroundBlur ブール値設定により、オペレーティング システムがメディア デバイスに背景のぼかしを適用するかどうかがわかります。また、ユーザーがオペレーティング システムのアフォーダンスで背景ぼかしをオンまたはオフに切り替えると、MediaStreamTrack で "configurationchange" イベントが発生します。
次のコード スニペットは、ユーザーがアクセスを許可したメディア デバイスで背景ぼかしの変化をモニタリングする方法を示しています。
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Read current background blur value.
const [track] = stream.getVideoTracks();
let { backgroundBlur } = track.getSettings();
console.log(`Background blur is ${backgroundBlur ? "ON" : "OFF"}`);
// Listen to background blur changes.
track.addEventListener("configurationchange", () => {
if (backgroundBlur !== track.getSettings().backgroundBlur) {
backgroundBlur = track.getSettings().backgroundBlur;
console.log(`Background blur is now ${backgroundBlur ? "ON" : "OFF"}`);
}
});
背景のぼかしを切り替える
MediaStreamTrack の backgroundBlur 配列機能を使用すると、メディア デバイスで背景のぼかしを制御できるかどうかを確認できます。未定義の場合や、値が 1 つ（[true] または [false]）しかない場合は、カメラの背景ぼかしを制御できません。値が 2 つある場合は、MediaStreamTrack で applyConstraints() メソッドを使用して、背景のぼかし効果をカメラの動画フィードに切り替えるようオペレーティング システムにリクエストできます。返された Promise は、成功すると解決し、エラーが発生すると拒否されます。
次のコード スニペットは、ユーザーがアクセス権を付与したメディア デバイスでカメラ背景のぼかしを制御する方法を示しています。
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Check whether the user can toggle background blur in the web app.
// If not, note that you may still want to apply it through a fallback
// software solution.
const [track] = stream.getVideoTracks();
if (track.getCapabilities().backgroundBlur?.length === 2) {
const button = document.querySelector("button");
button.addEventListener("click", toggleBackgroundBlurButtonClick);
button.disabled = false;
}
async function toggleBackgroundBlurButtonClick() {
const constraints = {
backgroundBlur: !track.getSettings().backgroundBlur,
};
// Request operating system to toggle background blur.
await track.applyConstraints(constraints);
const newSettings = track.getSettings();
log(`Background blur is now ${newSettings.backgroundBlur ? "ON" : "OFF"}`);
}
プラットフォーム サポート
Background Blur API は、ChromeOS、macOS、Windows 版 Chrome 114 で利用できます。
現在、ChromeOS と macOS では、ユーザーがオペレーティング システムの UI（macOS のコントロール センターなど）で変更できる背景のぼかしの変化のみを観察できます。Windows では、背景のぼかしをモニタリングして制御できます。
デモ
背景のぼかしを切り替えて変化を確認するには、公式のサンプルを試してみてください。（前述のように、これらの機能の利用はプラットフォームのサポートに依存します）。
フィードバック
この段階ではデベロッパーのフィードバックが非常に重要となります。ご提案やご質問がございましたら、GitHub で問題を報告してください。
背景ぼかしをブール値として公開することがニーズに合っているか、または「ライト」、「強」、「オフ」などのよりきめ細かいアプローチが適切かどうか、ご意見をお聞かせください。すべてのオペレーティング システムで公開されているものと互換性がない場合でも、ご意見をお聞かせください。