WebRTC ,Telephony in your
browser
-Al a
Bangalore Telecommunications Pros Meetup
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
Remember this !!
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
Great Quality , free , p2p ,
Web Communication
D main 3 APIs
● MediaStream
● RTCPeerConnection
● RTCDataChannel
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
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);
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);
+ 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
What’s up with
WebRTC now ?
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 );
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 );
Audio API + more ...
var analyser = audioCtx.createAnalyser();
gainNode.connect(audioCtx.destination);
gainNode.gain.setValueAtTime(1,
audioCtx.currentTime);
Audio API + more ...
var splitter = ac.createChannelSplitter(2);
source.connect(splitter);
var panNode = audioCtx.createStereoPanner();
panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);
Musical Instrument Digital Interface (MIDI) protocol
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
Audio APIs in WebRTC and
Integration with Telecom
Endpoints
WebRTC to Telco High level Diagram
Audio in WebRTC
The best webrtc audio
code
Other Networks / DID
VOIP gateway
( opus to PCMU transcoding)
Voice Network Backend
External Carriers
WebRTC SDK
( OPUS)
Phone APP
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/
Plivo + WebRTC + Telecom
= Magic !!
Plivo’s
WebSDK
Demo
Issues around WebRTC ?!!
Issues around ICE and SSRC
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
Thank You .
Questions ??
Reach me at : @altanai

Plivo webrtc telephony in your browser