WebKit博客中宣布了对High Sierra平台和iOS中Safari的WebRTC支持。现在,我们希望能够带领大家深入实现其中的一些细节,并且为您网站中的WebRTC应用带来一些建议。
Safari技术预览版34向开发者展示了一些选项,可以更容易的测试他们的WebRTC网站或将Safari集成到持续集成系统中,入口在开发>WebRTC子菜单中。
HTTPS域。由于在本地开发和测试时可能会很麻烦,因此可以通过在
"在不安全的站点上允许使用媒体摄像头"来旁路HTTPS限制。
getUserMedia的提示,可以通过Safari
...>网站面板将网站的摄像头和麦克风策略设置为允许。
ICE候选项限制
ICE候选项在WebRTC连接的早期阶段进行信息交换,以识别两个对等连接之间的所有可能的网络路径。为此,WebKit必须将每个对等连接的ICE候选项暴露给网站并共享它们。ICE候选项公开IP地址,特别是那些可以用于跟踪的主机IP地址。
WebRTC及媒体流API
RTCPeerConnection API以各种方式逐步改进。API从最初基于回调,到变为完全基于promise,从最初专注于将MediaStream,移动到专注于MediaStreamTrack。感谢WebRTC in WebKit团队的努力,RTCPeerConnection API的改进与这两个主要变化保持一致。
partial interface Navigator {
// Switch to navigator.mediaDevices.getUserMedia
void getUserMedia(MediaStreamConstraints constraints, NavigatorUserMediaSuccessCallback successCallback, NavigatorUserMediaErrorCallback errorCallback);
};
partial interface RTCPeerConnection {
// Switch to getSenders, and look at RTCRtpSender.track
sequence<MediaStream> getLocalStreams();
// Switch to getReceivers, and look at RTCRtpReceiver.track
sequence<MediaStream> getRemoteStreams();
// Switch to getSenders/getReceivers
MediaStream getStreamById(DOMString streamId);
// Switch to addTrack
void addStream(MediaStream stream);
// Switch to removeTrack
void removeStream(MediaStream stream);
// Listen to ontrack event
attribute EventHandler onaddstream;
// Update to promise-only version of createOffer
Promise<void> createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, optional RTCOfferOptions options);
// Update to promise-only version of setLocalDescription
Promise<void> setLocalDescription(RTCSessionDescriptionInit description, VoidFunction successCallback, RTCPeerConnectionErrorCallback failureCallback);
// Update to promise-only version of createAnswer
Promise<void> createAnswer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback);
// Update to promise-only version of setRemoteDescription
Promise<void> setRemoteDescription(RTCSessionDescriptionInit description, VoidFunction successCallback, RTCPeerConnectionErrorCallback failureCallback);
// Update to promise-only version of addIceCandidate
Promise<void> addIceCandidate((RTCIceCandidateInit or RTCIceCandidate) candidate, VoidFunction successCallback, RTCPeerConnectionErrorCallback failureCallback);
};
var pc = new RTCPeerConnection();
pc.addTransceiver('audio');
pc.addTransceiver('video');
var offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// send offer to the other party
...
var stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
var pc = new RTCPeerConnection();
var audioSender = pc.addTrack(stream.getAudioTracks()[0], stream);
var videoSender = pc.addTrack(stream.getVideoTracks()[0], stream);
var offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// send offer to the other party
...
videoSender.track.applyConstraints({width: 1280, height: 720});
videoSender.track.enabled = false;
videoSender.track.enabled = true;
renderWithEffects(video, canvas);
videoSender.replaceTrack(canvas.captureStream().getVideoTracks()[0]);
Safari允许用户完全控制网站对其摄像设备的访问权限。
navigator.mediaDevices.enumerateDevices
WebKit通过返回与实际可用设备集不一定对应的默认设备列表,来避免暴露这些附加信息。此外,根据规范,设备缺少标签。一旦访问权限被授予,即可获得完整的设备列表及其标签。
·如果网页已在捕获,则MediaStream支持的媒体将自动播放。
·如果网页已播放音频,则MediaStream支持的媒体将自动播放。但仍然需要用户手势来激活音频回放。
WebRTC是一个非常强大的特性,可以衍生许多应用程序。我们都知道,强大的力量带来了巨大的责任。设计WebRTC应用程序需要从一开始就考虑到效率。 CPU,内存和网络都可能严重影响用户体验。Web引擎和Web应用程序都应该解决此问题。在Web应用程序方面,已经有各种机制可供选择:选择正确的视频分辨率和帧速率,选择正确的视频编解码器配置文件,使用CVO,在源处将媒体轨静音,以及在客户端执行WebRTC统计数据的监视。