什么是webRTC?
WebRTC（Web Real-Time Communication）是一种用于在Web浏览器之间实时传输音频、视频和数据的开放标准和技术集合。 WebRTC 提供了一组 API 和协议，使得开发者可以直接在Web浏览器中实现点对点的实时通信，而无需使用第三方插件或应用程序。它通过使用浏览器内置的音频、视频和数据通道，实现了实时的音视频传输和数据传输。 主要特点和功能：
- 实时音视频通信：WebRTC 可以在不同的浏览器之间直接传输音频和视频流，实现实时的语音通话和视频通话。
- 数据传输：除了音视频流，WebRTC 还提供了可靠的数据传输通道（DataChannel），可以用于传输任意类型的数据。
- 点对点通信：WebRTC 的设计目标之一是支持点对点的通信，即直接在浏览器之间建立连接，不需要经过服务器的转发。
- 安全性：WebRTC 内置了强大的安全性机制，包括加密和身份验证，以确保通信过程的机密性和完整性。
- 跨平台支持：WebRTC 支持在不同的平台和设备上进行实时通信，包括桌面浏览器、移动浏览器和移动应用程序。
WebRTC 在实时通信、视频会议、在线教育、远程协作、在线游戏和物联网等领域有着广泛的应用。它为开发者提供了强大的工具和标准，使得构建实时通信应用变得更加简便和可靠。
音视频采集
WebRTC使用getUserMedia获取摄像头与话筒对应的媒体流对象MediaStream，媒体流可以通过WebRTC进行传输，并在多个对等端之间共享。将流对象赋值给视频元素的srcObject，实现本地播放音视频
| 配置项 | 描述 |
| audio | 指定是否捕获音频流。值为 true 表示捕获音频流，值为 false 表示不捕获音频流。 |
| video | 指定是否捕获视频流。值为 true 表示捕获视频流，值为 false 表示不捕获视频流。 |
| audio.deviceId | 指定要使用的音频输入设备的唯一标识符。 |
| audio.groupId | 指定音频输入设备所属的设备组的唯一标识符。 |
| audio.echoCancellation | 指定是否启用回声消除。值为 true 表示启用回声消除，值为 false 表示禁用回声消除。 |
| audio.autoGainControl | 指定是否启用自动增益控制。值为 true 表示启用自动增益控制，值为 false 表示禁用自动增益控制。 |
| audio.noiseSuppression | 指定是否启用降噪。值为 true 表示启用降噪，值为 false 表示禁用降噪。 |
| audio.latency | 指定音频流的延迟时间（以毫秒为单位）。 |
| video.deviceId | 指定要使用的视频输入设备的唯一标识符。 |
| video.groupId | 指定视频输入设备所属的设备组的唯一标识符。 |
| video.width | 指定视频流的宽度（以像素为单位）。 |
| video.height | 指定视频流的高度（以像素为单位）。 |
| video.frameRate | 指定视频流的帧率（每秒帧数）。 |
| video.facingMode | 指定所需的摄像头方向。可以是 "user"（前置摄像头）或 "environment"（后置摄像头）。 |
function getUserMedia() {
navigator.mediaDevices.getUserMedia({
video: {facingMode: facingMode},
audio: true
}).then(stream => {
localStream = stream
const localVideo = document.getElementById('localVideo');
localVideo.srcObject = stream;
});
}
连接管理
不采用原生webrtc 进行管理连接，原生 API 使用起来较为复杂 ；使用peerJs 组件进行管理连接，PeerJS 在 WebRTC 的基础上提供了更高层次的抽象，使得开发者能够更轻松地构建基于点对点通信的应用程序。
什么是 PeerJS？
PeerJS 是一个基于 WebRTC 技术的 JavaScript 库，用于简化点对点（peer-to-peer）通信的实现。 WebRTC 是一种在浏览器之间实现实时音视频通信的开放标准，但其原生 API 使用起来较为复杂。PeerJS 在 WebRTC 的基础上提供了更高层次的抽象，使得开发者能够更轻松地构建基于点对点通信的应用程序。 PeerJS 提供了以下功能和特性：
- 简化的 API：PeerJS 提供了简洁的 API，使得创建和管理对等连接（peer connection）变得更加容易。
- 自动信令服务：PeerJS 使用一个信令服务器来协助对等连接的建立。开发者无需自行设置信令服务器，PeerJS 提供了默认的信令服务器供使用。
- 可靠的数据通道：PeerJS 提供了可靠的数据通道，使得在对等连接中传输数据变得简单可靠。
- 兼容性：PeerJS 支持主流的现代浏览器，并提供了跨平台的支持，包括桌面浏览器和移动浏览器。
PeerJS 的使用示例：
// 创建 Peer 对象
const peer = new Peer('my-peer-id', {
host: 'peerjs-server.com',
port: 9000,
path: '/myapp'
});
// 监听连接建立事件
peer.on('open', id => {
console.log('Connected with ID:', id);
});
// 建立对等连接
const conn = peer.connect('another-peer-id');
// 监听连接打开事件
conn.on('open', () => {
conn.send('Hello from peer 1!');
});
// 监听接收到消息事件
conn.on('data', data => {
console.log('Received:', data);
});
peerjs-server
PeerJS Server 可以被部署在您自己的服务器上，或者使用 PeerJS 提供的公共信令服务器。公共信令服务器是免费提供给开发者使用的，但也可以选择自己托管信令服务器以获得更高的灵活性和控制。 使用 PeerJS Server 的好处包括：
- 信令交换：PeerJS Server 用于在对等连接的建立过程中传递信令数据，包括对等连接的元数据、ICE 候选项和 SDP（会话描述协议）等。
- 中继服务器：在某些情况下，对等连接的直接建立可能受到网络环境的限制，需要通过中继服务器进行中转。PeerJS Server 可以作为中继服务器，帮助在无法直接连接的情况下建立对等连接。
- 认证和安全性：PeerJS Server 可以提供认证和安全性机制，确保只有授权的用户可以进行对等连接，并保护数据的隐私和完整性。
如何使用 PeerJS Server：
- 使用 PeerJS 的默认公共信令服务器：PeerJS 提供了一个默认的公共信令服务器，您可以在使用 PeerJS 库时直接使用它。
- 使用npm 下载 npm install peer -g ;运行：** ****peerjs --port 9000 --key peerjs --path /myapp**
- 自己部署 PeerJS Server：您也可以下载 PeerJS Server 的源代码，自行部署在自己的服务器上。PeerJS Server 是基于 Node.js 的，您需要安装 Node.js 环境，并按照 PeerJS Server 的文档进行配置和部署。
PeerJS Server 的源代码可以在 PeerJS 的 GitHub 仓库中找到，您可以在那里获取更多关于 PeerJS Server 的详细信息和配置说明。 需要注意的是，如果您选择使用 PeerJS 的默认公共信令服务器，请遵守 PeerJS 的使用政策和条款，并确保适用于您的特定用途。
广域网连接
由于NAT（网络地址转换）和防火墙的存在，直接在两个设备之间建立点对点连接通常是困难的。为了解决这个问题，WebRTC使用了打洞技术，利用中间服务器作为中继来帮助设备建立直接连接，从而实现端到端的实时通信。 打洞服务通过以下步骤来建立直接连接：
- 设备A和设备B都向打洞服务发送连接请求。
- 打洞服务将设备A和设备B的连接信息（IP地址和端口号）传递给对方。
- 设备A和设备B尝试直接连接对方，通过在NAT和防火墙上创建映射，使得两个设备可以直接通信。
- 如果直接连接失败，设备A和设备B将尝试使用中继服务器进行通信。
打洞服务通常使用一些技术来实现这种直接连接，例如STUN（会话遍历实用工具）和TURN（中继通信）。STUN用于获取设备的公共IP地址和端口号，TURN用于在直接连接失败时提供中继服务器作为备用通信路径。 打洞服务对于WebRTC中的实时通信至关重要，它使得两个设备可以直接通信，无需经过中间服务器的转发，从而实现更低的延迟和更高的性能。 需要注意的是，打洞服务只是WebRTC连接建立的一部分，实际的通信数据传输仍然是直接的点对点连接。
示例Demo
使用webRTC实现一个1V1网页视频通话
引入PeerJs组件
这里使用cdn 的方式与引入，可查看文档使用其他引入方式 <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> 注意： 上面引入了adapter-latest.js组件 **adapter-latest.js** 是一个 JavaScript 库，它是由 WebRTC 团队维护的一个开源项目，旨在提供对不同浏览器之间的 WebRTC API 的规范化和标准化。 WebRTC API 在不同的浏览器中实现存在一些差异，而 adapter-latest.js 的目的是通过封装和规范化这些差异，使得开发者可以更方便地使用 WebRTC API 跨浏览器开发实时通信应用。 adapter-latest.js 提供了以下功能：
- 规范化 API：adapter-latest.js 通过提供规范化的 API，使开发者可以使用统一的方式访问 WebRTC API，无论是在 Chrome、Firefox、Safari 还是其他支持 WebRTC 的浏览器上。
- 自动适配：adapter-latest.js 可以根据浏览器的类型和版本自动适配相关的 WebRTC API 实现，从而隐藏不同浏览器之间的差异。
- Polyfill 功能：对于不支持某些 WebRTC API 的浏览器，adapter-latest.js 可以提供 Polyfill 功能，通过模拟这些 API 的行为来实现兼容性。
adapter-latest.js 直接引入就OK了。
切换前后摄像头
切换前后摄像头需要重新获取视频流并替换原有的视频流 通过 facingMode 属性控制前后摄像头，facingMode ：user：前置摄像头；environment 后置摄像头， 关键步骤： stream：视频流 replaceTrack（） 替换当前正在使用的轨道
stream.getVideoTracks().forEach(track => {
call.peerConnection.getSenders().forEach((sender) => {
if (sender.track.kind === 'video') {
sender.replaceTrack(track).then(() => console.log('replace'));
}
});
})
ios 微信自带浏览器上webrtc不能正常使用的解决方法
解决方法：
window.onload = () => {
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById("localVideo").play();
}, false);
}
<video id="localVideo" preload="auto" autoplay="autoplay"
x-webkit-airplay="true"
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
x5-video-orientation="portraint" muted></video>
值得注意的是，WeixinJSBridgeReady这个事件会在页面加载后马上触发，因此，上面的这个代码最好写在window.οnlοad=>(){}函数体中，所以video标签也要提前写在html网页中，不要等webrtc通道建立后再去动态创建video。
完整代码
<!DOCTYPE html>
<html lang="zh">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<head>
<title>WebRTC 视频通话演示</title>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<h1>WebRTC 视频通话演示</h1>
<div>
<p>
我的peerId：<span id="myPid"></span>
</p>
<label for="remotePeerIdInput">对方 Peer ID:</label>
<input type="text" id="remotePeerIdInput">
<button id="callButton">呼叫</button>
<button id="hangupButton">挂断</button>
<button id="muteButton">静音</button>
<button id="switchButton">切换摄像头</button>
</div>
<div style="display: flex">
<div style="background: aquamarine">
<h2>本地视频</h2>
<video id="localVideo" width="720" height="240" width="100%" height="300" preload="auto" autoplay="autoplay"
x-webkit-airplay="true"
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
x5-video-orientation="portraint" muted></video>
</div>
<div style="background: bisque">
<h2>远程视频</h2>
<video id="remoteVideo" width="720" height="240" autoplay></video>
</div>
</div>
<script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
<script>
let peer = null;
// 处理来自远程 Peer 的呼叫请求
let call;
let dataConn;
// 初始化摄像头方向为前置
let facingMode = 'user';
let localStream = null
const localVideo = document.getElementById('localVideo');
const init = () => {
// 初始化 Peer 对象，指定唯一的 ID
peer = new Peer({
/* host: "xxxxxxxx",
path: "/peerjswss/myapp",
port: 443,
debug: 2,
secure: true,*/
});
// 输出 Peer ID 到控制台
peer.on('open', function (peerId) {
console.log('我的 Peer ID 是: ' + peerId);
document.getElementById("myPid").innerText = peerId
});
peer.on('connection', (conn) => {
dataConn = conn
conn.send("连接成功...............")
conn.on('data', function (data) {
console.log('被呼叫方-接收消息--》', data);
if (data === "挂断") {
console.log("被呼叫方信息——》对方挂断电话")
call.close()
call = null
dataConn.close()
dataConn = null
console.log("call", call)
console.log("dataConn", dataConn)
// 清空远程视频元素
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = null;
alert("对方已挂断............")
}
});
});
peer.on('call', async incomingCall => {
console.log("监听呼叫")
// 如果已有呼叫正在进行中，则拒接新的呼叫
if (call && call.open) {
console.log('拒绝新的呼叫');
incomingCall.answer();
incomingCall.close();
return;
}
// 显示确认对话框，以便用户确定是否接听呼叫
const confirmed = window.confirm('来自 ' + incomingCall.peer + ' 的呼叫。是否接听？');
if (!confirmed) {
console.log('呼叫被用户拒绝');
incomingCall.answer();
incomingCall.close();
return;
}
await getUserMedia()
// 接听呼叫，并发送本地媒体流
console.log('接听呼叫');
call = incomingCall;
incomingCall.answer(localStream);
// 处理来自远程 Peer 的媒体流
incomingCall.on('stream', remoteStream => {
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = remoteStream;
});
// 处理呼叫关闭事件
incomingCall.on('close', () => {
console.log('呼叫被远程 Peer 关闭');
if (call && call.open) {
console.log('关闭已有呼叫');
call.close();
call = null;
}
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = null;
});
});
}
// 获取用户媒体流的函数，根据facingMode参数获取不同摄像头的流
function getUserMedia() {
return new Promise((resolve, reject) => {
// 检查浏览器是否支持 getUserMedia API
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert("getUserMedia is not supported");
reject(new Error("getUserMedia is not supported"));
}
navigator.mediaDevices.getUserMedia({
video: {
// enviroment 后置 | user 前置摄像头
facingMode: facingMode,
// 视频帧率
frameRate: 30,
},
audio: {}
}).then(stream => {
resolve(stream);
localStream = stream
localVideo.srcObject = stream;
// 如果已经存在call，则需要将新的流替换到call中
if (call) {
console.log("---> ", call.peerConnection.getSenders())
stream.getVideoTracks().forEach(track => {
call.peerConnection.getSenders().forEach((sender) => {
if (sender.track.kind === 'video') {
sender.replaceTrack(track).then(() => console.log('replace'));
}
});
})
}
}).catch(error => {
reject(error);
});
})
}
// 切换摄像头的函数
function switchCamera() {
// 切换facingMode
facingMode = facingMode === 'user' ? 'environment' : 'user';
// 重新获取用户媒体流
getUserMedia();
}
// 在需要切换摄像头的地方调用switchCamera函数，例如：
const switchButton = document.getElementById('switchButton');
switchButton.addEventListener('click', switchCamera);
// 当点击“呼叫”按钮时，向远程 Peer 发起呼叫请求
const callButton = document.getElementById('callButton');
const remotePeerIdInput = document.getElementById('remotePeerIdInput');
callButton.addEventListener('click', async () => {
const remotePeerId = remotePeerIdInput.value.trim();
if (!remotePeerId) return;
await getUserMedia()
// 如果已有呼叫正在进行中，则关闭它，并发起新的呼叫请求
if (call && call.open) {
console.log('关闭已有呼叫');
call.close();
}
dataConn = peer.connect(remotePeerId);
dataConn.on('open', function () {
// Send messages
dataConn.send('我要给你打电话了............!');
// Receive messages
dataConn.on('data', function (data) {
console.log('呼叫方接收消息--》', data);
if (data === "挂断") {
console.log("呼叫方接收消息->对方挂断电话")
call.close()
call = null
dataConn.close()
dataConn = null
console.log("call", call)
console.log("dataConn", dataConn)
// 清空远程视频元素
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = null;
alert("对方已挂断............")
}
});
});
// 创建新的呼叫请求，并注册事件监听器
console.log('发起呼叫', localStream);
call = peer.call(remotePeerId, localStream);
console.log("call-->", call)
// 处理来自远程 Peer 的媒体流
call.on('stream', remoteStream => {
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = remoteStream;
});
// 处理呼叫关闭事件
call.on('close', () => {
console.log('呼叫被远程 Peer 关闭');
if (call && call.open) {
console.log('关闭已有呼叫');
call.close();
call = null;
}
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = null;
// 停止本地媒体流
localStream.getTracks().forEach(track => track.stop());
localVideo.srcObject = null;
});
// 处理呼叫错误事件
call.on('error', error => {
console.error('呼叫错误:', error);
});
});
// 当点击“挂断”按钮时，关闭呼叫并停止本地媒体流
const hangupButton = document.getElementById('hangupButton');
hangupButton.addEventListener('click', () => {
dataConn.send("挂断")
// 如果已有呼叫正在进行中，则关闭它
if (call && call.open) {
console.log('挂断呼叫');
call.close();
call = null;
}
// 停止本地媒体流
localStream.getTracks().forEach(track => track.stop());
localVideo.srcObject = null;
// 清空远程视频元素
const remoteVideo = document.getElementById('remoteVideo');
remoteVideo.srcObject = null;
});
// 当点击“静音”按钮时，切换音频静音状态
const muteButton = document.getElementById('muteButton');
muteButton.addEventListener('click', () => {
const audioTracks = localStream.getAudioTracks();
audioTracks.forEach(track => {
track.enabled = !track.enabled;
});
muteButton.innerText = audioTracks[0].enabled ? "静音" : "取消静音";
});
init()
</script>
</body>
</html>
粉丝福利，博主耗时2个月整理了一份详细的音视频开发学习路线，涵盖了音视频开发FFmmpeg、流媒体客户端、流媒体服务器、WebRTC、Android NDK开发、IOS音视频开发等等全栈技术栈，并提供了配套的免费领取C++音视频学习资料包、技术视频/代码，内容包括（FFmpeg ，WebRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs流媒体服务器，音视频通话等等）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
