在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言

WebRTC（Web Real-Time Communication）作为一项强大的实时通信技术，无需额外插件，直接在浏览器中就能实现音视频通话和数据传输等功能。对于开发者来说，了解并掌握如何实现一个简单的 WebRTC 应用，有助于深入理解实时通信的原理，为更复杂的应用开发打下基础。本文将详细介绍实现简单 WebRTC 应用的步骤和关键技术点。

一、WebRTC 基础概念回顾

在开始实现之前，我们先回顾一下 WebRTC 的一些基础概念：

  1. MediaStream API：用于获取设备的音视频流，例如摄像头和麦克风的数据。
  2. RTCPeerConnection API：核心 API，用于在通信双方之间建立连接、交换会话描述信息（SDP）以及传输音视频数据。
  3. RTCDataChannel API：可实现任意数据的实时传输，如文本、二进制数据等。
  4. 信令（Signaling）：在通信双方之间交换诸如媒体格式、网络地址等信息，以建立和维护连接的机制。

二、准备工作

  1. 开发环境：确保你有一个基本的 Web 开发环境，包括文本编辑器（如 Visual Studio Code）和一个简单的 Web 服务器（可以使用 Node.js 的 http-server 等工具）。
  2. 浏览器支持：WebRTC 在主流浏览器（如 Chrome、Firefox 等）中都有较好的支持，但在开发前最好检查一下目标浏览器的兼容性。

三、实现步骤

3.1 创建 HTML 页面结构

首先，创建一个基本的 HTML 文件，包含用于显示本地和远程视频的 <video> 元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple WebRTC</title>
</head>

<body>
    <h1>Simple WebRTC Example</h1>
    <video id="local-video" autoplay muted></video>
    <video id="remote-video" autoplay></video>
    <script src="script.js"></script>
</body>

</html>

上述代码中，local-video 用于显示本地的音视频流，remote-video 用于显示远程的音视频流。autoplay 属性让视频自动播放，muted 属性使本地视频静音，避免回声。

3.2 获取本地音视频流

在 script.js 文件中，使用 MediaStream API 获取本地音视频流：

const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
   .then((stream) => {
        localVideo.srcObject = stream;
        localVideo.play();
    })
   .catch((err) => {
        console.log('获取媒体流失败: ', err);
    });

这段代码调用 navigator.mediaDevices.getUserMedia() 方法请求访问用户的摄像头和麦克风，获取到流后将其设置为 local-video 的 srcObject 并播放。

3.3 建立 RTCPeerConnection

接下来，创建 RTCPeerConnection 实例并处理相关事件：

const pc = new RTCPeerConnection();

pc.addStream(stream);

pc.ontrack = (event) => {
    remoteVideo.srcObject = event.streams[0];
    remoteVideo.play();
};

pc.createOffer()
   .then((offer) => {
        return pc.setLocalDescription(offer);
    })
   .then(() => {
        // 这里需要将 offer 发送给对方（信令部分）
        // 暂时省略，后续会补充信令相关内容
    })
   .catch((err) => {
        console.log('创建 offer 失败: ', err);
    });

代码中创建了 RTCPeerConnection 对象 pc，将本地音视频流添加到连接中。通过监听 ontrack 事件，当接收到远程流时，将其设置为 remote-video 的 srcObject 并播放。然后调用 createOffer() 方法创建一个会话描述（offer），并设置为本地描述。

3.4 信令处理（简化示例）

信令是 WebRTC 中用于在双方之间交换信息的机制。在实际应用中，信令可以通过服务器（如使用 Socket.IO 等库搭建的服务器）来传递。这里为了简化，假设我们有一个简单的函数来模拟信令的发送和接收：

// 模拟发送 offer 给对方
function sendOfferToRemote(offer) {
    // 这里可以使用 Socket.IO 等方式将 offer 发送给对方
    // 为了简单，假设对方已经接收到并处理
    const remotePc = new RTCPeerConnection();
    remotePc.setRemoteDescription(offer)
       .then(() => {
            remotePc.createAnswer()
               .then((answer) => {
                    return remotePc.setLocalDescription(answer);
                })
               .then(() => {
                    // 模拟将 answer 发送回本地
                    pc.setRemoteDescription(answer);
                })
               .catch((err) => {
                    console.log('创建 answer 失败: ', err);
                });
        })
       .catch((err) => {
            console.log('设置远程描述失败: ', err);
        });
}

在前面创建 offer 成功后，调用 sendOfferToRemote(offer) 函数，模拟将 offer 发送给对方。对方接收到 offer 后，创建一个 answer 并设置为本地描述，然后再将 answer 发送回本地，本地设置远程描述，完成连接的建立。

3.5 完整的 script.js 代码

const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
   .then((stream) => {
        localVideo.srcObject = stream;
        localVideo.play();

        const pc = new RTCPeerConnection();

        pc.addStream(stream);

        pc.ontrack = (event) => {
            remoteVideo.srcObject = event.streams[0];
            remoteVideo.play();
        };

        pc.createOffer()
           .then((offer) => {
                return pc.setLocalDescription(offer);
            })
           .then(() => {
                sendOfferToRemote(offer);
            })
           .catch((err) => {
                console.log('创建 offer 失败: ', err);
            });
    })
   .catch((err) => {
        console.log('获取媒体流失败: ', err);
    });

function sendOfferToRemote(offer) {
    const remotePc = new RTCPeerConnection();
    remotePc.setRemoteDescription(offer)
       .then(() => {
            remotePc.createAnswer()
               .then((answer) => {
                    return remotePc.setLocalDescription(answer);
                })
               .then(() => {
                    pc.setRemoteDescription(answer);
                })
               .catch((err) => {
                    console.log('创建 answer 失败: ', err);
                });
        })
       .catch((err) => {
            console.log('设置远程描述失败: ', err);
        });
}

四、总结

通过以上步骤，我们实现了一个简单的 WebRTC 应用，能够在本地和模拟的远程端之间进行音视频通信。虽然这是一个简化的示例，实际应用中还需要处理更多的细节，如更完善的信令机制、网络错误处理、兼容性问题等，但它为我们理解 WebRTC 的基本工作原理和开发流程提供了一个良好的基础。随着对 WebRTC 技术的深入学习和实践，可以进一步扩展和优化应用，实现更强大的实时通信功能。

# webrtc
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区