使用Webrtc＆Twilio创建一个实时视频聊天室

>本文受益于Wern Ancheta和Tim Severien的同行评审。 感谢SitePoint的同行评审增强了我们的内容！ >在我以前的文章“ 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
• 简化开发 这个过程令人惊讶地简单，快速且具有成本效益。 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 id="Quick-Start-Your-WebRTC-Project-with-Twilio">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中文网其他相关文章！