Add Introduction to Elixir WebRTC tutorial

[LVala]

No description provided.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.16%. Comparing base (370e737) to head (edf33cc).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #136   +/-   ##
=======================================
  Coverage   86.16%   86.16%           
=======================================
  Files          36       36           
  Lines        1887     1887           
=======================================
  Hits         1626     1626           
  Misses        261      261           

Files	Coverage Δ
lib/ex_webrtc/rtp_receiver.ex	66.66% <ø> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 370e737...edf33cc. Read the comment docs.

[LVala]

I've noticed a bunch of issues with the diagrams (like invalid names: PCW1 and I probably should also number the PeerConnection nodes). Gonna fix them.

[sgfn]

Splendid job -- overall, a very comprehensive and well-written tutorial 🥇

[mickel8]

The content is a pure gold! 🥇 But I think we need to polish the structure a little bit.

Right now the guide is pretty long, it has a lot of side notes, acronyms and information.
This makes it pretty hard to get to the end.
Instead, I would create two categories: Basic and Advanced.

Basic would introduce someone into the WebRTC world in a painless way.
I would focus on explaining how to establish Browser to Elixir connection, receive and consume data.
After reading this section, someone will be able to receive audio and video from a web browser, decode it and play with it.
In other words, they will understand the very basic flow on a very high level.
We can also include here Sending WebRTC data and Modyfing session chapters.

What is important, try not to go into too much detail, avoid using acronyms like SDP, write in a very general way.
E.g. instead of writing: "Finally, we have to create and set an offer - an SDP description containing information about added tracks, codecs, used IP addresses and ports, encryption fingerprints, and other stuff."
I would write "After adding a track we have to generate an offer that we will propose to the remote peer. This offer contains information on how many tracks we are willing to send, which codecs we would like to use and so on. The other side will send us its answer where it either accepts or rejects our offer"
We can mention that offer is in an SDP format in some kind of admonition and link there section "Deeper dive into SDP".
The same with ICE. Just write that ICE candidates "are IP addresses that the remote peer can try to use to connect with us. Sometime we might need additional server that will help us discover all of our possible IP addresses. You can read more in Deeper dive into ICE"

Everything elese move to the advanced :D

I would see the final structure as:

Basic:

1. What is WebRTC and where it can be used
   • emphasize that WebRTC is P2P and target latency is < 200ms
2. Negotiating the connection
   • only focus on receiving tracks and explainging the flow i.e. getUserMedia, addTrack, createOffer etc. We can explain how to send tracks in 4.
   • mention ontrack notification
   • mention that modyfing session requires renegotiation and link sec 5.
3. Consuming WebRTC data
   • explain that we have to:
     • collect multiple RTP packets
     • (optionally) reorder and wait for rtx??
     • unpack them to get a single compressed video frame
     • (maybe create some diagram showing how RTP packets encapsulate video frames)
     • decode video frame
     • now we can feed it to e.g. Elixir Nx
4. Sending WebRTC data
   • explain that PC is bidirectional
   • show how to addd tracks and send data
5. Modyfing session (adding new track, removing old tracks)
   • explain negotiation needed notification, when it is fired and what we are supposed to do

Advanced:

1. Forwarding WebRTC data between two PeerConnections
2. Deeper dive into ICE
3. Deeper dive into RTP/RTCP
4. Deeper dive into SDP
5. Mastering Transceivers
6. Configuring PeerConneciton?
7. Debugging WebRTC
   • WebRTC internals
   • ExWebRTC Dashboard
   • Running Browser with logs
   • Runing Browser with RTP DUMP option

Thoughts?

We can of course do this in multiple PRs

cc @sgfn