Wern Ancheta和Tim Severien对本文进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！
在我的上一篇文章“ WebRTC的曙光 ”中，我展示了如何使用Web实时通信（WebRTC） API创建一个简单的照相亭应用程序。 在本文中，我将向您展示如何构建更实用的视频聊天室。
总而言之，WebRTC的开发旨在为Web和移动开发人员提供使用简单API创建高清视频和音频呼叫的能力。 跨越但不限于医疗，教育，客户服务，专业服务和社交媒体等所有行业的许多大小公司正在利用WebRTC构建下一代应用程序。
您很有可能在没有意识到的情况下使用了该技术。 如果您使用过Facebook Messenger，WhatsApp和/或SnapChat视频或语音功能，则在不知不觉中使用WebRTC与您的家人和朋友交流。
快速启动开发
WebRTC和其他类似的Web技术正在以各种方式改变人们的交流和参与方式。 开发人员正在提供增强的通信，可以轻松集成到任何应用程序中。 正如Facebook，SnapChat，Tango和WhatsApp这样的公司正在将实时音频和视频功能集成到其应用程序中一样，您也可以这样做。
您可能会感到惊讶，这样做的过程非常简单，快捷，并且具有最佳的成本效益。 由于这项伟大的技术是Google开源的，因此您现在可以免费创建应用程序而无需支付许可费用。 但是，如果您不熟悉WebRTC所需的一些常见组件，例如TURN / STUN ， 信令 ， 多点会议单元（MCU）等，则构建自己的解决方案的道路可能会相当艰巨。
在我们的行业中，有超过20个提供WebRTC解决方案的平台即服务（PaaS）提供商。 在积累了多年使用该技术的经验之后，我们（在Blacc Spot Media）拥有一些最受欢迎的PaaS提供商，这些提供商已被证明能很好地为客户服务。 我们与许多提供商合作，以缩短将客户的产品快速推向市场所需的开发时间。 我们有机会与之合作的提供商之一是Twilio。 在本文中，我们将重点介绍他们的平台。
Twilio视频
如果您不熟悉Twilio ，他们将通过一组简单的API和SDK提供一套通讯工具。 他们的解决方案使开发人员能够向其应用程序添加实时通信功能。 Twilio军械库的新功能是可编程视频 ，它使您可以在移动和Web应用程序中创建高清多方视频和音频体验。 Twilio是WebRTC行业的资深人士，并且正在扩展其当前的Twilio Client产品，该产品已经具有一些以WebRTC组件运行的核心。 Twilio Video拥有光明的未来，并拥有完善的全面路线图。 很快，您将可以体验移动屏幕共享以及增强的多方功能。
建立聊天室
您将需要一个Twilio帐户才能使用此演示。 如果您还没有，可以立即注册一个免费帐户。 确保选择“ 可编程视频 ”作为您计划使用的第一项服务。 创建帐户后，您将需要以下信息来创建您的应用程序：
| 证书 | 描述 |
|---|---|
| Twilio帐户SID | 您的主要Twilio帐户标识符– 在仪表板上找到它。 |
| Twilio视频配置SID | 将视频功能添加到访问令牌– 在此处生成一个 |
| API密钥 | 用于验证- 在此处生成一个 。 |
| API秘密 | 用来进行身份验证– 就像上面的一样，您将在此处获得一个 。 |
我们还将使用Firebase作为跟踪哪些用户可以聊天的简单方法。 Firebase是一种移动后端即服务，可为您的应用后端提供支持，包括数据存储，用户身份验证，静态托管等。 如果您没有帐户，请注册一个免费帐户以开始使用。 完成这些说明后，您将可以将此演示上传到服务器上以运行实时视频聊天室。
演示
本文开发的代码可在GitHub上找到 ，您可以在Blacc Spot Media上观看实时演示 。 目前，仅台式机上的Google Chrome，Mozilla Firefox和Opera支持WebRTC：
如果您将此演示部署到Web服务器，请注意，从Chrome 47开始，需要SSL加密域才能访问用户的麦克风和摄像头。 解决此问题的一种简单方法是使用新的“ 我们的加密”服务来安装免费证书。 您可以在Digital Ocean上找到有关如何在服务器上安装证书的优秀教程。
的PHP
为了获得对Twilio平台的访问权，必须首先在系统中进行身份验证。 在此示例中，我们在服务器端使用PHP来快速启动并运行。 Twilio有各种各样的服务器端库可以满足您的喜好。 进行身份验证后，我们将通过上面从您的Twilio帐户收到的帐户凭据。
// ADD TWILIO REQURIED 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 will be the user name used to join the chat
$id = $_GET['id'];
$token = new Services_Twilio_AccessToken(
$TWILIO_ACCOUNT_SID,
$TWILIO_API_KEY,
$TWILIO_API_SECRET,
3600,
$id
);
// GRANT ACCESS TO CONVERSTATION
$grant = new Services_Twilio_Auth_ConversationsGrant();
$grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID);
$token->addGrant($grant);
// JSON ENCODE RESPONSE
echo json_encode(array(
'id' => $id,
'token' => $token->toJWT(),
));
的HTML
该演示的HTML代码非常简单，并包括使用您的姓名连接到聊天室并查看可聊天的用户的完整列表以及事件日志的功能。
<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>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/conversations/v0.13/twilio-conversations.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
<script src="app.js"></script>
的JavaScript
首先是第一件事。 确保用户使用兼容的WebRTC浏览器进行连接很重要。
if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia) {
tlog('You are using a browser that is not WebRTC compatible, please use Google Chrome or Mozilla Firefox', true);
}
我们正在使用一个名为tlog()的函数向用户发送状态消息。 如果发生错误，我们将HTML字符串发送到msg参数，并将e设置为true 。
function tlog(msg, e) {
if (e) {
$('.logs').append('<div class="log error">' + msg + '</div>');
} else {
$('.logs').append('<div class="log">' + msg + '</div>');
}
}
现在我们知道用户正在使用兼容的浏览器进行连接，我们将使用jQuery在用户准备好加入聊天时添加单击事件。 然后，我们将Ajax请求发送到服务器端token.php生成文件，并带有连接到聊天室的用户id 。
在此演示中，我们使用用户在文本字段中输入的名称。 收到令牌后，我们将其传递给Twilio.AccessManager来创建一个new Twilio.Conversations.Client ，它将使用Promise为我们提供一组事件侦听器。
$('#start').on('click', function() {
if ($('#id').val() == '') {
tlog('Please enter a name to join the chat', true);
} else {
id = $('#id').val().replace(/\s+/g, '');
$.ajax({
type: 'POST',
url: 'token.php',
data: {
id: $('#id').val()
},
dataType: "json",
success: function(data) {
/* We pass the provided access token to the accessManager */
var accessManager = new Twilio.AccessManager(data.token);
conversationsClient = new Twilio.Conversations.Client(accessManager);
conversationsClient.listen().then(clientConnected, function(e) {
tlog('Could not connect to Twilio: ' + e.message, true);
});
}
});
}
});
new Twilio.Conversations.Client收到成功的连接响应new Twilio.Conversations.Client ，我们将调用clientConnected()函数和firebaseConnect() 。 您需要从您的帐户添加Firebase网址以存储所有可用用户。 我们还将为Firebase添加一些事件侦听器，以跟踪用户何时连接到并离开聊天室。
function clientConnected() {
firebaseConnect();
$('#id, #start').hide();
$('#disconnect').fadeIn();
$('#status').css({ 'color': '#5E9F21' }).text('CONNECTED');
tlog('You have succussfully connected to this Twilio chat room as <strong>' + id + '</strong>.');
if (!lmedia) {
startConversation();
};
conversationInvite();
}
function firebaseConnect(){
var fburl = '...add your firebase url here...';
firebase = new Firebase(fburl + '/users');
var uid = firebase.push(id);
fid = uid.toString();
new Firebase(fid)
.onDisconnect()
.remove();
firebase.on('child_added', function(child) {
addParticipant(child);
});
firebase.on('child_removed', function(child) {
$('.' + child.val()).remove();
});
}
function addParticipant(child) {
if (child.val() != id) {
var markup = '<div class="user ' + child.val() + '"><span>'
+ child.val() + '</span><button class="b-connect" id="'
+ child.val() + '">Call Now</button></div>';
$('.users-list').append(markup);
}
}
现在就来了解WebRTC的魔力！ 通过调用new Twilio.Conversations.LocalMedia()并将流附加到HTML元素，我们可以访问用户的麦克风和摄像头。 请注意：您将需要授予对麦克风和摄像头的访问权限。
function startConversation() {
lmedia = new Twilio.Conversations.LocalMedia();
Twilio.Conversations.getUserMedia().then(function(mediaStream) {
lmedia.addStream(mediaStream);
lmedia.attach('#lstream');
}, function(e) {
tlog('We were unable to access your Camera and Microphone.');
});
}
接下来，我们为聊天室中其他用户的传入邀请添加事件侦听器。 我们添加了invite.accept().then(conversationStarted)以允许自动连接。 在您的应用程序中，您可能需要先提示另一个用户，然后再进行连接。 请注意：您将需要允许每个其他用户访问您的相机和麦克风。
function conversationInvite() {
conversationsClient.on('invite', function(invite) {
invite.accept().then(conversationStarted);
tlog('You have a incoming invite from: <strong>' + invite.from + '</strong>');
});
}
加入聊天后，您将在每个可在聊天室中聊天的用户旁边看到一个Call Now按钮。 单击按钮连接到用户。
我们会将当前的本地媒体流作为options.localMedia传递给我们邀请聊天的人。
$(document).on('click', '.b-connect', function() {
var user = $(this).attr('id');
var options = {};
options.localMedia = lmedia;
conversationsClient
.inviteToConversation(user, options)
.then(conversationStarted, function(error) {
tlog('We were unable to create the chat conversation with that user, try another online user.', true);
});
});
接受邀请后，我们将开始对话。
function conversationStarted(convo) {
conversation = convo;
tlog('We are waiting on your friend to connect...');
participantConnected();
participantDisconnected();
}
接下来，我们为所有连接到对话的participantConnected()添加一个带有事件侦听器的participantConnected()函数。 当其他用户加入时，我们使用participant.media.attach('#rstream')附加他们的媒体。
function participantConnected() {
conversation.on('participantConnected', function(participant) {
new Firebase(fid).remove();
participant.media.attach('#rstream');
tlog('You are connected with: <strong>' + participant.identity + '</strong>');
});
}
最后，我们为所有与参与者断开连接的参与者添加了一个事件侦听器，该participantDisconnected()在participantDisconnected()函数中。 它使我们能够跟踪所有断开连接并成功将用户从聊天室中删除。
function participantDisconnected() {
conversation.on('participantDisconnected', function(participant) {
if (!disconnected) {
var uid = firebase.push(id);
fid = uid.toString();
new Firebase(fid).onDisconnect().remove();
}
$('.' + participant.identity).remove();
tlog('<strong>' + participant.identity + '</strong> has disconnected from this chat.');
$('.users-list').empty();
if (firebase) {
firebase.once('child_added', function(child) {
addParticipant(child);
});
}
});
}
我们为用户提供了一种手动断开聊天室并重置为默认状态的方法。 我们从Firebase清除了用户的可用性，因此其他用户将无法连接，直到该用户重新联机。 接下来，我们停止向对话中流式传输媒体，并停止共享对麦克风和摄像头的访问。
$('#disconnect').on('click', function() {
new Firebase(fid).remove();
firebase.off();
firebase = null;
disconnected = true;
$('#disconnect').hide();
$('#start, #id').fadeIn();
$('#status').css({
'color': ''
}).text('DISCONNETED');
$('.users-list').empty();
stopConversation();
});
function stopConversation() {
if (conversation) {
conversation.disconnect();
conversationsClient = null;
conversation = null;
lmedia.stop();
lmedia = null;
tlog('You have successfully disconnected from this chat conversation, start another one now.');
} else {
lmedia.stop();
lmedia = null;
tlog('Please rejoin the chatroom to start a conversation.');
}
}
webrtc.tutorials。
如果您对其他PaaS提供商的其他教程感兴趣，那么Blacc Spot Media将启动一个名为webrtc.tutorials的新网站。 该网站还将提供提示和技巧，以增强使用WebRTC在您的应用程序中的通信。
结论
随着WebRTC优势和功能的发展，我们将看到它改变了我们看待通信的方式。 正如消息传递应用程序已在用户数量方面取代了传统的社交媒体网络一样，WebRTC将增强全球公司和组织可用的基本消息传递功能。 Twilio和Firebase使构建这样的实时通信应用程序变得容易且易于开发人员部署。 下一步是什么？ 当然要打造出很棒的东西！
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
