Twilioブログ

WebRTCを使うためにTwilio Network Traversalを使ってみた

こんにちは、KDDI Web Communications 第二開発部のJSパークです。

現在、KDDI Web Communications開発部では、社内のアプリケーション開発チャレンジとして、「Flutter」と「WebRTC」を活用したクロスプラットフォームアプリケーションを作っています。

その際、TwilioをICEサーバーとして利用する知見を得られたので、ご紹介します。

Twilioは「Twilio Network Traversal」というグローバル分散型の STUN/TURN サービスを提供しています。

本記事では「Flutter」を利用して作られた「WebRTC」アプリケーションに、「Twilio Network Traversal」をICEサーバーとして利用する方法についてご紹介します。

本記事の内容

  • Twilio SDKを使わない理由
  • WebRTCプロジェクトの、ICEサーバーをTwilio Network Traversalに切り替える方法
    • Flutterを用いたWebRTCプロジェクトの作り方についてはこちらの記事をご参照ください。

Twilio SDKを使わない理由

今回のプロジェクトの目標は、「一つのソースコードを用いて、すべてのプラットフォームでアプリケーションを動かせる」ことです。

しかしTwilio SDKがサポートしているのはWeb、iOS、Androidのみ。Mac、Windowsのサポートはまだ行っておりません。

そのため今回はTwilio SDKを利用せず、ICEサーバーとしてTwilioを利用することにしました。

WebRTCとは?

WebRTC(Web Real-Time Communications)とは、ウェブブラウザやアプリケーションにプラグインなどを追加インストールすることなく、リアルタイムで音声・ビデオなどのデータをP2P(Peer To Peer)で共有できる技術です。

Twilio Network Traversalとは?

Twilio Network Traversalとは、信頼できるP2P(Peer To Peer)アプリケーションのデプロイに役立つ、グローバル分散型の STUN/TURN サービスです。

STUN/TURN、ICEについてはこちらの記事を参考ください。

Twilio Network TraversalをFlutterアプリケーションに適用する方法

①Flutterをインストールする

事前準備として、まずはFlutterのインストールを完了させましょう。

https://flutter.dev/docs/get-started/install

インストールを終了し、”flutter doctor”を実行します。

すべてがチェック表示になっていれば、Flutterを使える状態です。

②Twilio Network Traversalを利用する

Twilio Network Traversalは以下の手順で利用します。

1. TwilioのICEサーバーを取得する。

下記コマンドを実行することでTwilioのICEサーバーリストを取得することが可能です。

curl -X POST https://api.twilio.com/2010-04-01/Accounts/$TWILIO_ACCOUNT_SID/Tokens.json \
-u $TWILIO_ACCOUNT_SID:$TWILIO_AUTH_TOKEN

2. WebRTCに適用する。

Flutter側に、取得したICEサーバーリストを適用します。

// FlutterのP2P接続
await createPeerConnection({
      'iceServers' : [...TwilioIceServers], // 取得したICEサーバーリスト
      'sdpSemantics': sdp
    }, _config);

③ソースコードに実装する

実際にFlutterで書かれたプログラムに上記手順を適用すると、下記のようになります。

1. TwilioのICEサーバーを取得する

APIリファレンス

TwilioからICEサーバーリストを取得するコードは下記のようになります。

import 'package:http/http.dart' as http;

Future _iceServers() async {
    String basicString = base64.encode(utf8
        .encode('${CommonConstant.TwilioSID}:${CommonConstant.TwilioToken}'));
    var response = await http.post(
        '${CommonConstant.TwilioAPI}/${CommonConstant.TwilioSID}/Tokens.json',
        headers: {HttpHeaders.authorizationHeader: 'Basic ${basicString}'});
    logger.d('Response status: ${response.statusCode}');
    logger.d('Response body: ${response.body}');
    Map iceServers = _decoder.convert(response.body);
    logger.d(iceServers);

    Map twilioIceServer = {
        'iceServers': [...iceServers['ice_servers']]
    };
    return twilioIceServer;
}

上記関数は下記のような結果を返却します。
このICEサーバーリストをFlutterのWebRTCに適用します。

{
    "iceServers": [
        {
            "url": "stun:global.stun.twilio.com:3478?transport=udp",
            "urls": "stun:global.stun.twilio.com:3478?transport=udp"
        },
        {
            "username": "dc2d2894d5a9023620c467b0e71cfa6a35457e6679785ed6ae9856fe5bdfa269",
            "credential": "tE2DajzSJwnsSbc123",
            "url": "turn:global.turn.twilio.com:3478?transport=udp",
            "urls": "turn:global.turn.twilio.com:3478?transport=udp"
        },
        {
            "username": "dc2d2894d5a9023620c467b0e71cfa6a35457e6679785ed6ae9856fe5bdfa269",
            "credential": "tE2DajzSJwnsSbc123",
            "url": "turn:global.turn.twilio.com:3478?transport=tcp",
            "urls": "turn:global.turn.twilio.com:3478?transport=tcp"
        },
        {
            "username": "dc2d2894d5a9023620c467b0e71cfa6a35457e6679785ed6ae9856fe5bdfa269",
            "credential": "tE2DajzSJwnsSbc123",
            "url": "turn:global.turn.twilio.com:443?transport=tcp",
            "urls": "turn:global.turn.twilio.com:443?transport=tcp"
        }
    ]
}

2. WebRTCに適用する

createPeerConnectionの第一引数に”iceServers()”を代入します。

    RTCPeerConnection pc = await createPeerConnection({
      ...await _iceServers(),
      ...{'sdpSemantics': sdpSemantics}
    }, _config);

たったこれだけの作業で、ICEサーバーとしてTwilio Network Traversalを利用できるようになります。

まとめ

TwilioはWebRTC、通信に強いサービスです。
Twilio SDKがプロジェクトの用件に合わない場合でも、本記事のように部分的にTwilioを利用することで開発スピードや運用コストを下げることができるのではないかと思いました。

アプリケーションエンジニア Park Junsang
アプリケーションエンジニア Park Junsang

新卒でKWCに入社。技術本部第二開発部に所属し、レンタルサーバー「CPI」のバックオフィスシステム再構築(マイグレーション・モダナイゼーション)と新機能追加に従業。ITスペシャリストを目指し、日々前進中。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例