作者：Mozilla 激动地宣布，我们在 WebRTC 开发方面取得了重要的里程碑：Firefox 和 Chrome 之间的 WebRTC RTCPeerConnection 互操作性。这项成果的取得归功于开放 Web 社区以及 Mozilla 和 Google 工程师的密切合作。
RTCPeerConnection（也简称为 PeerConnection 或 PC）互操作性意味着开发者现在可以创建 Firefox WebRTC 应用程序，直接与 Chrome WebRTC 应用程序进行音视频通话，而无需安装第三方插件。由于此功能现在已内置于浏览器中，用户可以避免首次安装和插件错误的问题，开发者也可以更轻松、更普遍地部署他们的应用程序。
为了庆祝这一重要的里程碑，我们认为致电我们在 Google 的朋友并与他们进行讨论会很有趣。观看这段 Mozilla 首席创新官 Todd Simpson 与 Google 产品管理总监 Hugh Finnan 之间的 Firefox-Chrome 演示通话视频，并在他们的博客文章中阅读 Google 对这一重要时刻的看法。
这一里程碑建立在我们去年年底展示的与 Social API 集成的 WebRTC的早期演示的基础上。我们在那里展示了 DataChannels 的业界首个实现，DataChannels 是 WebRTC 的一个强大组件，可以与音视频聊天结合，允许用户共享他们电脑或设备上的几乎任何内容。只需将项目拖到视频聊天窗口中，即可发送度假照片、难忘的视频、新闻故事链接等。敬请期待更多相关信息。
WebRTC 是一个在 W3C 和 IETF 标准组织联合定义的开放标准，其目的是为所有用户设备提供一个通用的平台，以便实时通信和共享音频、视频和数据。这是朝着互操作性和真正的、开放的、实时的 Web 通信愿景迈出的第一步。
发布者：
Serge Lachapelle，Chrome 产品经理和 Maire Reavy，Firefox 媒体产品负责人
开始在 Firefox 中使用 RTCPeerConnection 进行开发
对于尚未在 Firefox 中尝试 RTCPeerConnection 的 JavaScript 开发者（因为这对我们来说是一个全新的功能），您可以通过将 media.peerconnection.enabled 首选项设置为“true”来使用最新的 Firefox Nightly 进行尝试（浏览到 about:config 并在首选项列表中搜索 media.peerconnection.enabled 首选项）。以下是示例应用程序中的一段代码，展示了如何在 Firefox 中使用 RTCPeerConnection 发起、接受和结束 WebRTC 通话
function initiateCall(user) {
document.getElementById("main").style.display = "none";
document.getElementById("call").style.display = "block";
// Here's where you ask user permission to access the camera and microphone streams
navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
document.getElementById("localvideo").mozSrcObject = stream;
document.getElementById("localvideo").play();
document.getElementById("localvideo").muted = true;
// Here's where you set up a Firefox PeerConnection
var pc = new mozRTCPeerConnection();
pc.addStream(stream);
pc.onaddstream = function(obj) {
log("Got onaddstream of type " + obj.type);
document.getElementById("remotevideo").mozSrcObject = obj.stream;
document.getElementById("remotevideo").play();
document.getElementById("dialing").style.display = "none";
document.getElementById("hangup").style.display = "block";
};
pc.createOffer(function(offer) {
log("Created offer" + JSON.stringify(offer));
pc.setLocalDescription(offer, function() {
// Send offer to remote end.
log("setLocalDescription, sending to remote");
peerc = pc;
jQuery.post(
"offer", {
to: user,
from: document.getElementById("user").innerHTML,
offer: JSON.stringify(offer)
},
function() { console.log("Offer sent!"); }
).error(error);
}, error);
}, error);
}, error);
}
function acceptCall(offer) {
log("Incoming call with offer " + offer);
document.getElementById("main").style.display = "none";
document.getElementById("call").style.display = "block";
// Here's where you ask user permission to access the camera and microphone streams
navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
document.getElementById("localvideo").mozSrcObject = stream;
document.getElementById("localvideo").play();
document.getElementById("localvideo").muted = true;
// Here's where you set up a Firefox PeerConnection
var pc = new mozRTCPeerConnection();
pc.addStream(stream);
pc.onaddstream = function(obj) {
document.getElementById("remotevideo").mozSrcObject = obj.stream;
document.getElementById("remotevideo").play();
document.getElementById("dialing").style.display = "none";
document.getElementById("hangup").style.display = "block";
};
pc.setRemoteDescription(JSON.parse(offer.offer), function() {
log("setRemoteDescription, creating answer");
pc.createAnswer(function(answer) {
pc.setLocalDescription(answer, function() {
// Send answer to remote end.
log("created Answer and setLocalDescription " + JSON.stringify(answer));
peerc = pc;
jQuery.post(
"answer", {
to: offer.from,
from: offer.to,
answer: JSON.stringify(answer)
},
function() { console.log("Answer sent!"); }
).error(error);
}, error);
}, error);
}, error);
}, error);
}
function endCall() {
log("Ending call");
document.getElementById("call").style.display = "none";
document.getElementById("main").style.display = "block";
document.getElementById("localvideo").mozSrcObject.stop();
document.getElementById("localvideo").mozSrcObject = null;
document.getElementById("remotevideo").mozSrcObject = null;
peerc.close();
peerc = null;
}
您会注意到 Firefox 仍然将 RTCPeerConnection API 调用加上前缀 mozRTCPeerConnection，因为标准委员会尚未完成对它的定义。Chrome 将其加上前缀 webkitRTCPeerConnection。一旦标准委员会完成其工作，我们将删除前缀并使用相同的 API，但与此同时，您需要支持这两种前缀，以便您的应用程序在这两种浏览器中都能正常工作。
自己尝试互操作性
对于那些渴望尝试互操作性的人，这里有“在家尝试”的说明和信息。
这是 Firefox 和 Chrome 的第一个 PeerConnection 互操作版本。与大多数早期版本一样，仍然存在需要修复的错误，并且并非所有网络环境都支持互操作性。但这对于这项新的 Web 功能以及 Web 本身来说都是向前迈出的重要一步。我们感谢标准组织和 WebRTC 社区的每一位贡献者。虽然还有很多工作要做，但我们希望您同意 Web 将变得更加出色。
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 的技术推广者和编辑。发表演讲和博客，内容涉及 HTML5、JavaScript 和开放 Web。Robert 是 HTML5 和开放 Web 的坚定信徒，自 1999 年以来一直在瑞典和纽约市从事 Web 前端开发工作。他还定期在 http://robertnyman.com 上撰写博客，并且热爱旅行和结识新朋友。
128 条评论