avatar
文章
278
标签
819
分类
133
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
仰观苍穹思环宇
搜索
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链

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

发表于2024-10-11|更新于2024-11-07|网络
视频流实时通信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
鸢尾花序
文章
278
标签
819
分类
133
关注我们
目录
  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. 如何避免此类问题：
    • 最新文章
    web页面版块(多列版块)流程间动画实现技术详解和相关方案
    web页面版块(多列版块)流程间动画实现技术详解和相关方案2024-11-12
    使用git管理hexo博客仓库的最佳实践及问题解决
    使用git管理hexo博客仓库的最佳实践及问题解决2024-11-07
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法2024-11-06
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果2024-11-05
    使用云服务器搭建WireGuard VPN实现外网访问
    使用云服务器搭建WireGuard VPN实现外网访问2024-11-05
    上下文在计算机编程中的重要性
    上下文在计算机编程中的重要性2024-11-04
    云服务器安装nginx并且进行正向代理和反向代理剖析和演示
    云服务器安装nginx并且进行正向代理和反向代理剖析和演示2024-11-01
    使用PowerToys的无界鼠标在同一局域网中控制多台Windows电脑
    使用PowerToys的无界鼠标在同一局域网中控制多台Windows电脑2024-10-30
    ©2022 - 2024 By 鸢尾花序
    搜索
    数据库加载中