WebRTC 移动端支持
WebRTC 移动端支持
在移动世界中,WebRTC的支持与桌面上的支持级别不同。移动设备有自己的方式,所以WebRTC也根据移动平台上有所不同。
在开发桌面应用程序时,我们优先考虑使用chrome、Firefox或opera。通常,您只需要一个浏览器,而不关心桌面的硬件。
在移动世界中,目前有三种可能的WebRTC模式:
安装APP
第三方浏览器
系统自带浏览器
Android
到目前为止,安卓平台上面主流的浏览器Chrome,firefox,Opera均支持了WebRTC,其他浏览器暂时还不支持.
iOS
不幸的是,IOS现在不支持WebRTC。虽然MAC操作系统中Firefox、opera或chrome支持WebRTC,但IOS目前还不支持。
现在,您的WebRTC程序不会在直接在苹果的移动设备上工作。但是爱立信公司开发的一款浏览器支持WebRTC。你可以在 http://www.openwebrtc.org/bowser/查看详情.
它是在IOS上唯一支持WebRTC应用程序的比较友好方式,另一种方法是自己开发本机应用程序。
Windows Phones
微软在移动平台上不支持WebRTC,但他们已经正式确认,他们将在未来的ie版本中实现ortc(对象实时通信)。他们不打算支持webrtc1.0。他们把他们的ortc标记为webrtc1.1 ,虽然它只是一个社区建议,而不是官方标准。
Blackberry
黑莓在任何方面都不支持WebRTC应用程序。
本地浏览器使用WebRTC
使用WebRTC最方便的是使用操作系统的自带浏览器。在这种情况下,用户不需要额外的设置,浏览器已经预设。
现在,只有4.0或更高版本的Android设备提供此功能。苹果仍然没有任何支持WebRTC的迹象。因此,safari用户无法使用WebRTC程序。微软也没有在windows phone8中支持它。
第三方浏览器使用WebRTC
Bowser暂时是为IOS设备支持WebRTC功能的唯一浏览器, Android平台有很多选择,比如Chrome,firefox,Opera。其它平台暂不支持WebRTC。
本地APP
正如您看到的,WebRTC在移动世界中没有获得广泛的支持。因此,可能的解决方案之一是开发利用WebRTC API的APP。当然这不是最好的选择,因为WebRTC的主要功能是跨平台解决方案。总之,在某些情况下,这是唯一的方法,因为APP可以利用浏览器不支持的特定于设备的功能或特性。
为移动设备和桌面设备构建视频流
getUserMedia的第一个参数预设一个键和值的对象告诉浏览器如何处理数据流,你可以在https://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03查看详情,可以设置视频尺寸、帧速率和其他可选参数。
支持移动设备是最大的困难之一,因为移动设备具有有限的屏幕空间和资源。您可能希望移动设备仅捕获480x320分辨率或更小的视频流以节省电源和带宽。在浏览器中使用用户代理字符串是一种测试用户是否在移动设备上的好方法。让我们看看一个例子。创建index. html文件:
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8" /> </head> <body> <video autoplay></video> <script src = "client.js"></script> </body> </html>
接着创建client.js文件
//constraints for desktop browser
var desktopConstraints = {
video: {
mandatory: {
maxWidth:800,
maxHeight:600
}
},
audio: true
};
//constraints for mobile browser
var mobileConstraints = {
video: {
mandatory: {
maxWidth: 480,
maxHeight: 320,
}
},
audio: true
}
//if a user is using a mobile browser
if(/Android|iPhone|iPad/i.test(navigator.userAgent)) {
var constraints = mobileConstraints;
} else {
var constraints = desktopConstraints;
}
function hasUserMedia() {
//check if the browser supports the WebRTC
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
//enabling video and audio channels
navigator.getUserMedia(constraints, function (stream) {
var video = document.querySelector('video');
//inserting our stream to the video tag
video.src = window.URL.createObjectURL(stream);
}, function (err) {});
} else {
alert("WebRTC is not supported");
}使用static命令运行web服务器,打开页面。你应该看到它是800x600。然后使用chrome工具在移动视窗中打开此页面,并检查分辨率,此时应该是480x320.
.