http://mozilla.com.cn/post/48456/
使用conversat.io，让WebRTC更简单
Felicia, +1146
英文原文翻译自：https://hacks.mozilla.org/2013/03/making-webrtc-simple-with-conversat-io/
WebRTC 的功能很强大，但似乎总是少了那么一点亲和力。上周我和我的同事在 &yet 上发布了几款工具，想要稍微修正一下WebRTC，并且试图让这些小工具真的能够使用。
为了展示这些工具，我们迅速创建了一款简单产品并将其命名为conversat.io，使用者可以创建免费的多方视频通话，而且无需申请账户或是安装扩展，只需使用浏览器中的URL即可。任何人都可以通过相同的URL加入这通视频电话。
conversat.io大致可以分为两种用途。其一就是作为一款易用的通讯工具，我们团队使用And Bang 来集体讨论一些工作事宜，只需要把某个链接拖进用户集体讨论的视频聊天室中，就可以一起加入讨论了。第二个用途就是可以展示SimpleWebRTC.js函数库，还有执行该函数库的小型信号服务器signalmaster。
(SimpleWebRTC和signalmaster，都已经在Github和MIT 上提供了授权的源代码。希望大家能帮助我们完善。）
浏览器支持
WebRTC目前只能用于Chrome stable和Firefox Nightlies（必须启动about:config中的media.peerconnection.enabled参数）中。我们也希望能够很快支持更多浏览器，特别是能够快点在智能手机和平板电脑上使用WebRTC。
亲和度和普及度
我相信，某一项新的网络技术是否能够普及，语气本身的简单和易用程度密不可分。我最初接触JS时，正是因为jQuery本身的亲和力，让我觉得自己一定能够创造出一些有趣的东西。
之所以爱上JavaScript，就是因为我用jQuery完成了：
|
1
|
$(
'#demo'
).slideDown();
|
接着就可以在我的屏幕上看到元素移动。其实那时候我什么都不懂。现在看来也许没什么，但就是这段简单的代码，给了我信心，让我觉得自己可以写出更加有趣的东西来。
Socket.io可以完成同样的任务，适合那些想要创建应用并需要将数据从服务器端推送给用户的开发者。
|
1
2
3
4
|
// server:
client.emit(
"something"
, {
some:
"data"
});
|
|
1
2
3
4
5
6
|
// client:
socket = io.connect();
socket.on(
"something"
,
function
(data) {
// here's my data!
console.log(data);
});
|
与其想着要如何设定BOSH、XMPP、长轮询(Long-polling)才能让浏览器送出数据，我现在只需要把消息送到浏览器中。事实上，如果我不想传送消息，我甚至不需要考虑序列化和反序列化。我只需在客户端和服务器之间无缝的来回传送简单的JavaScript对象即可。
我也听过某些“铁杆”的开发人员抱怨，像这种工具有可能会导致出现更多品质不佳的工具，然后又会有更多盲目跟随的开发人员完全不知道自己在做什么。这些东西根本就是垃圾！
简单易用的高亲和度工具，除了能让开发人员写出有趣的东西之外，也是当前网络能够如此成功又多样化的关键。
这种工具就像毒品一样，让工程师可以使用相关的技术来无休止的写代码。同时也让我们了解了很多概念，帮助我们来思考更多的可能性。无论开发人员最终是不是使用这些工具开发出应用，这背后的引导力量是不可忽视的。
WebRTC的潜力
我相信，WebRTC有潜力很大程度上影响我们沟通的方式。目前它已经在&yet上影响了我们团队。当然，我们仍然会使用Skype、Facetime、Google Hangouts等工具。但是只需在浏览器中打开一个链接就可以立刻加入一个对话，确实很简单和方便。
这项技术一旦在移动设备上被广泛使用，它将成为改变通讯游戏规则的搅局者。
挑战
当然，WebRTC还有很多瓶颈需要去突破，比如在实例化对等连接中浏览器的复杂性和差异性，产生和传送信号信息，向视频元素中附加媒体流。
即使上面的问题都解决了，也必须让两位使用者能够找到对方，让彼此之间能够直接传送信号信息或是将信息传送给想要连接的人。
SimpleWebRTC.js 是我们队客户端复杂性给出的解决办法，它可以解決Firefox和Chrome之间的API差异。
使用SimpleWebRTC
最简单的方法，就是包含SimpleWebRTC.js 脚本，为自己的本地视频提供一个容器。远端的视频容器可以参考这个：
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=
"localVideo"
></div>
<div id=
"remoteVideos"
></div>
</body>
</html>
|
然后可以初始化一个 webrtc 对象并且告诉它使用哪个容器：
|
1
2
3
4
5
6
7
8
9
10
|
var
webrtc =
new
WebRTC({
// the id of (or actual element) to hold "our" video
localVideoEl:
'localVideo'
,
// the id of or actual element that will hold remote videos
remoteVideosEl:
'remoteVideos'
,
// immediately ask for camera access
autoRequestMedia:
true
});
|
这时，如果你运行上面的代码，将会看到你的视频已开启，并且在你指定的容器中进行渲染。
下一步就是指定想要连线的人。
考虑到简单易用性，我们请两位使用者加入同一个聊天室，也就是“加入”同一个字符串。
这里为了展示，准备好后（意味着已经连接到信号服务器）我们就告诉webrtc加入到一个聊天室中。看下面这段代码：
|
1
2
3
4
5
|
// we have to wait until it's ready
webrtc.on('readyToCall
', function () {
// you can name it anything
webrtc.joinRoom('
your awesome room name');
});
|
用户一旦完成上面这些，就可以等待其他人的加入了。
如果你想在本地进行测试，可以选择在Firefox和Chrome中打开或是在Chrome中打开两个标签页。（火狐目前还不支持在两个标签页中接入本地媒体）
这时，你应该会自动连接上并且和自己进行对话。
这是我测试的结果：
更多原文内容，请见：https://hacks.mozilla.org/2013/03/making-webrtc-simple-with-conversat-io/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
