WebRTC初探.pdfVIP

WebRTC 初探 Skyrookie M$有Skype, 那Google/Mozilla有啥 ？ 1.M$ 有 Windows + IE + Skype 2.Google / Mozilla有甚麼? G: Chrome OS + Chrome M: Firefox OS + Firefox 還缺一個武器 WebRTC audio/video/data WebRTC architecture WebRTC: 3 Parts(JavaScript APIs) 1.MediaStream MediaStreamTracks getUserMedia(): Webcam/Mic 2.RTCPeerConnection Handshaking/AV Calls Protocol undefined 3.RTCDataChannel Data Transfer(p2p) MediaStream ● Represents a stream of audio and/or video ● Can contain multiple tracks ● Obtain a MediaStream with navigator.getUserMedia() MediaStream aka getUserMedia var constraints = {video: true}; function successCallback(stream) { var video = document.querySelector(video); video.src = window.URL.createObjectURL(stream); } function errorCallback(error) { console.log(navigator.getUserMedia error: , error); } navigator.getUserMedia(constraints, successCallback, errorCallback); Constraints ● Controls the contents of the MediaStream ● Media type, resolution, frame rate RTCPeerConnection sample pc = new RTCPeerConnection (null); pc.onaddstream = gotRemoteStream; pc.addStream(localStream); pc.createOffer(gotOffer); function gotOffer(desc) { pc.setLocalDescription(desc); sendOffer(desc); } function gotAnswer(desc) { pc.setRemoteDescription(desc); } function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream); } RTCDataChannel API var pc = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]}); pc.ondatachannel = function(event) { receiveChannel = event.channel; receiveChannel.onmessage = function(event){ document.querySelector(div#receive).innerHTML = event.data; }; }; sendChannel = pc.createDataChannel(sendDataChannel, {reliable: false}); document.querySelector(button#send).onclick = function (){ var data = document.querySel