safari 10 开始支持 webRTC


2015年 9月 份,  safari 10 终于开始支持 WebRTC 了,  值得庆祝啊,  H5 的一个重要功能终于获得了 Apple 的支持,  尽管迟了点, 还是值得欢呼的!



http://webrtcbydralex.com/index.php/2015/08/29/webrtc-in-safari/

2015/08/29

This morning I tweeted about apple finally adding support to safari in webkit, and I have been flooded by questions ever since, so I thought I’d write a post.



WebRTC和WebKit

WebRTC是基于浏览器的实时通信接口,主要支持通过浏览器进行点对点的音频以及视频通信。WebRTC规范由W3CIETF共同制定。通过这些API,Web开发者可以通过标准的JavaScript API在网页中嵌入视频、音频通信功能。

WebKit是一个开源的浏览器引擎,它由WebCore排版引擎、JSCore JavaScript引擎和各种平台移植代码组成。WebKit目前缺乏对WebRTC标准的支持,因此开发者构建了webrtcinwebkit.org网站,开始在WebKit上加入对WebRTC的支持。最初,该项目在WebKit的GTK移植中使用OpenWebRTC增加对WebRTC支持,后续的支持,将会逐渐放入到WebCore中,这样基于WebKit的所有移植环境就能方便的使用。同时,该项目未来还将接入更多的WebRTC实现后段,比如webrtc.org等。

这些工作会使苹果公司更容易的在Safari上实现WebRTC功能。

苹果公司做了什么?

WebKit只是一个浏览器引擎,每个使用它的浏览器,都是一个移植版本(port)。webrtcinwebkit项目,最早在WebKit的GTK移植上进行了测试,在7月的时候,Linux版浏览器实现了对getUserMedia接口的支持。

针对不同浏览器针对WebRTC协议栈的实现,可以参见这个幻灯片。作为背景知识,它介绍了不同浏览器如何将WebRTC实现融合到自己的架构中去。

对于苹果公司,mac平台上的Safari和iOS平台上的Safari是独立的WebKit移植版本。它们没法直接使用之前为GTK移植版本上使用的WebRTC接入代码。因此苹果公司需要单独为这两个移植版本实现WebRTC的接入。

截至8月底,通过的git仓库的提交记录的筛选,苹果公司的主要改动有:

  • 针对mac和iOS平台上的改动
    • /platform/mediastream/mac
    • /platform/mac-mavericks/
    • /platform/mac-yosemite/
  • 针对AVFoundation接口的修改(AVVideoCaptureSource.h)
  • 针对苹果平台构建文件的修改(WebCore.xcodeproj/project.pbxproj)

从改动来看,目前苹果已经实现了对GetUserMedia和MediaStream接口在mac和iOS两个平台上的支持。进而支持了对音频、视频设备的列举和选择,支持视频、音频流作为audio和video两个标签的输入来源,支持视频抓取等等功能。



WebRTC是一个支持网页浏览器进行实时语音对话或视频对话的API。在Safari浏览器中使用WebRTC替换摄像头获取到的流,通常需要以下几个步骤: 1. 获取用户媒体设备的权限,即获取摄像头的访问权限。这通常使用`navigator.mediaDevices.getUserMedia`方法实现。 2. 创建一个媒体流,并从中获取视频轨道。在这个步骤中,你可以通过`getUserMedia`获取到的流中选择特定的视频轨道。 3. 将获取到的视频轨道替换到已有的视频元素的srcObject中,或者使用MediaStream API来动态替换流中的视频轨道。 以下是一个简单的示例代码: ```javascript // 请求用户媒体权限,并获取视频流 navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { // 获取视频元素 var videoElement = document.querySelector('video'); // 将获取到的流赋值给视频元素的srcObject videoElement.srcObject = stream; }) .catch(function(error) { console.error("无法访问摄像头", error); }); // 假设我们有一个新的流newStream,我们想要替换当前视频元素中的流 function replaceStream(newStream) { var videoElement = document.querySelector('video'); // 检查视频元素是否有srcObject属性(在一些旧版浏览器中可能没有) if ("srcObject" in videoElement) { videoElement.srcObject = newStream; } else { // 旧版浏览器的兼容写法 videoElement.src = window.URL.createObjectURL(newStream); } // 确保视频元素重新开始播放 videoElement.play().catch(function(error) { console.error("视频播放失败", error); }); } ``` 在这个例子中,`replaceStream`函数可以用来替换视频元素的媒体流。你只需要提供一个新的`MediaStream`对象即可。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值