avatar
文章
649
标签
2112
分类
180
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们
仰观苍穹思环宇
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们

使用WebRTC实现视频通话的指南以及多场景应用实施详细流程

发表于2024-10-11|更新于2026-09-12|网络
视频流实时通信webRTCWebSocket协议音频通话WebSocket
cover of previous post
上一篇
windows上安装wpscan的最佳方式(WSL)的详细步骤
cover of next post
下一篇
syncthing同步规则的Ignoring Files(忽略模式)设置和使用规则
相关推荐
cover
2024-09-30
使用FFmpeg对mp4视频批量生成m3u8文件支持客户端通过HTML5的video地址使用blob访问资源片段
avatar
鸢尾花序
文章
649
标签
2112
分类
180
联系我们
目录
  1. 1. 需求
  • webrtc是什么技术，有什么使用场景?
    1. 0.1. WebRTC的主要特点
    2. 0.2. WebRTC的使用场景
  • 我们先来一个简单的示例来演示webRTC的使用方式
    1. 0.1. 1. 创建 WebSocket 服务器
    2. 0.2. 2. 创建 HTML 页面
    3. 0.3. 3. 运行示例
    4. 0.4. 打开 index.html
    5. 0.5. 打开多个浏览器窗口
    6. 0.6. 允许访问摄像头和麦克风
    7. 0.7. 查看视频流
    8. 0.8. 常见问题及解决方案
    9. 0.9. 解释
      1. 0.9.1. 1. 初始化 npm 项目
      2. 0.9.2. 2. 安装 ws 模块
      3. 0.9.3. 3. 运行 WebSocket 服务器
  • 使用局域网IP地址不使用localhost可以吗？
    1. 0.0.1. 步骤
    2. 0.0.2. 注意事项
  • 0.1. 步骤：
  • 需要几台设备进行测试？请把拓扑结构整理好， 便于直观的去测试
    1. 0.1. 1. 网络拓扑结构
    2. 0.2. 2. 测试准备
    3. 0.3. 3. WebRTC 测试流程
    4. 0.4. 4. WebRTC 流程示意图
    5. 0.5. 5. 排查与优化
  • 客户端可能遇到的一些问题和解释
    1. 1. 1，问题一：cannot set onicecandidate
      1. 1.0.1. 可能的原因与解决方案：
      2. 1.0.2. 完整的 WebRTC 示例
      3. 1.0.3. 下一步
  • 本地实践(前面都是演示和遇到的问题的折腾记录，如果不想看直接可以跳过进入以下内容)
    1. 1. webRTC逻辑图拓扑图（先来一个直观的流程上的认识）
      1. 1.1. 说明
      2. 1.2. 网络拓扑图（服务端和客户端都在一个网络或者是彼此之间都是可以通信才行，当然条件允许的话服务端可以是云服务器，用公网IP也可以）
      3. 1.3. 说明
    2. 2. 以下是实现的过程图
  • 说明
    1. 1. 安装所需的包（开始实施）
    2. 2. 创建服务器
    3. 3. 注意
    4. 4. 创建前端代码
    5. 5. 启动流程
    6. 6. 注意事项
    7. 7. 结论
  • 如果我既想要视频的同时还要音频来进行通话，如何调整呢？
    1. 0.1. 关键修改点：
    2. 0.2. 启用音频：
    3. 0.3. 修改说明：
  • 如果我有多个客户端，怎么调整？
    1. 1. 1. 多对多的连接结构：
    2. 2. 2. 基于信令服务器的调整：
    3. 3. 3. 多客户端的信令逻辑：
      1. 3.1. 具体调整方案：
        1. 3.1.1. 1. 在信令服务器中管理多个客户端：
        2. 3.1.2. 2. 前端代码的修改：
      2. 3.2. 代码示例：
      3. 3.3. 说明：
      4. 3.4. 信令服务器：
  • 目前提供的是本地局域网的，如果我多个设备分别在不同的地区，网络不一样，如何部署和实施呢？
    1. 0.1. 1. WebRTC 的核心架构
    2. 0.2. 2. 部署跨地区的 WebRTC 服务
      1. 0.2.1. 1) 部署信令服务器
      2. 0.2.2. 2) 使用 STUN/TURN 服务器
    3. 0.3. 自己部署 TURN 服务器的示例：
      1. 0.3.1. 3) 优化音视频传输质量
      2. 0.3.2. 4) 考虑跨地区的网络延迟和 QoS
    4. 0.4. 3. 实际的部署架构
    5. 0.5. 4. 客户端的代码调整
    6. 0.6. 5. 注意事项
    7. 0.7. 结论
  • 感觉有的时候还是报错，这里我们继续调整，这里作为第三个案例
    1. 0.1. 服务端代码调整
    2. 0.2. 客户端代码调整
    3. 0.3. 更新后的代码
    4. 0.4. 关键更改
    5. 0.5. 测试步骤
  • 我要所有的客户端都显示出来，不能只显示当前设备的视频
  • 实现步骤
  • 调整后的代码
  • 主要修改内容
  • 运行说明
  • 注意事项
    1. 0.1. 解决方案
    2. 0.2. 修改说明
    3. 0.3. 运行说明
  • 2024年10月14日：重要更新，这个版本已经做到了视频和语音通信了
  • 我想要添加视频的请求发言和视频录制功能
    1. 0.0.1. 如何获取有效的 TURN 服务器凭证：
  • 这个是补充的知识点，我们可以作为扩展知识阅读（官网已经写了很多示例可以进行测试了，已经很完善了）
    1. 0.0.1. 1. 修改 npm start 命令来使用 HTTPS
    2. 0.0.2. 2. 启动 HTTPS 服务器
    3. 0.0.3. 3. 访问你的应用
    4. 0.0.4. 如何避免此类问题：
    • 最新文章
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达2026-09-17
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析2026-09-15
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架2026-09-15
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost2026-09-15
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)2026-09-14
    告别逐个转换用md2pdf一键批量把Markdown变成PDF
    告别逐个转换用md2pdf一键批量把Markdown变成PDF2026-09-14
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP2026-09-14
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践2026-09-12
    ©2022 - 2026 By 鸢尾花序