webrtc＆twilioでリアルタイムのビデオチャットルームを作成する

この記事は、Wern AnchetaとTim Severienによるピアレビューの恩恵を受けました。 コンテンツを強化してくれたSitePointのピアレビュアーに感謝します！ 私の前の記事「The Dawn of Webrtc」の構築は、シンプルな写真ブースアプリを実証しました。この記事では、Webリアルタイムコミュニケーション（WeBRTC）APIを使用して機能的なビデオチャットルームを作成することを紹介します。 WeBRTCは、Webおよびモバイル開発者に、簡単なAPIを使用して高解像度のビデオおよびオーディオ通話アプリケーションを構築できるようにします。 ヘルスケア、教育、顧客サービス、ソーシャルメディアを含む幅広い業界が、次世代アプリケーションのWEBRTCを活用しています。 Facebook Messenger、WhatsApp、Snapchatなどのプラットフォームを介して無意識のうちにWebrtcを使用した可能性があります。

キー学習ポイント：

Twilioのプログラム可能なビデオAPIを使用して、リアルタイムビデオとオーディオをアプリケーションに統合し、ユーザーエンゲージメントを改善します。 ユーザー管理のためにTwilioとFirebaseを使用したビデオチャットルームをセットアップします。 WeBRTCサポートブラウザー（Chrome、Firefox、Opera）との互換性を確保し、安全な通信のためにSSL暗号化を実装してください。

ユーザー認証、チャット招待状、および接続管理のために提供されたPHPおよびJavaScriptコードを利用してください。

ユーザーステータスの更新と動的接続/切断機能を備えた堅牢なリアルタイムビデオチャットアプリケーションを開発します。
• TWILIO webrtcおよび同様の技術がコミュニケーションに革命をもたらしています。 開発者は、拡張されたコミュニケーション機能をあらゆるアプリケーションに簡単に統合できます。 Facebook、Snapchat、Tango、WhatsAppのような主要なプラットフォームがライブオーディオとビデオを組み込んでいるように、あなたもできます。
• このプロセスは、驚くほどシンプルで、高速で、費用対効果が高いです。 WebrtcのGoogleのオープンソースの性質は、ライセンス料を排除します。 ただし、ターン/スタン、シグナリング、MCUなどのWeBRTCコンポーネントのナビゲートは挑戦的です。
多くのPAASプロバイダーはWeBRTCソリューションを提供しています。 Blacc Spot Mediaでの経験に基づいて、実証済みの有効性についてはTwilioをお勧めします。 この記事では、プラットフォームに焦点を当てています
• twilioビデオ：強力なツール

Twilioは、単純なAPIとSDKを介して一連のコミュニケーションツールを提供しています。 プログラム可能なビデオでは、WebおよびモバイルアプリでのHDマルチパーティビデオおよびオーディオエクスペリエンスが可能になります。 TwilioはWebrtcスペースのリーダーであり、その製品を継続的に強化しています。 将来の機能強化には、モバイル画面の共有とマルチパーティ機能の改善が含まれます。

チャットルームの建設

このデモにはTwilioアカウントが必要です（無料アカウントにサインアップし、「プログラム可能なビデオ」を選択します）。 必要なのは

です

Credential	Description
Twilio Account SID	Your main Twilio account identifier (found on your dashboard).
Twilio Video Config SID	Enables video capabilities in the access token (generate one on your dashboard).
API Key	Used for authentication (generate one on your dashboard).
API Secret	Used for authentication (generate one on your dashboard).

また、ユーザー管理にはFireBaseも使用します。 （必要に応じて無料アカウントにサインアップ）。 セットアップ後、このデモをサーバーに展開できます。

demo

コードはGitHubで入手でき、ライブデモはBlacc Spot Mediaでホストされています。 Webrtcは現在、デスクトップでGoogle Chrome、Mozilla Firefox、およびOperaをサポートしていることを忘れないでください。 ブラウザの互換性を確認してください。RTCPeerConnectionを使用できますか？

サーバー展開（Chrome 47以降がSSLが必要）の場合は、無料のSSL証明書にLet's Encryptを使用します。 デジタルオーシャンチュートリアルは、インストールを支援できます

phpコード（token.php）

このPHPスクリプトは、Twilio認証とトークン生成を処理します

htmlコード（index.html）

// ADD TWILIO REQUIRED LIBRARIES
require_once('twilio/Services/Twilio.php');

// TWILIO CREDENTIALS
$TWILIO_ACCOUNT_SID = 'your account sid here';
$TWILIO_CONFIGURATION_SID = 'your configuration sid here';
$TWILIO_API_KEY = 'your API key here';
$TWILIO_API_SECRET = 'your API secret here';

// CREATE TWILIO TOKEN
$id = $_GET['id'];

$token = new Services_Twilio_AccessToken(
    $TWILIO_ACCOUNT_SID,
    $TWILIO_API_KEY,
    $TWILIO_API_SECRET,
    3600,
    $id
);

$grant = new Services_Twilio_Auth_ConversationsGrant();
$grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID);
$token->addGrant($grant);

echo json_encode(array(
    'id'    => $id,
    'token' => $token->toJWT(),
));

このHTMLは、チャットルームインターフェイスの基本構造を提供します。

javaScriptコード（app.js）

このJavaScriptは、WeBRTC機能、ユーザーインタラクション、およびFireBaseの統合を処理します。 （注：これは簡潔にするために大幅に短縮されたバージョンです。完全なコードはGitHubで利用できます。）

<div class="m-content">
    <h1>Quick Start Your WebRTC Project with Twilio</h1>
    <div class="start">
        <input type="text" id="id" name="id" value="" placeholder="Enter your name to join the chat" />
        <button id="start">Join Chat Room</button>
        <button id="disconnect" class="b-disconnect hide">Disconnect from Chat</button>
        <div class="status">
            <strong>MY STATUS:</strong> <span id="status">DISCONNECTED</span>
        </div>
    </div>
    <div class="local">
        <div id="lstream"></div>
    </div>
    <div class="remote">
        <div id="rstream"></div>
    </div>
    <div class="users-list"></div>
    <div class="logs"></div>
</div>
<🎜>
<🎜>
<🎜>
<🎜>
<🎜>

省略された関数を含む完全なJavaScriptコードは、元の記事にリンクされているGitHubリポジトリで入手できます。

結論

// ... (WebRTC browser check, tlog function, etc.) ...

$('#start').on('click', function() {
  // ... (Ajax request to token.php, Twilio client setup) ...
});

// ... (clientConnected, firebaseConnect, addParticipant functions) ...

function startConversation() {
  // ... (Get user media, attach to #lstream) ...
}

// ... (conversationInvite, conversationStarted, participantConnected, participantDisconnected functions) ...

$('#disconnect').on('click', function() {
  // ... (Firebase disconnect, stop conversation, reset UI) ...
});

// ... (stopConversation function) ...

webrtcはコミュニケーションを変換しています。 TwilioとFirebaseは、リアルタイム通信アプリケーションの開発を簡素化します。 今日から独自の革新的なソリューションの構築を開始してください！ その他のWeBRTCチュートリアルとリソースについては、webrtc.tutorials（起動時）をご覧ください。

（元の入力のFAQセクションは長さの制約のために省略されていますが、この改訂された出力に簡単に再統合できます。）

以上がwebrtc＆twilioでリアルタイムのビデオチャットルームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。