WebRTC中最简单loopback摄像头&麦克风的例子

peerconnection_client本地回放原理


默认的client已经集成了本地回放代码,但是要想实现该功能,需要做少许修改。


默认的点击界面上的"connect"按钮是连接到另一台peer,其最终执行的函数为Conductor::StartLogin。
现在我们想要连接到本地,所以需要将该函数修改为:
void Conductor::StartLogin(const std::string& server, int port) {
  InitializePeerConnection();
  ReinitializePeerConnectionForLoopback();
  return;


  // old
  if (client_->is_connected())
    return;
  server_ = server;
  client_->Connect(server, port, GetPeerName());
}


//
InitializePeerConnection做了这么几个工作:
1. 创建peerconnection工厂实例
2. 创建PeerConnection
3. 添加流
这里需要注意的是调用AddStreams的时候,会调用回调Conductor::OnAddStream,在该回调最终会回调到UIThreadCallback里面,并将摄像头输入信号拷贝一份到RemoteRenderer里面。
代码如下:
void Conductor::UIThreadCallback(int msg_id, void* data)
{
// ...
  case NEW_STREAM_ADDED: {
    webrtc::MediaStreamInterface* stream =
      reinterpret_cast<webrtc::MediaStreamInterface*>(
      data);
    webrtc::VideoTrackVector tracks = stream->GetVideoTracks();
    // Only render the first track.
    if (!tracks.empty()) {
      webrtc::VideoTrackInterface* track = tracks[0];
      main_wnd_->StartRemoteRenderer(track);
    }
    stream->Release();
    break;
  }
// ...
}


而ReinitializePeerConnectionForLoopback会创建一个Offer,作为PeerConnection的提供者。
代码如下:
bool Conductor::ReinitializePeerConnectionForLoopback() {
 // ...
 peer_connection_->CreateOffer(this, NULL);
 // ...

}

调用CreateOffer会调用到Conductor::OnSuccess函数,在这里会根据loopback_的值设定耳机回放麦克风内容。



这样就完成了远端和本地播放的是同一个视频。
并且我将回放本地摄像头的代码简化了。

有需要的可以来这里下载












Vue.js是一个用于构建用户界面的JavaScript框架,WebRTC是一项实现实时通信的技术。在Vue.js使用WebRTC可以实现即时音视频通信的功能。 下面是一个简单的Vue.js和WebRTC的示例: 首先,需要在Vue.js引入WebRTC的库,可以使用npm或者CDN进行引入。 然后,在Vue.js的组件创建两个video标签,用于展示本地摄像头的视频和远程摄像头的视频。 在Vue.js的data定义本地视频流和远程视频流的变量。在mounted钩子函数,使用getUserMedia函数获取本地摄像头的视频流,并把它赋值给本地视频流的变量。 使用RTCPeerConnection函数创建一个WebRTC的连接对象,并设置iceServers属性为ICE服务器的配置。通过addTrack()方法获取本地视频流的轨道,并通过createOffer()方法创建一个Offer,在成功的回调函数设置本地连接的本地描述符,并发送给远程连接。 在远程连接接收到本地连接的本地描述符后,使用setRemoteDescription()方法设置远程连接的远程描述符。 通过ontrack事件监听远程连接的轨道的到达,并把它赋值给远程视频流的变量。 最后,通过Vue.js的模板语法绑定本地视频流和远程视频流到video标签上。 通过以上步骤,我们可以在Vue.js实现一个简单WebRTC的示例,实现即时音视频通信的功能。需要注意的是,在实际应用需要处理一些异常情况,并进行一些额外的操作,如添加一些样式来优化用户界面等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值