WebRTC 现在不仅在 Firefox for Android 上可用,也在 Firefox 桌面版中可用!Firefox 24 for Android 现在默认支持 mozGetUserMedia、mozRTCPeerConnection 和 DataChannels。mozGetUserMedia 自 Firefox 20 桌面版本以来就已存在,mozPeerConnection 和 DataChannels 自 Firefox 22 桌面版本以来就已存在,我们很高兴 Android 现在加入桌面版本,支持这些酷炫的新功能!
你可以做什么
启用 WebRTC 后,开发者可以
- 直接使用 JavaScript 从 Firefox Android 捕获摄像头或麦克风流(我们知道开发者已经期待这个功能一段时间了!),
- 进行浏览器到浏览器的通话(音频和/或视频),你可以使用像 appspot.apprtc.com 这样的网站进行测试,
- 共享数据(中间没有服务器)以启用点对点应用程序(例如,文本聊天、游戏、尤其是通话时的图像共享)
我们迫不及待地想看到开发者想出的主意!
针对早期采用者和反馈
在这个阶段,我们的支持主要针对开发者和早期采用者,以便从他们那里获得反馈。工作组规范尚未完成,我们还有更多功能需要实现,还有质量改进需要进行。我们现在主要专注于使一对一(人对人)通话稳定 - 与多人通话相反,我们会稍后再专注于多人通话。我们欢迎您的测试和试验。请给我们反馈,提交错误报告,并开始基于这些新功能构建新应用程序。
如果您不确定从哪里开始,请先阅读一些已经发布的 关于 Hacks 的 WebRTC 文章。特别是,请查看 WebRTC 和早期 API、制作 Face to GIF 和 PeerSquared,以及 一款 AR 游戏(赢得了我们的 getUserMedia 开发者 Derby 比赛)和 WebRTC 实验和演示。
一个简单的视频帧捕获示例(以大约 15fps 的速度捕获新图像)
navigator.getUserMedia({video: true, audio: false}, yes, no);
video.src = URL.createObjectURL(stream);
setInterval(function () {
context.drawImage(video, 0,0, width,height);
frames.push(context.getImageData(0,0, width,height));
}, 67);
摘自 nightly-gupshup 上的“多人视频聊天”(你可以在 WebRTC 测试登陆页面 上尝试 - 完整代码在 GitHub 上)
function acceptCall(offer) {
log("Incoming call with offer " + offer);
navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
document.getElementById("localvideo").mozSrcObject = stream;
document.getElementById("localvideo").play();
document.getElementById("localvideo").muted = true;
var pc = new mozRTCPeerConnection();
pc.addStream(stream);
pc.onaddstream = function(obj) {
document.getElementById("remotevideo").mozSrcObject = obj.stream;
document.getElementById("remotevideo").play();
};
pc.setRemoteDescription(new mozRTCSessionDescription(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 initiateCall(user) {
navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
document.getElementById("localvideo").mozSrcObject = stream;
document.getElementById("localvideo").play();
document.getElementById("localvideo").muted = true;
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();
};
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);
}
在桌面版上运行的任何代码都应该在 Android 上运行。(啊,HTML5 的魅力!)。但是,你可能需要针对 Android 进行优化,因为它现在可能在更小的屏幕设备上使用,甚至可以旋转。
这仍然是一个 危险区域,尤其是对于移动设备而言。我们已经使用了一些主要的 WebRTC 网站测试了 Android 对一对一通话的支持,包括 talky.io、apprtc.appspot.com 和 codeshare.io。
已知问题
- 回声消除需要改进;对于通话,我们建议使用耳机 (Bug 916331)
- 有时会出现音频/视频同步问题或过多的音频延迟。我们在 Firefox 25 中已经有一个修复程序,可以改进延迟 (Bug 884365).
- 在某些设备上,会出现间歇性的视频捕获崩溃;我们正在积极调查 (Bug 902431).
- 低端设备或连接不良的设备在以良好的帧速率解码或发送更高分辨率的视频时可能会遇到问题。
请帮助我们将实时通信带入网络:构建您的应用程序,给我们反馈,报告错误,并帮助我们测试和开发。有了您的帮助、您的想法和您的热情,我们将把网络提升到一个全新的水平。
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 的技术布道者和编辑。发表关于 HTML5、JavaScript 和开放网络的演讲和博客。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直在从事网络前端开发 - 在瑞典和纽约市。他经常在 http://robertnyman.com 上发博客,喜欢旅行和结识新朋友。
13 条评论