一般的なカスタマイズ

Vonage Videoのユーザーインターフェイスをカスタマイズするには、いくつかの調整が可能です：

公開ストリームに名前を追加する

パブリッシャーの作成時に、ビデオに表示する名前を（オプションで）指定できます：

// Replace the first parameter with the target element ID:
var publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

この名前を使ってクライアントを識別することができる。

トークン作成時に、クライアントに関するメタデータを追加することもできる。この名前はビデオでは自動的に表示されません。しかし、トークン作成時にデータを追加することで、より安全に情報を追加することができます（トークンはクライアントではなくサーバー上で作成されるため。詳しくは トークン作成.

クライアントは、パブリッシャまたはサブスクライバのビューで名前を非表示にすることを選択できます。以下を参照してください。 本節

パブリッシャーにミュートボタンを追加する

デフォルトでは、パブリッシャーまたはサブスクライバーのユーザー・インターフェイスには、ミュート・オーディオ・ボタンがあります。パブリッシャーの場合、ユーザーはクリックしてマイクのオン/オフを切り替えることができます。

ストリームを公開する際、ミュートボタンを表示するかどうかは style.buttonDisplayMode プロパティを OT.initPublisher() メソッドを使用する：

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

について style.buttonDisplayMode プロパティには3つの値のいずれかを設定できる：

  • 「auto" - ミュートボタンは、ストリームが最初に表示されたときと、ユーザーがビデオにマウスオーバーしたときに表示されます（デフォルト）。
  • 「off" - ミュートボタンは表示されません。
  • 「on" - ミュートボタンが表示されます。

パブリッシャーを作成したら、ミュート・ボタンの表示モードを変更するには setStyle() メソッドを使用します。のドキュメントを参照してください。 Publisher.setStyle().

加入者にミュートボタンを追加する

デフォルトでは、パブリッシャーまたはサブスクライバーのユーザー・インターフェイスには、ミュート・オーディ オ・ボタンがあります。サブスクライバの場合、ユーザーはクリックしてスピーカーのオン/オフを切り替えることができます。

ストリームを購読する際、ミュート・スピーカーを表示するかどうかは style.buttonDisplayMode プロパティを Session.subscribe() メソッドを使用する：

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

について style.buttonDisplayMode プロパティには3つの値のいずれかを設定できる：

  • 「auto" - ミュートボタンは、ストリームが最初に表示されたときと、ユーザーがビデオにマウスオーバーしたときに表示されます（デフォルト）。
  • 「off" - ミュートボタンは表示されません。
  • 「on" - ミュートボタンが表示されます。

サブスクライバーを作成したら、ミュートボタンの表示モードを変更することができます。 setStyle() メソッドを呼び出します。のドキュメントを参照してください。 サブスクライバー.setStyle().

パブリッシャーのカメラを切り替えるボタンの追加

パブリッシャーが使用するカメラを切り替えるデフォルトのユーザーインターフェース要素はありません。しかし、ボタンなどの要素を追加して swapCamera メソッドを呼び出します：

mPublisher.swapCamera();

に注意してほしい。 cameraPosition プロパティはPublisherKitクラスでは使用できません。PublisherKitクラスで カスタムビデオキャプチャーの実装カスタムビデオキャプチャコードで使用するカメラを定義することができます。

ビデオの有効/無効時のユーザーインターフェースの調整

サブスクライバ・オブジェクトは、サブスクライバのストリームのビデオが有効または無効になることに関連する以下のイベントをディスパッチします：

  • videoEnabled - ビデオが無効化された後に有効化されたときにディスパッチされる。
  • videoDisabled - 動画が無効になったときにディスパッチされる。イベントオブジェクトの reason プロパティは、動画が無効化された理由を示す。(このイベント オブジェクトは ビデオ有効変更イベント オブジェクト)
  • videoDisableWarning - メディアルータがストリームの品質が劣化したと判断した場合にディスパッチされ、品質がさらに劣化した場合、ビデオは無効化される。画質がさらに劣化した場合、加入者はビデオを無効化し、以下のディスパッチを行う。 videoDisabled イベントを開催する。
  • videoDisableWarningLifted - 以前は無効になっていたビデオが有効になった。

について videoDisableWarning そして videoDisableWarningLifted イベントは メディア・ルーター (メディアモードがルーティングに設定されているセッション）。

デフォルトでは、加入者はビデオ無効警告インジケータとビデオ無効インジケータを表示します。 videoDisableWarning そして videoDisableWarningLifted イベントがディスパッチされます。インジケーターのデフォルト表示を無効にするには videoDisabledDisplayMode サブスクライバー・オブジェクトのスタイル設定。

次の例では videoDisabledDisplayMode ビデオ無効警告インジケータとビデオ無効インジケータを1秒ごとに点滅させるスタイル設定。 videoDisableWarning そして videoDisableWarningLifted イベントがディスパッチされる：

var indicatorBlinker = new IndicatorBlinker(subscriber);

var IndicatorBlinker = function(subscriber) {
  var timer;
  var indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  var start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  var stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

を設定することもできます。 videoDisabledDisplayMode スタイルを'off'に設定し、独自のユーザーインターフェイス要素を追加する。 videoDisableWarning, videoDisabled, videoDisableWarningLiftedそして videoEnabled のイベントがある。

セッションがアーカイブされているときにインジケータ要素を表示する

セッションのアーカイブが録画を開始するとき（あるいは録画中のセッションに接続するとき）には Session.ArchiveListener.onArchiveStarted(session, name) メソッドが呼び出される。録画が停止すると Session.ArchiveListener.onArchiveStopped(session, name) メソッドが呼び出されます。パブリッシャー ビューに表示されるアイコンのようなユーザー インターフェイス要素を追加して、ビデオが録画中であることを示すことができます：

@Override
public void onArchiveStarted(Session session, String id, String name) {
    // Display the archive indicator
}

@Override
public void onArchiveStopped(Session session, String id, String name) {
    // Hide the archive indicator
}

オーディオレベルに応じてユーザーインターフェースを調整

パブリッシャーとサブスクライバーのオブジェクトのディスパッチ audioLevelUpdated イベントを定期的に発生させ、オーディオ・レベルをレポートします。これらのイベントを使用して、オーディオレベルインジケータを表示することができます。また、これらのイベントを使用して、セッションでアクティブなスピーカーを検出することもできます。

次の例は、加入者の音量を示すメーター要素の値を調整します。このコードでは audioLevelDisplayMode スタイル 'off'これは、サブスクライバーに表示されるデフォルトのオーディオレベルメーターを無効にします。オーディオレベルは対数的に調整され、移動平均が適用されます：

subscriber.setStyle('audioLevelDisplayMode', 'off');
var movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  var logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

この例では、IDが "subscriberMeter "のHTMLメーター要素があると仮定している。

オーディオ専用モードでは、パブリッシャーまたはサブスクライバーのDOM要素に、デフォルトで音量インジケータが表示されます（要素の右上隅）。このデフォルトのユーザー・インターフェース要素を無効にして、独自のボリューム・メーターを表示することができます。次のトピックを参照してください、 ビデオの有効/無効時のユーザーインターフェースの調整.

を使用することもできます。 audioLevelUpdated イベントを使用して、パブリッシャーまたはサブスクライバーのオーディオが十分な音量で十分な時間続いた場合に、参加者が話し始めたと判断することができます。または、オーディオが十分な時間静かであった場合、参加者が話を止めたと識別することができます：

var subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

var SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  var activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    var now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

(コンソールへのロギングの代わりに、ユーザーが話し始めたり止めたりしたときに、アプリがユーザーインターフェースの要素を調整することもできる）。

カスタムビデオレンダラの使用

Subscriber クラスと Publisher クラスは、ストリームをレンダリングし、ストリーム名の表示やマイクまたはカメラのミュートなどのユーザー インターフェイス制御を提供する、標準のビデオ レンダラーを実装します。SubscriberKit クラスと PublisherKit クラスを使用して、カスタム動画レンダラーを実装できます。

Android SDKにはBaseVideoRendererクラスがあります。このクラスをオーバーライドして、カスタムビデオレンダラを作成します。

PublisherKit オブジェクトをインスタンス化した後に setRenderer() PublisherKitオブジェクトの

mPublisher = new PublisherKit(MyClass.this, "publisher");

// Use a custom video renderer.
// MyVideoRenderer extends BaseVideoRenderer
mRenderer = new MyVideoRenderer();
mPublisher.setRenderer(new mRenderer);

SubscriberKit クラスにも setRenderer() メソッドを使用する。

について onFrame() メソッドが呼び出されます：

public void onFrame(Frame frame) {
    // The new frame is available.
}

について frame は BaseVideoRenderer.Frame オブジェクトです。このオブジェクトには getBuffer() これは、ビデオフレームデータを含むバイトバッファを返すものです。このバイトバッファを使って、パブリッシャーのビューにビデオフレーム画像を追加することができます。

例として、OpenTokHelloWorld サンプル・アプリケーションの OpenTokVideoRenderer クラスをご覧ください。

を使うようにパブリッシャーを設定することもできます。 カスタムビデオキャプチャ.