What is WebRTC? WebRTC stands for Web Real Time Communication. From webrtc.org: "With WebRTC, you can add real-time communication capabilities to your application that works on top of an open standard. It supports video, voice, and generic data to be sent between peers, allowing developers to build powerful voice and video communication solutions" The API is actually not so big and complicated as it sounds. The MDN website is, as always, very complete . https://developer.mozilla.org/en-US/docs/Glossary/WebRTC We have 3 main parts: getUserMedia(): sends a signal to the browser to ask the user for permission and returns the "stream" of audio/video/data RTCPeerConnection: two participants are called peers, local and remote. Not necessarily physically remote, can be two browsers in the same computer. RTCDataChannel: two peers connect via a channel in a bidirectional way to transfer data. A peer can have up to 65,534 data channels (depends on the browser) In webrtc.org we can find many useful samples https://webrtc.github.io/samples/ Let's dissect a basic peer-to-peer connection. demo: https://webrtc.github.io/samples/src/content/peerconnection/pc1/ code: https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1 First, we will need two video elements, one to see the other person and another one to see ourselves: < = > video id "localVideo" playsinline autoplay muted </ > video < = > video id "remoteVideo" playsinline autoplay </ > video Then the controls to start, call and hangup: Start Call Hang Up < = > button id "startButton" </ > button < = > button id "callButton" </ > button < = > button id "hangupButton" </ > button Now we can start using the WebRTC API to handle all the peer-to-peer connection events. First we set some global variables, get GUI elements and add click handlers: startButton = .getElementById( ); callButton = .getElementById( ); hangupButton = .getElementById( );

startButton.addEventListener( , start);
callButton.addEventListener( , call);
hangupButton.addEventListener( , hangup); localVideo = .getElementById( ); remoteVideo = .getElementById( ); localStream; pc1; pc2; offerOptions = { : , : ,
}; const document "startButton" const document "callButton" const document "hangupButton" "click" "click" "click" const document "localVideo" const document "remoteVideo" let let let const offerToReceiveAudio 1 offerToReceiveVideo 1 When we click start, basically we want to ask the user for permission to use the camera and microphone with getUserMedia(): { { stream = navigator.mediaDevices.getUserMedia({ : , : ,
    });

    localVideo.srcObject = stream;
    localStream = stream;
  } (e) {
    alert( );
  }
} async ( ) function start try const await audio true video true catch `getUserMedia() error: ` ${e.name} When starting a call, we are going to establish a connection between two peers, adding each other ICECandidates, set local audio/video tracks, create a connection offer from peer 1 and create an answer from peer 2: { configuration = {};

  pc1 = RTCPeerConnection(configuration);
  pc1.addEventListener( , (e) => onIceCandidate(pc1, e));

  pc2 = RTCPeerConnection(configuration);
  pc2.addEventListener( , (e) => onIceCandidate(pc2, e));
  pc2.addEventListener( , gotRemoteStream);

  localStream.getTracks().forEach( pc1.addTrack(track, localStream)); { pc1.createOffer(offerOptions); onCreateOfferSuccess()
  } (e) {
    onCreateSessionDescriptionError(e);
  }
} { { pc2.createAnswer();
  } (e) {
    onCreateSessionDescriptionError(e);
  }
} { .log( );
} async ( ) function call const new "icecandidate" new "icecandidate" "track" ( ) => track try await await catch async ( ) function onCreateOfferSuccess try await catch ( ) function onCreateSessionDescriptionError error console `Failed to create session description: ` ${error.toString()} From the code above, we notice that we need an RTCIceCandidate, it represents a Internet Connectivity Establishment. It describes all under-the-hood logic needed for two peers to communicate, protocols, routing, error correction, etc. Here we will add the candidates on both sides: { pc === pc1 ? : ;
} { pc === pc1 ? pc2 : pc1;
} { { getOtherPc(pc).addIceCandidate(event.candidate);
  } (e) {
    onAddIceCandidateError(pc, e);
  }
} { .log( );
} ( ) function getName pc return "pc1" "pc2" ( ) function getOtherPc pc return async ( ) function onIceCandidate pc, event try await catch ( ) function onAddIceCandidateError pc, error console ` failed to add ICE Candidate: ` ${getName(pc)} ${error.toString()} After adding ICE candidates, we added a listener to the "track" event. We will add the event stream to the srcObject of the video element: { (remoteVideo.srcObject !== e.streams[ ]) {
    remoteVideo.srcObject = e.streams[ ];
  }
} ( ) function gotRemoteStream e if 0 0 This should give us video from both sides. Finally, to hangup a call, we close the peer connections and set them to null: {
  pc1.close();
  pc2.close();
  pc1 = ;
  pc2 = ;
} ( ) function hangup null null I hope I simplified enough the webrtc.org basic peer connection example https://github.com/webrtc/samples/tree/gh-pages/src/content/peerconnection/pc1 so you can start creating awesome video call applications. Of course for a production ready service, we will have to consider a lot more. Happy coding.

Understanding WebRTC

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

React forms with Formik and Unit Testing with react-testing-library

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

React forms with Formik and Unit Testing with react-testing-library

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps