WebRTC简介

Three main tasks

• Acquiring audio and video
• Communicating audio and video
• Communicating arbitrary data

Three main JavaScript APIs

• MediaStream(aka getUserMedia)
• RTCPeerConnection
• RTCDataChannel

MediaStream

• Represents a stream of audio and/or video
• Can contain multiple 'tracks'
• Obtain a MediaStream with navigator.getUserMedia()
  image.png
  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);

Sample
http://www.simpl.info/gum
http://idevelop.github.io/ascii-camera/
http://www.shinydemos.com/facekat/
http://webcamtoy.com/app

constraints

• Controls the contents of the MediaStream
• Media type, resolution, frame rate

video: {
  mandatory: {
    minWidth: 640,
    minHeight: 360  
  },
  optional  [{
    minWidth: 1280,
    minHeight: 720
  }]
}

sample
https://simpl.info/getusermedia/constraints/

getUserMedia + Web Audio

// Success callback when requesting audio input stream
function gotStream(stream) {
  var audioContext = new webkitAudioContext();

  // Create an AudioNode from the stream
  var mediaStreamSource = audioContext.createMediaStreamSource(stream);

  // Connect it to the destination or any other node for processing!
  mediaStreamSource.connect(audioContext.destination);
}

navigator.webkitGetUserMedia({audio:true}, gotStream);

Make sure to enable Web Audio Input in about:flags!
Sample
http://www.webaudiodemos.appspot.com/AudioRecorder/index.html

gUM screencapture

var constraints = {
  video: {
    mandatory: {
      chromeMediaSource: 'screen'
    }  
  }
};

navigator.webkitGetUserMedia(constraints, gotStream);

Sample
https://html5-demos.appspot.com/static/getusermedia/screenshare.html

RTCPeerConnection

Audio and video communication between peers

RTCPeerConnection does a lot

• Signal processing
• Codec handling
• Peer to peer communication
• Security
• Bandwidth management
  image.png
  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);
}

Sample
http://www.simpl.info/pc

RTCDataChannel

Bidirectional communication of arbitrary data between peers

RTCDataChannel

• Same API as WebSockets
• Ultra-low latency
• Unreliable or reliable
• Secure

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", {reliabel: false});

document.querySelector("button#send").onclick = function () {
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

Sample
http://www.simpl.info/dc
http://www.sharefest.me/