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 Slide

  2. David Vílchez


    @dvilchez
    BIENVENIDOS
    Agile galicia

    View Slide

  3. WEBRTC
    QUÉ ES?

    View Slide

  4. WEBRTC

    View Slide

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


    navigator.getUserMedia(constraints, function(stream) {


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


    }, errorCallback);

    View Slide

  6. 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 Slide

  7. 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 Slide

  8. WEBRTC
    SENDOFFER(….. )
    SENDANSWER(….. )

    View Slide

  9. WEBRTC
    SIGNALING

    View Slide

  10. WEBRTC
    P2P CON SERVIDORES

    View Slide

  11. WEBRTC
    P2P CON SERVIDORES

    View Slide

  12. View Slide

  13. WEBRTC
    NO USAR
    ▸ Video and audio streaming


    ▸ Comunicación asincrona

    View Slide

  14. View Slide

  15. GRACIAS

    View Slide