加入者のオーディオがブロックされている場合のカスタムUIエレメントの表示

ブラウザによっては、オーディオの再生が自動的にブロックされ click イベントで、加入者のオーディオ再生が開始されます。これらのブラウザには、Safari、Firefox 66+、Chrome 71+が含まれます。

オーディオ再生がブロックされている場合、Subscriber オブジェクトはオーディオ再生ボタンを表示します。サブスクライバーのデフォルトのオーディオ再生ボタンを無効にし、ユーザーがクリックしてオーディオ再生を開始する独自の UI 要素を表示することができます。

デフォルトのオーディオ再生ボタンの表示を無効にするには style.audioBlockedDisplayMode のoptionsパラメータの Session.subscribe() メソッドを使用する。

var subscriberOptions = {
    style: { audioBlockedDisplayMode: "off" }
  };
var subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

のイベントリスナーを追加する。 audioBlocked そして audioUnbocked サブスクライバによってディスパッチされるイベントを使用して、カスタムUIエレメントを表示したり非表示にしたりします（オーディオを再生するためにクリックするように使用者に指示します）：

subscriber.on({
  audioBlocked: function(event) {
    // display custom UI
  },
  audioUnblocked: function(event) {
    // hide custom UI
  }
});

ユーザーがカスタムUIエレメントをクリックしたら、OTを呼び出します。unblockAudio() メソッドを使用する：

customElement.addEventListener('click', async () => {
  try {
    await OT.unblockAudio();
  } catch (err) {
    console.error('Unblocking audio failed.', err);
    return;
  }
  console.log('Unblocked audio successfully.');
});