背景のぼかしは、最新のビデオ会議アプリケーションでよく使用される機能です。カメラの前にいる人物と背景を自動的に区別して、その人物にピントを合わせながら、周囲をぼかします。
Background Blur API は、ウェブで背景隠し機能を実現します。この API を使用すると、ウェブアプリからオペレーティング システムに、背景のぼかし効果をカメラの動画フィードに効率的に適用するよう要求できます。これにより、各動画フレームを個別に処理する必要がある TensorFlow.js、Mediapipe、クラウドベースのソリューションなどの ML フレームワークを通じて、エフェクトを手動で適用する必要がなくなります。
Background Blur API を有効にする
デフォルトでは、Background Blur API は Chrome で有効になっていませんが、Chrome 114 で明示的に有効にすると、この API を試すことができます。ローカルで有効にするには、chrome://flags/#enable-experimental-web-platform-features で「試験運用版 Web Platform の機能」フラグを有効にします。
現在、オリジン トライアルが進行中であり、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 で問題を報告してください。
背景のぼかしをブール値で公開することがニーズに合っているか、あるいは、すべてのオペレーティング システムで公開されているものと互換性がない場合でも、「明」、「強」、「オフ」のようなより詳細なアプローチが適切かどうかについて、ご意見をお寄せください。
役に立つリンク
ヒーロー画像 by Ayo Ogunseinde