https://d226lax1qjow5r.cloudfront.net/blog/blogposts/blurring-for-clarity-avoid-awkward-conversations-about-your-home/background-blur.png

Sina MadaniVonage 元チームメンバー

シナはVonageのJavaデベロッパー・アドボケイト。アカデミックなバックグラウンドを持ち、自動車、コンピューター、プログラミング、テクノロジー、人間性など、あらゆることに好奇心旺盛。余暇には散歩をしたり、対戦型ビデオゲームをしたりしている。

ぼかしで明瞭に：参加者のプライバシーを守り、注目を集める

最終更新日 January 3, 2023

#javascript

#video-api

所要時間：1 分

バーチャル・ミーティングは、対面のミーティングとは異なる雰囲気がある。その理由のひとつが、共有環境の必要性だ。全員の居場所（つまり、バックグラウンドで起こっていること）が異なるため、参加者の気が散ってしまう可能性がある。さらに、参加者はビデオ通話の間、移動することなくプライバシーを保護したいと思うかもしれませんが、それは現実的でない場合もあります。

1つの解決策は、参加者の顔に焦点が合うように、参加者の背景をぼかすことである。そうすることで、参加者の自然な背景環境を維持しつつ、ディテールを減らして気が散りにくくなる。もう1つの解決策は、背景を別の画像に置き換え、それを一部の参加者またはすべての参加者に適用することである。この方法の利点は、会議のトーンや性質に応じて適切な背景設定を使用できることです。例えば、ビデオ通話が異なる組織間の会議である場合、ロゴまたは標準化された背景を各組織の代表者に適用することで、わかりやすくすることができる。

これらのアプリケーションは、数行のコードを追加するだけで、Vonageビデオアプリケーションに簡単に適用することができます。この記事では、これらのフィルタを適用する方法を、最小限の例を用いてステップバイステップで説明します。

前提条件

デモ・アプリケーションを動作させるには、認証情報が必要です。ログインするか Vonage Video アカウントにログインし、左メニューの「プロジェクト」をクリックします。以前のカスタムプロジェクトを選択するか、新しいプロジェクトを作成することができます。プロジェクトに移動します - ページは次のようになります：

OpenTok project page

プロジェクトAPIキーをメモする。Project Tools "セクション（ページ下部付近）までスクロールダウンし、"Create Session ID "をクリックする。これをコピーし、次のセクションに貼り付けてトークンを生成します。ロールは "Publisher "を選択し、有効期限は24時間（またはセッションが必要な時間）に設定します。このエクササイズには、プロジェクトAPIキー、セッションID、トークンが必要です。

スケルトンアプリの作成

作業用のディレクトリを作成し、そこに移動する。それからアプリケーション・ファイルを次のように作成する：

mkdir opentok-bg-filters cd opentok-bg-filters touch index.html index.js index.css

プロジェクトを作成したので、コードを index.jsファイルにコードを追加しましょう。もちろん apiKey, sessionIdと tokenの値は適切に設定してください。

const apiKey = '';
const sessionId = '';
const token = '';

function handleError(error) {
  if (error) {
    alert(error.message);
  }
}

const session = OT.initSession(apiKey, sessionId);

const subscriberOptions = {};

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%',
  resolution: '1280x720'
};

const publisher = OT.initPublisher('publisher', publisherOptions, handleError);

session.on({
  streamCreated: event => session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError),
  sessionConnected: event => session.publish(publisher)
});

session.connect(token, error => handleError(error));

上のコードでは、初期化したセッションとパブリッシャーオブジェクトを初期化しています。 OT.initSessionメソッドと OT.initPublisherメソッドを使います。次に、セッション・オブジェクトのイベント・リスナーを streamCreatedそして sessionConnectedここで、ストリームが作成されたときにそのストリームをサブスクライブし、セッションに接続されたときにストリームをパブリッシュします。セッション・イベント・リスナーを設定した後、セッションに接続しようとします。 OpenTok トークン.

をロードする。 index.jsと index.cssファイルを index.htmlと OpenTok.js SDK:

<html>
<head>
    <title>Vonage Video Background Filter demo</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
</head>
<body>
    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher"></div>
    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

あなたの index.cssファイルに追加する：

body, html {
    background-color: gray;
    height: 100%;
}

#videos {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#subscriber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#publisher {
    position: absolute;
    width: 640px;
    height: 480px;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    border: 3px solid white;
    border-radius: 3px;
}

ブラウザで index.htmlをブラウザで開き、ウェブカメラとマイクへのアクセスを許可すると、カメラのビデオフィードが表示されるはずです。これが表示されない場合は、コードとトークン/セッションID/APIキーの値を確認してください。ブラウザの開発者コンソール（通常はF12キーを押してアクセス）から、この問題についてさらに詳しく知ることができます。

ビデオエフェクトの追加

オプションを使って、Videoにフィルタを追加することができます。 videoFilterオプションを使用して動画にフィルタを追加できます。これはパブリッシャーの初期化中または初期化後に適用できます。通常は、すぐに実行するのが理にかなっています。この機能はすべてのブラウザ (特に古いブラウザ) でサポートされているわけではありません。心配する必要はありません - 条件付きでフィルタを適用することができます。例えば、先ほど作成した publisherOptionsオブジェクトに

// Add background blur, if supported
if (OT.hasMediaProcessorSupport()) {
  publisherOptions.videoFilter = {
    type: 'backgroundBlur',
    blurStrength: 'low'
  };
}

アプリケーション・ロジックで、フィルタを後の時点で適用する必要がある場合（例えば、イベントに応答して）、次のようにすることができます：

publisher.applyVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high'
});

ある時点でフィルターを外すには publisher.clearVideoFilter().を呼び出すことができる。 index.jsファイルを追加する：

setTimeout(() => publisher.clearVideoFilter(), 8000);

背景画像の変更

背景を変更するには、以下の設定を videoFilter:

if (OT.hasMediaProcessorSupport()) {
  publisherOptions.videoFilter = {
    type: 'backgroundReplacement',
    backgroundImgUrl: 'https://example.com/image.jpg'
  };
}

制限とトラブルシューティング

画像置換と背景ぼかしの両方を同時に使用することはできません。背景画像が適用されない問題が発生した場合は、次の原因が考えられます。 CORS.これはサーバーの問題なので、他のウェブサイトの画像を試してみてください。画像はBMP、PNG、JPEG、またはGIFである必要があることに注意してください。

次のステップ

これで動作例ができました。 index.cssを編集して外観をカスタマイズしたり、アプリケーションにさらなるロジックを組み込んだりすることができます。本番アプリケーションでは、サーバーからのAPIキー、トークン、セッションIDの取得を自動化する必要があります。私たちのチュートリアルをご覧ください。

パブリッシャーおよび Video フィルタの使用に関する詳細については、以下の API リファレンスを参照してください。パブリッシャー.サポートされているパブリッシャーオプションのパラメータは OT.initPublisherメソッドドキュメンテーション.

このデモで使用されている完全なコードサンプルは、次のサイトから入手できます。このGlitchアプリケーション.その後、APIキー、トークン、セッションIDを貼り付けるだけで動作します！

お気軽に私たちのコミュニティ・スラックまたはツイッターまでお気軽にご連絡ください！