Git Product home page Git Product logo

ch.techstack.web.chat's Introduction

WebRTC - real-time video and screen-share

ch.techstack.web.chat

https://webrtc.org/

https://github.com/webrtc

https://webrtc.github.io/samples/

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API



  1. CLIENT1 creates RTCPeerConnection
    const rtcPeerConnection = new RTCPeerConnection({
        'iceServers': [
            {
                'urls': [
                    'stun:stun.l.google.com:19302',
                    'stun:stun.xten.com'
                ]
            }
        ]
    });
  1. Someone must getUserMedia() - CLIENT1/Init/Caller/Offerer
    // [...]
    if (navigator.mediaDevices.getUserMedia) {
        // const stream = await navigator.mediaDevices.getUserMedia(constraints);
        navigator.mediaDevices.getUserMedia(constraints)
            .then((stream) => {
                localVideo.srcObject = stream;

                stream.getTracks().forEach(track => {
                    rtcPeerConnection.addTrack(track, stream);
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }
  1. peerConnection needs STUN servers
    • we will need ICE candidates later
  2. CLIENT1 add localstream tracks to peerConnection
    • we need to associate CLIENT1 feed with peerConnection
  3. CLIENT1 creates an offer
    • needed peerConnection with tracks
    • offer = RTCSessionDescription
      1. SDP - codec/resolution information
      2. Type (offer)
  4. CLIENT1 hands offer to pc.setLocalDescription
  5. ICE candidates can now start coming in (ASYNC) SIGNALING (someone to help the browser find/talk to each)
  6. CLIENT1 emits offer
    • socket.io server holds it for the other browser
    • associate with CLIENT1 ~9. Once 7 happens, emit ICE c. up to signaling server
    • socket.io server holds it for the other browser
    • associate with CLIENT1 CLIENT1 and Signaling server wait.
    • wait for an answerer/CLIENT2/reciever
  7. CLIENT2 loads up the webpage with io.connect()
    • a new client is connected to signaling/socket.io server
  8. socket.io emit out the RTCSessionDesc to the new client
    • an offer to be sent!
  9. CLIENT2 runs getUserMedia()
  10. CLIENT2 creates a peerConnection()
    • pass STUN servers
  11. CLIENT2 adds localstream tracks to peerconnection
  12. CLIENT2 creates an answer (createAnswer());
    • createAnswer = RTCSessionDescription (sdp/type)
  13. CLIENT2 hands answer to pc.setLocalDescription
  14. Because CLIENT2 has the offer, CLIENT2 can hand the offer to pc.setRemoteDescription ~18. when setLocalDescription, start collecting ICE candidates (ASYNC) Signaling server has been waiting...
  15. CLIENT2 emit answer (RTCSessionDesc - sdp/type) up to signaling server ~20. CLIENT2 will listen for tracks/ICE from remote.
    • and is done.
    • waiting on ICE candidates
    • waiting on tracks
  16. signaling server listens for answer, emits CLIENT1 answer (RTCSessionDesc - sdp/type)
  17. CLIENT1 takes the answer and hands it to pc.setRemoteDesc ~23. CLIENT1 waits for ICE candidates and tracks

21 & 23 are waiting for ICE. Once ICE is exchanged, tracks will exchange


TURN-Server

docker run -d --network=host -v $(pwd)/turnserver.conf:/etc/coturn/turnserver.conf coturn/coturn
listening-port=3478
tls-listening-port=5349
fingerprint
lt-cred-mech
user=user1:pass1
syslog

ch.techstack.web.chat's People

Contributors

thoschu avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.