使用Webrtc＆Twilio創建一個實時視頻聊天室-js教程-PHP中文網

Create a Real-Time Video Chat Room with WebRTC & Twilio

>本文受益於Wern Ancheta和Tim Severien的同行評審。感謝SitePoint的同行評審增強了我們的內容！ >在我以前的文章“ Webrtc的黎明”上構建，該文章展示了一個簡單的照相亭應用程序，本文通過使用Web實時通信（WEBRTC）API來指導您創建功能性的視頻聊天室。

> WEBRTC賦予Web和移動開發人員使用直接API構建高清視頻和音頻調用應用程序。包括醫療保健，教育，客戶服務和社交媒體在內的廣泛行業正在利用WEBRTC進行下一代應用程序。您可能會通過Facebook Messenger，WhatsApp和Snapchat等平台在不知不覺中使用Webrtc。

密鑰學習點：

>使用Twilio的可編程視頻API將實時視頻和音頻集成到您的應用程序中，從而改善了用戶的參與度。

確保與WEBRTC支持的瀏覽器（Chrome，Firefox，Opera）的兼容性並實現SSL加密以進行安全通信。
>開發具有用戶狀態更新和動態連接/斷開連接功能的強大實時視頻聊天應用程序。
用twilio
簡化開發這個過程令人驚訝地簡單，快速且具有成本效益。 Google的WEBRTC的開源性質取消了許可費。但是，導航WebRTC組件（例如轉向/眩暈，信號傳導和MCUS）可能具有挑戰性。

許多PAAS提供商提供WEBRTC解決方案。根據我們在BLACC Spot Media的經驗，我們建議Twilio具有公認的有效性。本文專注於他們的平台。

twilio視頻：一個強大的工具

> Twilio通過簡單的API和SDK提供了一套通信工具。他們的可編程視頻允許在網絡和移動應用程序中提供高清多方視頻和音頻體驗。 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證書。數字海洋教程可以協助安裝。

php code（token.php）

此PHP腳本處理Twilio身份驗證和令牌生成。

// 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代碼（index.html）

此HTML提供了聊天室接口的基本結構。

> javaScript代碼（app.js）

<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處理WEBRTC功能，用戶交互和Firebase Integration。（注意：這是簡短的明顯縮短版本。完整的代碼可在GitHub上找到。）

> 完整的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.tucionals（啟動時）。

> （由於長度約束，省略了原始輸入的FAQS部分，但可以很容易地將其重新整合到此修訂後的輸出中。）

以上是使用Webrtc＆Twilio創建一個實時視頻聊天室的詳細內容。更多資訊請關注PHP中文網其他相關文章！