WebRTC-H5视频通话

最新推荐文章于 2025-06-28 17:35:30 发布

老张音视频开发进阶

最新推荐文章于 2025-06-28 17:35:30 发布

阅读量1.3k

点赞数 24

CC 4.0 BY-SA版权

文章标签： webrtc 音视频

本文链接：https://blog.csdn.net/qq_52703909/article/details/135088495

本文介绍了WebRTC技术，它是一种在Web浏览器间实现音频、视频和数据实时传输的开放标准。WebRTC提供了实时通信、数据传输、点对点通信以及内置的安全性机制，广泛应用于视频会议、在线教育等领域。文中还提到了在iOS微信内置浏览器上解决WebRTC不能正常使用的方法，以及使用PeerJS库简化WebRTC连接管理和数据通道的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是webRTC?

WebRTC（Web Real-Time Communication）是一种用于在Web浏览器之间实时传输音频、视频和数据的开放标准和技术集合。 WebRTC 提供了一组 API 和协议，使得开发者可以直接在Web浏览器中实现点对点的实时通信，而无需使用第三方插件或应用程序。它通过使用浏览器内置的音频、视频和数据通道，实现了实时的音视频传输和数据传输。主要特点和功能：

实时音视频通信：WebRTC 可以在不同的浏览器之间直接传输音频和视频流，实现实时的语音通话和视频通话。
数据传输：除了音视频流，WebRTC 还提供了可靠的数据传输通道（DataChannel），可以用于传输任意类型的数据。
点对点通信：WebRTC 的设计目标之一是支持点对点的通信，即直接在浏览器之间建立连接，不需要经过服务器的转发。
安全性：WebRTC 内置了强大的安全性机制，包括加密和身份验证，以确保通信过程的机密性和完整性。
跨平台支持：WebRTC 支持在不同的平台和设备上进行实时通信，包括桌面浏览器、移动浏览器和移动应用程序。

WebRTC 在实时通信、视频会议、在线教育、远程协作、在线游戏和物联网等领域有着广泛的应用。它为开发者提供了强大的工具和标准，使得构建实时通信应用变得更加简便和可靠。

音视频采集

详细参数请参考链接地址：developer.mozilla.org/zh-CN/docs/…

WebRTC使用getUserMedia获取摄像头与话筒对应的媒体流对象MediaStream，媒体流可以通过WebRTC进行传输，并在多个对等端之间共享。将流对象赋值给视频元素的srcObject，实现本地播放音视频

 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.com/ github.com/peers

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 库所依赖的信令服务器，用于协助对等连接的建立和管理。 github 地址： github.com/peers/peerj…

PeerJS Server 可以被部署在您自己的服务器上，或者使用 PeerJS 提供的公共信令服务器。公共信令服务器是免费提供给开发者使用的，但也可以选择自己托管信令服务器以获得更高的灵活性和控制。使用