Webrtc is a real-time communication technology, very simple application in the Web browser real-time communication technology, including audio and video calls. In the use of weBRTC technology, the browser side has been basically encapsulated, as long as the corresponding API call, you can achieve a simple call, one of the main object is RTCPeerConnection support audio and video media data communication. In this article we will share how a complete set of peer-to-peer communication is implemented.

The browser

1. Create a webrTC peer connection method.

Let the PC = new PTCPeerConnection ({iceServers: [{urls: stun:stun.l.google.com: '19302'}]})Copy the code

2. Create streams via browser API (open camera, desktop screenshot, and Canvas stream)

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; This is the stream of cameras capturedCopy the code

3. Add the camera stream to the webrTC stream track.

stream.getTracks.forEach(track => pc.addTrack(track))
Copy the code

4. After all the above steps have been created, the next step is to create offer and Answer, exchange the obtained SDP data through the server, and then transfer the ICE information. Finally, listen to the method ontrack in PTCPeerConnection to get the stream. If disconnected, you can also listen to the onConnectionStatechange method to get disconnected and error status.

C + + side

C++ side is much more complex than js side, but the general process is similar, slightly more complex. 1. Create a factory for peer connections

peer_connection_factory_ = webrtc::CreatePeerConnectionFactory(
      nullptr /* network_thread */, nullptr /* worker_thread */,
      nullptr /* signaling_thread */, nullptr /* default_adm */,
      webrtc::CreateBuiltinAudioEncoderFactory(),
      webrtc::CreateBuiltinAudioDecoderFactory(),
      webrtc::CreateBuiltinVideoEncoderFactory(),
      webrtc::CreateBuiltinVideoDecoderFactory(), nullptr /* audio_mixer */,
      nullptr /* audio_processing */);
Copy the code

2. Create an instance of a peer connection using the peer connection project

webrtc::PeerConnectionInterface::RTCConfiguration config;
  config.sdp_semantics = webrtc::SdpSemantics::kUnifiedPlan;
  config.enable_dtls_srtp = dtls;
  webrtc::PeerConnectionInterface::IceServer server;
  server.uri = GetPeerConnectionString();
  config.servers.push_back(server);

  peer_connection_ = peer_connection_factory_->CreatePeerConnection(
      config, nullptr, nullptr, this);
Copy the code

3. Get the video and audio streams and add them to the peer_Connection_ AddTrack method.

Video:

rtc::scoped_refptr<CapturerTrackSource> video_device =
      CapturerTrackSource::Create();
  if (video_device) {
    rtc::scoped_refptr<webrtc::VideoTrackInterface> video_track_(
        peer_connection_factory_->CreateVideoTrack(kVideoLabel, video_device));
auto result_or_error2 = peer_connection_->AddTrack(video_track_, {kStreamId});
Copy the code

Audio:

rtc::scoped_refptr<webrtc::AudioTrackInterface> audio_track(
	  peer_connection_factory_->CreateAudioTrack(
		  kAudioLabel, peer_connection_factory_->CreateAudioSource(
			  cricket::AudioOptions())));
  auto result_or_error = peer_connection_->AddTrack(audio_track, { kStreamId });
Copy the code

4, is also the originator to create offer, remote create answer to exchange SDP information, in the OnIceCandidate method, and pass ICE, so that the local and remote can communicate in real time.