PROFESSIONAL AV WITH
WEBRTC
Dan Jenkins


Nimble Ape Ltd / Broadcaster VC Ltd
EMAIL dan@nimblea.pe SOCIAL
WEBSITE broadcaster.vc
twitter.com/BroadcasterVC


twitter.com/nimbleapeltd


twitter.com/commconuk
DAN JENKINS
WEBSITE nimblea.pe
WEBSITE commcon.xyz
@dan_jenkins
QUICK ANNOUNCEMENT…
ANNOUNCING COMMCON
VIRTUAL 2021
6 December - 10 December 2021
CFP OPEN NOW


WWW.PAPERCALL.IO/COMMCON-VIRTUAL-2021
LOOKING FOR SPONSORS


- CONTACT ME :)
PROFESSIONAL AV WITH
WEBRTC
The tips and tricks


10 of them for your enjoyment.
WANT TO KNOW ALL MY
SECRETS?
ALL THAT INTELLECTUAL
PROPERTY… JUST GIVING IT
AWAY!
SPOILER
It’s not rocket science.


Keep it Simple Stupid - KISS.
PRIORITISE AUDIO (USUALLY)
>
Using WebRTC statistics you’re able to see if a stream is losing packets, jitter increasing, available bandwidth dropping…
always prioritise audio over video.


If your users are deaf then obviously this rule doesn’t apply and you’ll want to do the exact opposite.
You can control what your inputs do by using constraints during getUserMedia()


Of course you should also handle input selection using enumerateDevices()
GET A HANDLE ON THE FLAGS
Get control over your media.


autoGainControl


echoCancellation


noiseSuppression


channelCount
By using hardware encode/decode capabilities you’ll end up with a cooler device that can last longer before needing to be
charged due to using less CPU.
RESPECT DEVICE CAPABILITIES
Recent iPads can do VP9 hardware
decode on iPadOS 15


iPhones/iPads can do H264 hardware
encode/decode, along with some android
phones.


Some android phones can’t do H264 at all
OPEN SOURCE SFUS
They’re far more flexible than a paid
for black box.


Make changes you need… contribute
them back :)
PROPER VIDEO SPATIAL LAYERS
Ultimately a better “simulcast”


AV1 and VP9 support SVC - sending
multiple layers of the same thing at
varying qualities. This is the “proper”
way to handle differing bandwidth
availability going forward.
NEWER VIDEO CODECS
Make use of AV1 / VP9 but ignore
H265


Safari now supports VP9 in Safari 15 -
so should we be using VP9
everywhere now?


VP8 & H264 are now ancient in
comparison
OPUS RED/TRIALS IN CHROME
Not enabled by default in Chrome


I think only supported by Jitsi but a PR
open on Janus-Gateway


Send extra audio packets for redundancy


Keep an eye on trials in Chrome!
Antirrhinum opus red
Using web audio and the microphone stream, you can playback a noise and see if the mic picks it up.


Using Chrome’s network API you can find out what kind of connection the user is on.
FORCE PARTICULAR USAGE
Don’t be afraid of forcing your
application to work a particular way.


For example… making people use
headphones… don’t allow using wifi.
It’s all possible via Web API’s now.
Subspace & now Cloudflare are offering TURN networks powered by their anycast network ingress geographical locations and
private routing. Meaning you get off the “bad” public internet as soon as possible so you get less jitter, packet loss etc etc etc
GET OFF THE PUBLIC INTERNET ASAP
WebRTC is Peer to Peer…


That doesn’t mean you need to go P2P
all the time.


Sometimes its better to get onto a TURN
network ASAP
WHIP is a means of offering a WebRTC stream to a service via a HTTP request and getting the answer via the response.


NDI - Network Device Interface (what a generic name for something so Media centric) is a standard for getting real time media
over a network in raw quality into a video mixer.
WEBRTC EGRESS
Ultimately you need to get your
media into a broadcast system…
how?


WHIP?


NDI?
DON’T OVER THINK IT.
EMBRACE THE SIMPLE IDEAS
EMBRACE NEW ADDITIONS
BROADCASTER.VC USES SOME
OF THESE IDEAS BUT NOT ALL.
THANKS!


DISCUSS
@dan_jenkins

Professional AV with WebRTC

  • 1.
    PROFESSIONAL AV WITH WEBRTC DanJenkins Nimble Ape Ltd / Broadcaster VC Ltd
  • 2.
    EMAIL [email protected] SOCIAL WEBSITEbroadcaster.vc twitter.com/BroadcasterVC twitter.com/nimbleapeltd twitter.com/commconuk DAN JENKINS WEBSITE nimblea.pe WEBSITE commcon.xyz @dan_jenkins
  • 3.
  • 4.
    ANNOUNCING COMMCON VIRTUAL 2021 6December - 10 December 2021
  • 5.
  • 6.
  • 7.
    PROFESSIONAL AV WITH WEBRTC Thetips and tricks 
 10 of them for your enjoyment.
  • 8.
    WANT TO KNOWALL MY SECRETS?
  • 9.
  • 10.
    SPOILER It’s not rocketscience. Keep it Simple Stupid - KISS.
  • 11.
    PRIORITISE AUDIO (USUALLY) > UsingWebRTC statistics you’re able to see if a stream is losing packets, jitter increasing, available bandwidth dropping… always prioritise audio over video. If your users are deaf then obviously this rule doesn’t apply and you’ll want to do the exact opposite.
  • 12.
    You can controlwhat your inputs do by using constraints during getUserMedia() Of course you should also handle input selection using enumerateDevices() GET A HANDLE ON THE FLAGS Get control over your media. autoGainControl echoCancellation noiseSuppression channelCount
  • 13.
    By using hardwareencode/decode capabilities you’ll end up with a cooler device that can last longer before needing to be charged due to using less CPU. RESPECT DEVICE CAPABILITIES Recent iPads can do VP9 hardware decode on iPadOS 15 iPhones/iPads can do H264 hardware encode/decode, along with some android phones. Some android phones can’t do H264 at all
  • 14.
    OPEN SOURCE SFUS They’refar more flexible than a paid for black box. Make changes you need… contribute them back :)
  • 15.
    PROPER VIDEO SPATIALLAYERS Ultimately a better “simulcast” AV1 and VP9 support SVC - sending multiple layers of the same thing at varying qualities. This is the “proper” way to handle differing bandwidth availability going forward.
  • 16.
    NEWER VIDEO CODECS Makeuse of AV1 / VP9 but ignore H265 Safari now supports VP9 in Safari 15 - so should we be using VP9 everywhere now? VP8 & H264 are now ancient in comparison
  • 17.
    OPUS RED/TRIALS INCHROME Not enabled by default in Chrome I think only supported by Jitsi but a PR open on Janus-Gateway Send extra audio packets for redundancy Keep an eye on trials in Chrome! Antirrhinum opus red
  • 18.
    Using web audioand the microphone stream, you can playback a noise and see if the mic picks it up. Using Chrome’s network API you can find out what kind of connection the user is on. FORCE PARTICULAR USAGE Don’t be afraid of forcing your application to work a particular way. For example… making people use headphones… don’t allow using wifi. It’s all possible via Web API’s now.
  • 19.
    Subspace & nowCloudflare are offering TURN networks powered by their anycast network ingress geographical locations and private routing. Meaning you get off the “bad” public internet as soon as possible so you get less jitter, packet loss etc etc etc GET OFF THE PUBLIC INTERNET ASAP WebRTC is Peer to Peer… That doesn’t mean you need to go P2P all the time. Sometimes its better to get onto a TURN network ASAP
  • 20.
    WHIP is ameans of offering a WebRTC stream to a service via a HTTP request and getting the answer via the response. NDI - Network Device Interface (what a generic name for something so Media centric) is a standard for getting real time media over a network in raw quality into a video mixer. WEBRTC EGRESS Ultimately you need to get your media into a broadcast system… how? WHIP? NDI?
  • 21.
  • 22.
  • 23.
  • 24.
    BROADCASTER.VC USES SOME OFTHESE IDEAS BUT NOT ALL.
  • 25.