本文将详细介绍如何利用 WebRTC 技术实现 P2P 音视频通话，并提供了一个跨平台的方案，包括：基于 socket.io 和 Node.js 实现的服务端，以及 JavaScript 和 Android 客户端。让我们一起来探讨如何搭建这个系统，以及如何编写代码吧。
由于 server 、js、android 代码还在整理中，预计还需要 2-3 天时间。地址:github.com/yangkun1992…
下面是 PC 与 IOS 在不同网络环境下的效果图(WiFi <->移动网络)：
我们借助上一篇信令服务的流程图，来实现一个 nodejs 信令服务器
我们先设计一个信令
join: 当前用户和远端用户加入到房间中的信令
leave: 当前用户和远端用户离开房间的信令
message: 交换双方的 SDP、ICE 信令
首先，我们需要搭建一个 Node.js 服务端，用于处理信令交换。在这里，我们将使用 socket.io 库作为通信协议，借助 http、https、fs 等组件。实现一个简单的 Node.js 服务端实例：
create server.js 下面就是信令服务的核心代码
var log4js = require('log4js');
var http = require('http');
var https = require('https');
var fs = require('fs');
var socketIo = require('socket.io');
var express = require('express');
var serveIndex = require('serve-index');
var USERCOUNT = 3;
...
//http server
var http_server = http.createServer(app);
http_server.listen(80, '0.0.0.0');
var options = {
key : fs.readFileSync('./cert/xxx.key'),
cert: fs.readFileSync('./cert/xxx.pem')
}
//https server
var https_server = https.createServer(options, app);
var io = socketIo.listen(https_server);
io.sockets.on('connection', (socket)=> {
socket.on('message', (room, data)=>{
socket.to(room).emit('message',room, data);//发送给当前房间的其它客户端
});
socket.on('join', (room)=>{
socket.join(room);
var myRoom = io.sockets.adapter.rooms[room];
var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;
logger.debug('the user number of room is: ' + users);
if(users < USERCOUNT){
socket.emit('joined', room, socket.id); //发送给自己，相当于回调
if(users > 1){
socket.to(room).emit('otherjoin', room, socket.id); //发送给当前房间的其它客户端
}
}else{
socket.leave(room);
socket.emit('full', room, socket.id);
}
});
socket.on('leave', (room)=>{
var myRoom = io.sockets.adapter.rooms[room];
var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;
logger.debug('the user number of room is: ' + (users-1));
socket.to(room).emit('bye', room, socket.id);
socket.emit('leaved', room, socket.id);
});
});
https_server.listen(443, '0.0.0.0');要运行上面的 server.js 信令服务器，您需要按照以下步骤进行安装和运行：
npm install express socket.io fs http httpsnode server.js由于网络环境的影响我们需要搭建一个 sturn/turn 服务器，以便提升 P2P 的成功率，下面是一个粗略的搭建方式，但是也够用了。
在终端中输入以下命令，使用 yum 包管理器安装 Coturn：
sudo yum install coturn找到并编辑 Coturn 的配置文件 /etc/coturn/turnserver.conf，根据您的需求修改以下配置项：
# 配置监听的端口号
listening-port=3478
min-port=49152
max-port=65535
#配置域名
realm=xxx.com
#允许使用 TURN/STUN 服务的用户的凭据
user=123456:123456
cert=/path/to/xxx.pem
pkey=/path/to/xxx.pem
# 配置日志文件路径
log-file=/root/log/turnserver.log在终端中输入以下命令，启动 Coturn 服务：
sudo systemctl start coturn
sudo systemctl stop coturn
sudo systemctl restart coturn
sudo systemctl status coturn正如 trickle-ice 网站所说: 如果你测试一个 STUN 服务器，你能收集到一个类型为“srflx”的候选者，它就可以工作。如果你测试一个 TURN 服务器，你能收集到一个类型为“relay”的候选人，它就会工作.
由此上图 sturn 和 turn 候选者地址都能成功连接。
C++音视频学习资料免费获取方法：关注音视频开发T哥，点击「链接」即可免费获取2023年最新C++音视频开发进阶独家免费学习大礼包！
WebRTC 是一种基于 Web 技术的实时通信解决方案，可用于在浏览器中实现P2P音视频通话。当然，现在基本上所有上层平台都支持了。在 WebRTC 中，双方通信通过 ICE 协议进行连接，通过 SDP 协议交换媒体信息，通过 DTLS 协议进行加密，通过 SRTP 协议进行媒体传输。
下面，我们将为你介绍如何使用 WebRTC 在浏览器和 Android 中实现 P2P 音视频通话。
我们按照上面信令的流程来实现:
WebRTC 支持从设备摄像头和麦克风获取视频和音频流。使用 JavaScript 的getUserMedia API，您可以请求用户授权，从摄像头和麦克风获取本地媒体流，并将其添加到一个MediaStream对象中。
function startCall(){
if(!navigator.mediaDevices ||
!navigator.mediaDevices.getUserMedia){
console.error('the getUserMedia is not supported!');
return;
}else {
var constraints = {
video: true, //传输视频
audio: true //传输音频
}
navigator.mediaDevices.getUserMedia(constraints)
.then(getMediaStream)//打开成功的回调
.catch(handleError);//打开失败
}
}function connect(){
//连接信令服务器
socket = io.connect();
//加入成功的通知
socket.on('joined', (roomid, id) => {
...
});
//远端加入
socket.on('otherjoin', (roomid) => {
...
});
//房间满了
socket.on('full', (roomid, id) => {
...
});
//接收自己离开房间的回调
socket.on('leaved', (roomid, id) => {
...
});
//收到对方挂断的消息
socket.on('bye', (room, id) => {
...
});
//收到服务断开的消息
socket.on('disconnect', (socket) => {
...
});
//收消息，用于交换 SDP 和 ICE 消息等
socket.on('message', (roomid, data) => {
...
});
//发送 join 消息到信令服务器并加入到 123456 房间中
socket.emit('join', 123456);
}当收到自己加入房间成功的消息后，连接到远程对等方，我们就需要创建一个RTCPeerConnection对象，并将本地媒体流添加到其中。然后，您需要创建一个RTCDataChannel对象，用于在对等方之间传输数据。
var pcConfig = {
'iceServers': [{
'urls': 'turn:xxx:3478',
'credential': "1234",
'username': "1234"
}]
};
pc = new RTCPeerConnection(pcConfig);
//当前 icecandida 数据
pc.onicecandidate = (e)=>{
...
}
//datachannel 传输通道
pc.ondatachannel = e=> {
...
}
// 添加远端的媒体流到 当对方加入到房间中，我们需要把当前 UserA 的 SDP 信息告诉 UserB 用户，使用如下代码
var offerOptions = {//同时接收远端的音、视频数据
offerToRecieveAudio: 1,
offerToRecieveVideo: 1
}
pc.createOffer(offerOptions)
.then(getOffer)//创建成功的回调
.catch(handleOfferError);
function getOffer(desc){
//设置 UserA SDP 信息
pc.setLocalDescription(desc);
offerdesc = desc;
//将 usera 的 SDP 发送到信令服务器，信令服务器再根据 roomid 进行转发
sendMessage(roomid, offerdesc);
}当 UserB 收到 UserA 发来的 offer 消息，我们需要设置 UserA 的 SDP 并且设置当前的 SDP 然后再讲自己的 SDP 发送给 UserA,以进行媒体协商, 如下代码:
//1. 当收到 UserA OFFER 消息，设置 SDP
pc.setRemoteDescription(new RTCSessionDescription(data));
//2. 然后创建 answer 消息
pc.createAnswer()
.then(getAnswer)
.catch(handleAnswerError);
//3. 当创建成功后，拿到 UserB 自己的 SDP 消息并设置当前的 SDP 信息，最后再讲 SDP 消息发给信令再转发给 roomid 房间中的客户端
function getAnswer(desc){
pc.setLocalDescription(desc);
optBw.disabled = false;
//send answer sdp
sendMessage(roomid, desc);
}当我们收到 UserB 发来的 answer sdp 消息后告诉底层
pc.setRemoteDescription(new RTCSessionDescription(data));SDP 协商完后，UserA / UserB 交换 ice 消息，用于 nat 和转发媒体数据，如果都在局域网其实可以省略这一步
//user A / UserB 收到 onicecandidate 回调然后将 candidate 发送给 UserB
pc.onicecandidate = (e)=>{
if(e.candidate) {
sendMessage(roomid, {
type: 'candidate',
label:event.candidate.sdpMLineIndex,
id:event.candidate.sdpMid,
candidate: event.candidate.candidate
});
}else{
console.log('this is the end candidate');
}
}
//当 UserB / UserA 接收到 UserA / UserB 的candidate 后进行添加
function addIcecandida(data){
var candidate = new RTCIceCandidate({
sdpMLineIndex: data.label,
candidate: data.candidate
});
pc.addIceCandidate(candidate)
.then(()=>{
console.log('Successed to add ice candidate');
})
.catch(err=>{
console.error(err);
});
}通过如上核心步骤代码，你已经完成了一个基于 WebRTC JS 版的跨平台 P2P 音视频通话系统。当然，这里展示的代码只是简化版示例，完整版的代码可以点击文末简介处有说明。
上面我们实现了 服务端和跨平台的 JS 端，最后我们实现一个 Android 端，毕竟最开始我就是搞 Android 的。
对于Android客户端，您可以使用 Google 提供的 WebRTC 库。如下，当前也可以直接依赖 java/c++ 源码。当前我们就是直接依赖的 java/c++ 源码
依赖 wertc sdk 方式，在build.gradle文件中添加依赖项：
implementation 'org.webrtc:google-webrtc:1.0.+'依赖 wertc 源码 方式，在build.gradle文件中添加如下设置：
externalNativeBuild {
cmake {
version "3.10.2"
path 'CMakeLists.txt'
}
}没错，我们通过编写 cmake 直接依赖的 c++ 源码。好了，依赖方式就不再多说了，可以直接去看项目中的 build.gradle 文件即可。
Android 上的实现步骤流程与 JS 几乎一样，我们来看一下如何实现吧。
这里我们直接通过 Camera2 来实现相机数据的采集
private VideoCapturer createVideoCapture() {
final VideoCapturer videoCapturer;
videoCapturer = createCameraCapturer(new Camera2Enumerator(this));
return videoCapturer;
}
//设置本地预览窗口
mLocalSurfaceView.init(mRootEglBase.getEglBaseContext(), null);
mLocalSurfaceView.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FILL);
mLocalSurfaceView.setMirror(true);
mLocalSurfaceView.setEnableHardwareScaler(false /* enabled */);
//设置远端预览窗口
mRemoteSurfaceView.init(mRootEglBase.getEglBaseContext(), null);
mRemoteSurfaceView.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FILL);
mRemoteSurfaceView.setMirror(true);
mRemoteSurfaceView.setEnableHardwareScaler(true /* enabled */);
mRemoteSurfaceView.setZOrderMediaOverlay(true);
callStartedTimeMs = System.currentTimeMillis();
//创建 factory， pc是从factory里获得的
createPeerConnectionFactory();
private void createPeerConnectionFactory() {
final String fieldTrials = getFieldTrials(mPeerConnectionParameters);
executor.execute(() -> {
Log.d(Constants.P2PTAG, "Initialize WebRTC. Field trials: " + fieldTrials);
PeerConnectionFactory.initialize(
PeerConnectionFactory.InitializationOptions.builder(mContext)
.setFieldTrials(fieldTrials)
.setEnableInternalTracer(true)
.createInitializationOptions());
});
executor.execute(() -> {
createPeerConnectionFactoryInternal();
});
} public void connectToRoom(RoomConnectionParameters parameters, ISignalEventListener signalEventListener) {
mRoomConnectParameters = parameters;
executor.execute(() -> {
if (mISignalClient != null) {
try {
mISignalClient.connect(parameters.roomUrl, new ISignalEventListener() {
@Override
public void OnConnecting() {
Log.i(Constants.P2PTAG, "OnConnecting");
...
}
@Override
public void OnConnected() {
Log.i(Constants.P2PTAG, "OnConnected");
Log.i(Constants.P2PTAG, "join:" + parameters.roomId);
mISignalClient.join(parameters.roomId);
...
}
@Override
public void OnDisconnected() {
if (signalEventListener != null) {
signalEventListener.OnConnecting();
}
}
@Override
public void OnUserJoined(String roomName, String userId, boolean isInitiator) {
if (signalEventListener != null) {
signalEventListener.OnUserJoined(roomName, userId, isInitiator);
}
Log.i(Constants.P2PTAG, "joined:" + roomName + "-" + userId + "-" + isInitiator);
Log.i(Constants.P2PTAG, "createPeerConnection");
...
}
@Override
public void OnUserLeaved(String roomName, String userId) {
...
}
@Override
public void OnRemoteUserJoined(String roomName, String userId) {
Log.i(Constants.P2PTAG, "createOffer " + roomName + "-" + userId);
...
}
@Override
public void OnRemoteUserLeaved(String roomName, String userId) {
...
}
@Override
public void OnRoomFull(String roomName, String userId) {
...
}
@Override
public void OnMessage(JSONObject message) {
...
}
});
} catch (Exception e) {
Log.e(TAG, e.getMessage());
}
}
});
}当收到自己加入房间成功的消息后，连接到远程对等方，我们就需要创建一个PeerConnection对象，并将本地媒体流添加到其中。然后，您需要创建一个DataChannel对象，用于在对等方之间传输数据。
简要代码如下：
//当连接成功并且进入到房间中执行
private void createPeerConnection() {
executor.execute(() -> {
try {
createMediaConstraintsInternal();
createPeerConnectionInternal();
Log.i(Constants.P2PTAG, "createPeerConnection Succeed");
} catch (Exception e) {
Log.e(TAG, "Failed to create peer connection: " + e.getMessage());
throw e;
}
});
}
private void createMediaConstraintsInternal() {
// Create video constraints if video call is enabled.
...
// Create audio constraints.
mAudioConstraints = new MediaConstraints();
// added for audio performance measurements
if (mPeerConnectionParameters.noAudioProcessing) {
Log.d(TAG, "Disabling audio processing");
mAudioConstraints.mandatory.add(
new MediaConstraints.KeyValuePair(AUDIO_ECHO_CANCELLATION_CONSTRAINT, "false"));
mAudioConstraints.mandatory.add(
new MediaConstraints.KeyValuePair(AUDIO_AUTO_GAIN_CONTROL_CONSTRAINT, "false"));
mAudioConstraints.mandatory.add(
new MediaConstraints.KeyValuePair(AUDIO_HIGH_PASS_FILTER_CONSTRAINT, "false"));
mAudioConstraints.mandatory.add(
new MediaConstraints.KeyValuePair(AUDIO_NOISE_SUPPRESSION_CONSTRAINT, "false"));
}
// Create SDP constraints.
mSdpMediaConstraints = new MediaConstraints();
mSdpMediaConstraints.mandatory.add(
new MediaConstraints.KeyValuePair("OfferToReceiveAudio", "true"));
mSdpMediaConstraints.mandatory.add(new MediaConstraints.KeyValuePair(
"OfferToReceiveVideo", Boolean.toString(isVideoCallEnabled())));
}
private void createPeerConnectionInternal() {
if (mPeerConnectionFactory == null) {
Log.e(TAG, "Peerconnection factory is not created");
return;
}
Log.d(TAG, "Create peer connection.");
queuedRemoteCandidates = new ArrayList<>();
List iceServers = new ArrayList<>();
iceServers.add(PeerConnection.IceServer
.builder("turn:xxx:3478")
.setPassword("xxx")
.setUsername("xxx")
.createIceServer());
PeerConnection.RTCConfiguration rtcConfig =
new PeerConnection.RTCConfiguration(iceServers);
// TCP candidates are only useful when connecting to a server that supports
// ICE-TCP.
rtcConfig.tcpCandidatePolicy = PeerConnection.TcpCandidatePolicy.DISABLED;
rtcConfig.bundlePolicy = PeerConnection.BundlePolicy.MAXBUNDLE;
rtcConfig.rtcpMuxPolicy = PeerConnection.RtcpMuxPolicy.REQUIRE;
rtcConfig.continualGatheringPolicy = PeerConnection.ContinualGatheringPolicy.GATHER_CONTINUALLY;
// Use ECDSA encryption.
rtcConfig.keyType = PeerConnection.KeyType.ECDSA;
rtcConfig.sdpSemantics = PeerConnection.SdpSemantics.UNIFIED_PLAN;
mPeerConnection = mPeerConnectionFactory.createPeerConnection(rtcConfig, pcObserver);
if (dataChannelEnabled) {
DataChannel.Init init = new DataChannel.Init();
init.ordered = mPeerConnectionParameters.dataChannelParameters.ordered;
init.negotiated = mPeerConnectionParameters.dataChannelParameters.negotiated;
init.maxRetransmits = mPeerConnectionParameters.dataChannelParameters.maxRetransmits;
init.maxRetransmitTimeMs = mPeerConnectionParameters.dataChannelParameters.maxRetransmitTimeMs;
init.id = mPeerConnectionParameters.dataChannelParameters.id;
init.protocol = mPeerConnectionParameters.dataChannelParameters.protocol;
mDataChannel = mPeerConnection.createDataChannel("P2P data", init);
}
isInitiator = false;
// Set INFO libjingle logging.
// NOTE: this _must_ happen while `factory` is alive!
Logging.enableLogToDebugOutput(Logging.Severity.LS_INFO);
List mediaStreamLabels = Collections.singletonList("ARDAMS");
if (isVideoCallEnabled()) {
mPeerConnection.addTrack(createVideoTrack(mVideoCapture), mediaStreamLabels);
// We can add the renderers right away because we don't need to wait for an
// answer to get the remote track.
remoteVideoTrack = getRemoteVideoTrack();
remoteVideoTrack.setEnabled(renderVideo);
//目前就一个
remoteVideoTrack.addSink(mRemoteSurfaceView);
}
mPeerConnection.addTrack(createAudioTrack(), mediaStreamLabels);
if (isVideoCallEnabled()) {
findVideoSender();
}
} 当对方加入到房间中，我们需要把当前 UserA 的 SDP 信息告诉 UserB 用户，使用如下代码
public void createOffer() {
executor.execute(() -> {
if (mPeerConnection != null) {
Log.d(Constants.P2PTAG, "PC Create OFFER");
isInitiator = true;
//1. create offer
mPeerConnection.createOffer(sdpObserver, mSdpMediaConstraints);
}
});
}
//2. 当 createOffer 成功我们会收到如下回调
@Override
public void onCreateSuccess(final SessionDescription desc) {
//然后我们需要设置当前的 SDP
mPeerConnection.setLocalDescription(sdpObserver, newDesc);
}
//3. 当设置成功后，我们会收到 onSetSuccess 回调，然后将 UserA SDP offer 消息发送给对等方
@Override
public void onSetSuccess() {
JSONObject message = new JSONObject();
try {
String type = "offer";
if (sdp.type == SessionDescription.Type.ANSWER)
type = "answer";
message.put("type", type);
message.put("sdp", sdp.description);
sendMessage(message);
} catch (JSONException e) {
e.printStackTrace();
}
}当 UserB 收到 UserA offer 消息后的处理
//1.设置 UserA SDP 描述符
mPeerConnection.setRemoteDescription(sdpObserver, sdpRemote);
if (desc.type == SessionDescription.Type.OFFER) {
Log.i(Constants.P2PTAG, "Creating ANSWER...");
//2. 创建 answer
mPeerConnection.createAnswer(sdpObserver, mSdpMediaConstraints);
}
//3. answer 创建成功后的处理
mPeerConnection.setLocalDescription(sdpObserver, newDesc);
//4. UserB 设置成功后的处理，将 sdp 发给 UserA
JSONObject message = new JSONObject();
try {
String type = "offer";
if (sdp.type == SessionDescription.Type.ANSWER)
type = "answer";
message.put("type", type);
message.put("sdp", sdp.description);
sendMessage(message);
} catch (JSONException e) {
e.printStackTrace();
}当我们收到 UserB 发来的 answer sdp 消息后告诉底层
mPeerConnection.setRemoteDescription(sdpObserver, sdpRemote);SDP 协商完后，UserA / UserB 交换 ice 消息，用于 nat 和转发媒体数据，如果都在局域网其实可以省略这一步
//user A / UserB 收到 onicecandidate 回调然后将 candidate 发送给 UserB
@Override
public void onIceCandidate(final IceCandidate iceCandidate) {
executor.execute(() -> {
Log.i(Constants.P2PTAG, "onIceCandidate: " + iceCandidate);
try {
JSONObject message = new JSONObject();
message.put("type", "candidate");
message.put("label", iceCandidate.sdpMLineIndex);
message.put("id", iceCandidate.sdpMid);
message.put("candidate", iceCandidate.sdp);
mISignalClient.sendSignalMessage(mRoomConnectParameters.roomId, message);
} catch (JSONException e) {
e.printStackTrace();
}
}
);
}
//当 UserB / UserA 接收到 UserA / UserB 的candidate 后进行添加
mPeerConnection.addIceCandidate(candidate, new AddIceObserver() {
...
}
}通过如上核心步骤代码，你已经完成了一个基于 WebRTC Android 版的 P2P 音视频通话系统。当然，这里展示的代码只是简化版示例，完整版的代码可以点击文末简介处有说明。
到此，你已经可以 JS <-->JS 、Android <--> Android 、JS <-->Android 平台下进行 P2P 的音视频通话了。
本文为你介绍了如何基于 WebRTC 实现一个 P2P 音视频通话系统，和提供了一个跨平台的实现方案，主要包括以下三个部分：
请注意，本文提供的代码是简化版示例，您可以根据项目需求进行扩展和优化。通过本教程，您应该对如何使用 WebRTC 构建 P2P 音视频通话系统有了更深入的了解，并能将其应用于实际项目中。
到此，P2P 音视频通话系统我们已经实现完了，下一篇我们会介绍视频会议的实现方案，尽请期待吧。
原文链接：WebRTC 实战: P2P 音视频通话解决方案 - 掘金
页面更新：2024-03-14
本站资料均由网友自行发布提供，仅用于学习交流。如有版权问题，请与我联系，QQ：4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号
