我们先贡献这个句子代码，让大家进行测试，可以使用地址3360。
(访问密码：5496)
WebRTC旨在为web和移动开发人员提供使用简单API创建高清视频和音频通话的功能。
许多跨越所有行业的大大小小的公司，包括但不限于医疗保健、教育、客户服务、专业服务和社交媒体，都在利用 WebRTC 构建下一代应用程序。您可能已经使用了这项技术，甚至没有意识到它。如果您使用过 Facebook Messenger、WhatsApp 和/或 SnapChat 视频或语音功能，则您在不知不觉中使用 WebRTC 与您的家人和朋友交流。
快速启动开发
WebRTC 和其他类似的网络技术正在改变人们以各种方式进行交流和参与的方式。开发人员正在提供可轻松集成到任何应用程序中的增强通信。正如 Facebook、SnapChat、Tango 和 WhatsApp 等公司正在将实时音频和视频功能集成到他们的应用程序中一样，您也可以。
您可能会惊讶于这样做的过程是简单、快速且最具成本效益的。由于这项伟大的技术是由 Google 开源的，因此您现在可以免费构建您的应用程序，而无需支付许可费用。但是，如果您不熟悉 WebRTC 所需的一些常用组件，例如TURN / STUN、信令、多点会议单元 (MCU)等，那么构建自己的解决方案的道路可能会非常艰巨。
在我们的行业中，有超过 20 个平台即服务 (PaaS) 提供商提供 WebRTC 解决方案。在获得了多年使用这项技术的经验后，我们（在 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 是一种移动后端即服务，可为您的应用后端提供支持，包括数据存储、用户身份验证、静态托管等。如果您没有帐户，请注册一个免费帐户以开始使用。完成这些说明后，您将能够将此演示上传到服务器以运行实时视频聊天室。
演示
如果您将此演示部署到 Web 服务器，请务必注意，从 Chrome 47 开始，需要 SSL 加密域才能访问用户的麦克风和摄像头。解决此问题的一个简单方法是使用新的 Let's Encrypt服务安装免费证书。您可以在Digital Ocean找到一个关于如何在您的服务器上安装证书的好教程 。
PHP
为了访问 Twilio 平台，您必须首先在系统中进行身份验证。在这个例子中，我们在服务器端使用 PHP 来快速启动和运行。Twilio 具有广泛的服务器端库以满足您的偏好。进行身份验证后，我们会传递您从上面的 Twilio 帐户收到的帐户凭据。
// ADD TWILIO REQURIED LIBRARIES
require_once('twilio/Service;);
// 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=";></script>
<script src=";></script>
<script src=";></script>
<script src=";></script>
<script src="a;></script>
JavaScript
第一件事。确保用户使用兼容的 WebRTC 浏览器进行连接非常重要。
if (!naviga && !naviga) {
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 请求id，其中用户连接到聊天室。
在此演示中，我们使用用户在文本字段中输入的名称。在我们收到我们的令牌后，我们将它传递给Twilio.AccessManager以创建一个new Twilio.Conver，它将为我们提供一组使用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: '',
data: {
id: $('#id').val()
},
dataType: "json",
success: function(data) {
/* We pass the provided access token to the accessManager */
var accessManager = new Twilio.AccessManager);
conversationsClient = new Twilio.Conver(accessManager);
conver().then(clientConnected, function(e) {
tlog('Could not connect to Twilio: ' + e.message, true);
});
}
});
}
});
在我们收到来自 的成功连接响应后new Twilio.Conver，我们将调用该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 = (id);
fid = uid.toString();
new Firebase(fid)
.onDisconnect()
.remove();
('child_added', function(child) {
addParticipant(child);
});
('child_removed', function(child) {
$('.' + c()).remove();
});
}
function addParticipant(child) {
if (c() != id) {
var markup = '<div class="user ' + c() + '"><span>'
+ c() + '</span><button class="b-connect" id="'
+ c() + '">Call Now</button></div>';
$('.users-list').append(markup);
}
}
现在来看看 WebRTC 的魔力吧！new Twilio.Conver()我们通过调用流并将其附加到 HTML 元素来访问用户的麦克风和摄像头。请注意：您需要授予对麦克风和摄像头的访问权限。
function startConversation() {
lmedia = new Twilio.Conver();
Twilio.Conver().then(function(mediaStream) {
lmedia.addStream(mediaStream);
lmedia.attach('#lstream');
}, function(e) {
tlog('We were unable to access your Camera and Microphone.');
});
}
接下来，我们为聊天室中其他用户的传入邀请添加一个事件侦听器。我们添加invi().then(conversationStarted)了允许自动连接。在您的应用程序中，您可能希望在连接之前先提示其他用户。请注意：您需要允许每个其他用户访问您的摄像头和麦克风。
function conversationInvite() {
conver('invite', function(invite) {
invi().then(conversationStarted);
tlog('You have a incoming invite from: <strong>' + invi + '</strong>');
});
}
加入聊天后，您会Call Now在每个可在聊天室中聊天的用户旁边看到一个按钮。单击按钮以连接到用户。
我们会将我们当前的本地媒体流传递给我们o邀请聊天的人。
$(document).on('click', '.b-connect', function() {
var user = $(this).attr('id');
var options = {};
o = 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()为连接到对话的所有参与者添加带有事件侦听器的函数。当其他用户加入时，我们使用('#rstream').
function participantConnected() {
conver('participantConnected', function(participant) {
new Firebase(fid).remove();
('#rstream');
tlog('You are connected with: <strong>' + + '</strong>');
});
}
最后，我们在函数中为所有与对话断开连接的参与者添加一个事件监听器participantDisconnected()。它使我们能够跟踪任何断开连接并成功地将用户从聊天室中删除。
function participantDisconnected() {
conver('participantDisconnected', function(participant) {
if (!disconnected) {
var uid = (id);
fid = uid.toString();
new Firebase(fid).onDisconnect().remove();
}
$('.' + ).remove();
tlog('<strong>' + + '</strong> has disconnected from this chat.');
$('.users-list').empty();
if (firebase) {
ce('child_added', function(child) {
addParticipant(child);
});
}
});
}
我们为用户提供了一种手动断开聊天室连接并重置为默认状态的方法。我们会从 Firebase 清除用户的可用性，以便其他用户在用户重新联机之前无法连接。接下来，我们停止将媒体流传输到对话中，并停止共享对我们的麦克风和摄像头的访问。
$('#disconnect').on('click', function() {
new Firebase(fid).remove();
();
firebase = null;
disconnected = true;
$('#disconnect').hide();
$('#start, #id').fadeIn();
$('#status').css({
'color': ''
}).text('DISCONNETED');
$('.users-list').empty();
stopConversation();
});
function stopConversation() {
if (conversation) {
conver();
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.');
}
}
webr。
如果您对其他 PaaS 提供商的其他教程感兴趣，Blacc Spot Media 将推出一个名为webr的新网站。该站点还将提供提示和技巧，以使用 WebRTC 增强您的应用程序内的通信。
结论
随着 WebRTC 的优势和功能的发展，我们将看到它改变了我们看待通信的方式。正如消息应用程序在用户数量方面已经取代了传统的社交媒体网络一样，WebRTC 将增强全球公司和组织可用的基本消息传递功能。Twilio 和 Firebase 使开发人员可以轻松地构建像这样的实时通信应用程序部署。你的下一步是什么？当然要建立伟大的东西！
