Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebRTC

David
September 25, 2022

 WebRTC

David

September 25, 2022
Tweet

More Decks by David

Other Decks in Programming

Transcript

  1. WEBRTC
    REAL TIME COMMUNICATION EN EL
    NAVEGADOR.

    View full-size slide

  2. David Vílchez


    @dvilchez
    BIENVENIDOS
    Agile galicia

    View full-size slide

  3. WEBRTC
    QUÉ ES?

    View full-size slide

  4. WEBRTC
    GETUSERMEDIA (MEDIASTREAM)
    var constraints = {audio: true, video: true};


    navigator.getUserMedia(constraints, function(stream) {


    video.src = window.URL.createObjectURL(stream);


    }, errorCallback);

    View full-size slide

  5. WEBRTC
    PEERCONNECTION
    alice = new RTCPeerConnection(null, null)


    alice.add(stream)


    alice.createOffer().then(offer => {


    return alice.setLocalDescription(offer)


    .then( () => {


    sendOffer(“bob”, offer);


    });


    }).catch(errorHandler);


    View full-size slide

  6. WEBRTC
    PEERCONNECTION
    bob = new RTCPeerConnection(null, null)


    bob.setRemoteDescriptor(offer)


    .then(() => {


    bob.createAnswer().then((answer) => {


    return bob.setLocalDescription(answer)


    .then(() => {


    sendAnswer(“alice”, answer);


    });


    }).catch(errorHandler);


    View full-size slide

  7. WEBRTC
    SENDOFFER(….. )
    SENDANSWER(….. )

    View full-size slide

  8. WEBRTC
    SIGNALING

    View full-size slide

  9. WEBRTC
    P2P CON SERVIDORES

    View full-size slide

  10. WEBRTC
    P2P CON SERVIDORES

    View full-size slide

  11. WEBRTC
    NO USAR
    ▸ Video and audio streaming


    ▸ Comunicación asincrona

    View full-size slide