Webrtc实时通信的构建流程:PeerConnection对等通信的实现方式

2021-05-13 14:47:04 浏览数 (1)

webrtc是一个实时通讯技术,很简单的应用在web浏览器中应用实时通讯技术,包括音视频通话。在使用webrtc技术时,浏览器端都已经基本封装好,只要调用相应的api,就可实现简单的通话,其中一个主要对象就是RTCPeerConnection 支持音频和视频媒体数据通信。本文我们就分享一下一套完整的对等通信是如何实现的。

浏览器端

1、创建webrtc对等连接方法。

代码语言:javascript复制
let pc = new PTCPeerConnection({
iceServers: [{ urls: ’stun:stun.l.google.com:19302’ }]
})

2、通过浏览器api创建流(开启摄像头、桌面截屏和获取canvas流)

代码语言:javascript复制
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;这个是获取的摄像头流

3、再把摄像头的流添加到webrtc流的轨道。

代码语言:javascript复制
stream.getTracks.forEach(track => pc.addTrack(track))

4、以上步骤都创建好,下一步创建offer和answer把获取到的sdp通过服务器进行数据交换,再传递ICE信息。最后监听PTCPeerConnection里面的方法ontrack来获取到流。如果断开也可监听onconnectionstatechange方法来获取断开和错误的状态。

c 端

c 端比js端复杂太多,但也是大致流程都差不多,稍微比较复杂。 1、先创建一个对等连接的工厂

代码语言:javascript复制
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 */);

2、通过对等连接工程来创建一个对等连接的实例

代码语言:javascript复制
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);

3、获取视频和音频流,并添加到peer_connection_中AddTrack方法。

视频:

代码语言:javascript复制
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});

音频:

代码语言:javascript复制
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 });

4、也是发起端创建offer,远端创建answer来交换sdp信息,在监听OnIceCandidate方法,并传递ice,这样本地也远端都可以实时通信。

0 人点赞