WebRTC

Jerry Hong

Agenda

  • What is WebRTC?

  • WebRTC quick start

    • getUserMedia

    • peerConnection

      • NATs

      • ICE (STUN, TURN)

  • Summary

What is WebRTC?

WebRTC is a specification that is being standardized at the W3C and the IETF

 

WebRTC offers real time communication natively from a browser

WebRTC is Free !

WebRTC is opensource !

WebRTC is a Technology, not a solution

WebRTC quick start 

web server

offer

answer

3 Main APIs

getUserMedia Get access camera, microphone, or screen of device
peerConnection Dose everything.  encode and decode media, send it over the network, take care of Nat traversal, etc
dataChannel peer to peer data exchange

getUserMedia

https://github.com/webrtc/adapter

import { getUserMedia, attachMediaStream } from 'webrtc-adapter-test';

const localVideo = document.getElementById('localVideo');

getUserMedia({ 
	audio: true, 
	video: { 
		width: 1280, 
		height: 720 
	} 
}, stream => attachMediaStream(localVideo, stream), 
error => console.log(error));

Demo

peerConnection

Demo

Nat

Jerry laptop

192.168.1.2

Private IP

Public IP

192.168.1.1

140.123.175.91

12.11.2.23

192.168.1.2 to 12.11.2.23

140.123.175.91:42301 to 12.11.2.23

192.168.1.2 to 12.11.2.23

140.123.175.91:42301 to 12.11.2.23

192.168.1.2

140.123.175.91:42301

NAT table

STUN

TURN

Summary

WebRTC快速上手

By 洪名辰

WebRTC快速上手

WebRTC tutorial.

  • 719