ボクココ

サービス開発を成功させるまでの歩み

WebRTC のビデオに電話で参加する

ども、@kimihom です。

f:id:cevid_cpp:20200813125245j:plain

WebRTC のビデオ通話のサービスを提供すると、ほぼ間違いなくインターネットやヘッドセット接続の不調による "よく聞こえない" という問題が発生する。そのため、一部のビデオ通話サービスでは電話番号が用意されていて、音は電話を使うことで問題を解決している。

私が使う Twilio でも、同様の手段が提供されている。今回はその方法について簡単に紹介しよう。ただ、現時点で自分の環境で完璧に動作するまで検証できていないので、あくまで参考までに読んでいただければと思う。

電話番号の用意

実はこれが一番ハードルが高い。今 Twilio では Bundle という電話番号を所有する上で必要な身元の証明が必要となっている。会社情報や免許証などをアップロードし、Twilio から Budnle の承認を得ないと電話番号を取得することができない。

TwilioでBundles(本人認証)の設定を行う(個人編) - Qiita

TwilioでBundles(本人認証)の設定を行う(法人編) - Qiita

ビデオ通話の開始

まずはビデオ通話を普通に開始しよう。通常の ブラウザ と ブラウザ 間でのビデオ通話を実装する。

Twilio.Video.connect("twilio で生成したvideo token", {
  name: "DailyStandup",
  region: "jp1"
}).then(function(room) {
  // ~~
}, function(error) {
  console.error("error", error);
});

jp.twilio.com

着信 or 発信でのビデオ接続

電話をビデオにつなげる方法は2つある。

  • Twilio Call API で発信して相手に繋がったら、その通話を Video ルームへいれる
  • 電話番号に着信を受けた際に指定する TwiML で ビデオに参加させる

どちらも下記 TwiML で接続させることになる。

<?xml version="1.0" encoding="UTF‐8"?>
<Response>
  <Connect>
    <Room>DailyStandup</Room>
  </Connect>
</Response>

TwiML™ Voice: <Connect> - Twilio

この実装でビデオ通話に電話を参加させることはできた。

終わりに

今回のテクニックはだいぶマニアックではあるけども、ビデオで相手の声が聞こえないという問題は頻発する。その解決として Twilio Video と Twilio Voice のそれぞれを組み合わせるってのは、 Twilio を極めし者のみが実現できる方法ではないだろうか。

簡単な説明にはなったが、もし気になる場合には上記リンク先を参照していただければ幸いだ。