1.
WebRTC ,Telephony in your
browser
-Al a
Bangalore Telecommunications Pros Meetup

2.
I am Altanai
7+ yrs of Exp in VOIP
Current : Core Voice Engineer @ Plivo
Communication Pvt. Ltd.
Author Of WebRTC Integrator’s Guide
@altanai
telecom.altanai.com

3.
Remember this !!

4.
The problem
Many plugins to make VOIP calls ( flash , java )
Proprietary Codecs
High Carrier Cost for phone call
No interoperability between existing VOIP players
Steep learning curve for developers
@altanai

5.
Great Quality , free , p2p ,
Web Communication

6.
D main 3 APIs
● MediaStream
● RTCPeerConnection
● RTCDataChannel

7.
Media Stream
navigator.getUserMedia({ audio : true , video :true},
successCallback, errorCallback);
Outputs audio and / or Video Stream
Can have many tracks
Asks for permissions
Constraint can contain attributes like size , farmerate etc

8.
RTC Peer Connection
Signal processing
Codec handling
Peer to peer communication
SRTP
Bandwidth management
pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStream;
pc.addStream(localStream);
pc.createOffer(gotOffer);

9.
RTC Data Channel
Send any arbitrary data Peer to peer
DTLS
Free from Server side inspection or third party monitoring
Low latency
Independent of other networks as long as peer is connected
sendChannel = pc.createDataChannel("sendDataChannel",{reliable: false});
sendChannel.send(data);

10.
+ Other Features
TURN support
Echo cancellation
MediaStream API
mediaConstraints
Multiple Streams
Simulcast
Screen Sharing
Stream re-broadcasting
getStats API
ORTC API
H.264 video
VP8 video
Solid interoperability
srcObject in media element
Promise based getUserMedia
Promise based PeerConnection API
WebAudio Integration
MediaRecorder Integration
Canvas Integration
Test support

11.
What’s up with
WebRTC now ?

12.
Audio API + more ...
var audioContext = new AudioContext();
// 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 );

13.
Audio API + more ...
var audioContext = new AudioContext();
// 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 );

14.
Audio API + more ...
var analyser = audioCtx.createAnalyser();
gainNode.connect(audioCtx.destination);
gainNode.gain.setValueAtTime(1,
audioCtx.currentTime);

15.
Audio API + more ...
var splitter = ac.createChannelSplitter(2);
source.connect(splitter);
var panNode = audioCtx.createStereoPanner();
panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);

16.
Musical Instrument Digital Interface (MIDI) protocol

17.
Audio API + more ..
AudioBuffer
AudioBufferSourceNode
AudioContext
AudioDestinationNode
AudioListener
AudioNode
AudioProcessingEvent
BaseAudioContext
BiquadFilterNode
ChannelMergerNode
ChannelSplitterNode
ConstantSourceNode
ConvolverNode
DelayNode
DynamicsCompressorNode
IIRFilterNode
MediaElementAudioSourceNode
MediaStreamAudioDestinationNode
MediaStreamAudioSourceNode
OfflineAudioCompletionEvent
OfflineAudioContext
OscillatorNode
PannerNode
PeriodicWave
StereoPannerNode

18.
Audio APIs in WebRTC and
Integration with Telecom
Endpoints

19.
WebRTC to Telco High level Diagram

20.
Audio in WebRTC
The best webrtc audio
code

21.
Other Networks / DID
VOIP gateway
( opus to PCMU transcoding)
Voice Network Backend
External Carriers
WebRTC SDK
( OPUS)
Phone APP

22.
demos
● https://webrtc.github.io/samples/src/c
ontent/getusermedia/volume/
● http://webaudiodemos.appspot.com/
● https://experiments.withgoogle.com/se
arch?q=webrtc
● https://mypurecloud.github.io/ember-a
udio-visualizer/
● http://webaudiodemos.appspot.com/

23.
Plivo + WebRTC + Telecom
= Magic !!

24.
Plivo’s
WebSDK
Demo

25.
Issues around WebRTC ?!!

26.
Issues around ICE and SSRC

27.
References
www.plivo.com
https://www.w3.org/TR/webrtc/
https://w3c.github.io/mediacapture-main/#defining-new-consumers-of-mediastreams-and-mediastreamtracks
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
https://cs.chromium.org/chromium/src/content/renderer/media/media_stream_audio_processor.cc
http://webaudio.github.io/web-midi-api/
https://www.amazon.in/WebRTC-Integrators-Guide-Altanai-ebook/dp/B00P6DY994

28.
Thank You .
Questions ??
Reach me at : @altanai