使用WebRTC技术搭建小型的视频聊天页面

news/2024/11/19 12:25:59/文章来源:https://www.cnblogs.com/sjie/p/18554602

目录

  • 目录
  • 参考资料
  • 什么是WebRTC?
  • 能做什么?
  • 架构图
  • 个人理解(类比)
    • 核心知识点
    • 核心知识点类比
      • ICE框架
      • STUN(协议)
      • NAT(网络地址转换)
      • TURN
      • SDP(会话描述协议)
      • WebRTC的核心API
  • 现在开始做饭
  • 准备阶段
    • 环境准备
    • 服务器搭建
    • Coturn TURN server(开源服务) 部署
    • Signal Server信令服务
    • 信令服务与客户端源代码
    • 测试
  • 总结
  • 常见问题

参考资料

  • WebRTC详细文档
  • WebRTC samples(官方)
  • 如何搭建一个简单的webrtc服务器(其他博主文档)
  • WebRTC官方Demo
  • webRTC开源库
  • coturn Server部署和Docker
  • WebRTC服务器测试地址

什么是WebRTC?

  • WebRTC(Web实时通信)技术
  • 浏览器之间交换任意数据,而无需中介
  • 不需要用户安装插件或任何其他第三方软件

能做什么?

与Media Capture和Streams API一起
  • 支持音频和视频会议
  • 文件交换
  • 屏幕共享
  • 身份管理
  • 以及与传统电话系统的接口,包括支持发送DTMF(按键拨号)信号

架构图

个人理解(类比)

官方文档晦涩难懂,所以按照自己的思路,整理总结。

核心知识点

先整理官方核心知识点,这里不理解,没关系,我们继续按自己的思路总结
  • ICE(框架)允许您的Web浏览器与对等端连接
  • STUN(协议)用于发现您的公共地址并确定路由器中阻止与对等体直接连接的任何限制
  • NAT 用于为您的设备提供公共IP地址
  • TURN 是指通过打开与TURN服务器的连接并通过该服务器中继所有信息来绕过对称NAT限制
  • SDP 从技术上讲会话描述协议(SDP并不是一个真正的协议,而是一种数据格式)

核心知识点类比

我们使用餐厅(或者其他)来类比WebRTC核心概念, 想象一下,你现在正在餐厅里面。顾客(用户)可以直接与厨房(服务器)进行交流,而不需要通过服务员(中介)。在这个餐厅里,顾客可以点菜(发送音视频请求)享用美食(接受音视频流)还可以与其他顾客(其他用户)直接交流(数据传输),而这一切都不要额外的工具或设备(插件)

备注:如果你明白,上面描述,那我们就继续。

ICE框架

想象一下ICE就像餐厅整体布局和设计,它确保顾客(用户)能够顺利找到座位并与厨房(对等端)建立联系。ICE负责协调顾客和厨房之间的所有连接方式,确保他们能顺利交流。

STUN(协议)

STUN就像餐厅门口接待员,负责帮助顾客找到餐厅的公共入口。接待员会告诉顾客他们的公共地址(公共IP地址),并帮助他们了解是否有任何障碍(比如路由器的限制、防火墙等)阻止他们直接进入餐厅(与对等端直接连接)

NAT(网络地址转换)

NAT就像餐厅外墙,它为餐厅提供一个公共门牌号(公共IP地址)。虽然餐厅内部有很多桌子(设备),但外面的人只知道这个公共门牌号,而不知道内部具体位置。

TURN

TURN就像餐厅的外卖服务。如果顾客无法直接进入餐厅(由于对称NAT限制),他们可以选择通过外卖服务(TURN服务器)来获取食物。所有的订单和交流通过外卖服务进行,这样即使顾客无法直接到达餐厅,他们仍然可以享用美食。

SDP(会话描述协议)

SDP就像餐厅的菜单,它描述了可供选择的菜品和饮料(音视频流的格式和参数),虽然菜单本身不是一个真正协议,但它提供顾客和厨房之间所需的信息,以便他们能达成共识,确保顾客点的菜品能够被厨房正确准备。

WebRTC的核心API

  • getUserMedia(点菜):

这个API就像顾客在餐厅里点菜。顾客告诉厨房他们想要什么(音频或视频),厨房就会准备好这些食材(获取用户的音频和视频流)。

  • RTCPeerConnection(厨房的工作台):

这个API就像厨房的工作台,负责处理顾客的订单(建立连接)。它确保顾客和厨房之间的交流顺畅,处理音视频流的传输,就像厨房准备和发送食物一样。

  • RTCDataChannel(顾客之间的交流):
    这个API就像顾客之间的对话。顾客可以直接与其他顾客交流(传输数据),比如分享他们的用餐体验或交换食谱,而不需要通过服务员。
    总结
    在这个餐厅的类比中,WebRTC就像一个高效的餐厅,顾客可以直接与厨房和其他顾客交流,享受美食和分享信息,而不需要中介的干预。核心API则是实现这一切的工具,帮助顾客点菜、厨房准备食物和顾客之间的交流。这样,WebRTC使得实时通信变得简单而高效。

现在开始做饭

如果你看到这里,恭喜你,我们达成共识,现在开始做饭。

准备阶段

环境准备

安装Docker、Nginx、Nodejs等,请查询其他文档
  • 一台服务器
  • Debian 12 x86_64 操作系统
  • Docker
  • Nginx
  • Nodejs

服务器搭建

首先我们需要两个服务,STUN/TURN、Signal Server, What's Signal Server? 别紧张我待会,会解释现在我们先专注与STUN/TURN,再次之前我们需要了解  Coturn TURN server(开源框架,感谢开发人员)
  • STUN/TURN
  • Signal Server 信令服务

Coturn TURN server(开源服务) 部署

对的你没有看错,就一行命令,这就是我为什么推荐使用Docker的原因,详细的Dockerfile请看 参考资料
docker run -d --network=host coturn/coturn

测试

打开我们的测试网站 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 添加服务器,等等我们的密码哪里来的?

用户名和密码

用户名和密码在Dockerfile文件里面,我使用的是默认配置,没设置任何配置文件,所以密码是默认密码,自己可以修改
https://github.com/coturn/coturn/blob/master/docker/coturn/debian/Dockerfile

Signal Server信令服务

想象一下,在这个餐厅中,顾客(用户)需要与厨房(对等端)进行交流,但他们并不能直接看到厨房内部情况,信令服务器就像餐厅的接待员或前台,负责协调顾客之间的交流和信息传递。
  • 传递消息,比如顾客A想与顾客B进行视频通话,顾客A请求会先发送到信令服务器,然后由信令服务器转发给顾客B

信令服务与客户端源代码

注意事项: WebRTC需要使用 SSL/TLS 证书,也就是https 协议。
  • 源代码

测试

总结

  • 搭建Signal Server信令服务
  • 搭建STUN/TURN 服务
  • Docker 部署Coturn TURN server(节省大量部署时间)

常见问题

  • 稍后补充

源代码

  • 信令服务和客户端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/836748.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信

自研原生鸿蒙NEXT5.0 API12 ArkTS仿微信app聊天模板HarmonyOSChat。 harmony-wechat原创重磅实战纯血鸿蒙OS ArkUI+ArkTs仿微信App聊天实例。包括聊天、通讯录、我、朋友圈等模块,实现类似微信消息UI布局、编辑器光标处输入文字+emo表情图片/GIF动图、图片预览、红包、语音/位…

Apache Dolphinscheduler数据质量源码分析

Apache DolphinScheduler 是一个分布式、易扩展的可视化数据工作流任务调度系统,广泛应用于数据调度和处理领域。 在大规模数据工程项目中,数据质量的管理至关重要,而 DolphinScheduler 也提供了数据质量检查的计算能力。本文将对 Apache DolphinScheduler 的数据质量模块进…

通过域名访问内网服务器

cloudflare优选ip访问家用服务器 前言 由于一直有使用markdown写笔记的需求,但是每次处理图片的时候总是很头疼。突然,我瞥见了还在角落里面吃灰小主机,因此萌生了废物利用想法,搭建一个外网可访问的图床。图床直接使用lsky-pro就可以,关键还是在外网访问上。 于是在网上看…

【算法】KMP 与 Z 函数

1. KMP 1.1 算法简介 可以做到线性匹配的快速匹配字符串的算法,并可以维护字符串最长公共前后缀,扩展出计算字符串周期。 在 OI 界 KMP 算法是字符串板块中很经典的算法,可以扩展出很多巧妙的解题技巧。 1.2 算法流程 1.2.1 字符串匹配 考虑 \(O(n^2)\) 暴力的匹配,瓶颈在于…

apifox使用小记

1.copy as cURL(cmd)之后在apifox里直接import cURL 2.调用时发生301错误 通常情况下是因为有session校验存在(用户校验)。解决方案: F12里将cookie里的session取到,在apifox里全局配置 这里踩了一个坑 第一次我是import了一个get请求,发送后发生301,所以我去设置了co…

毕业实习总结报告

毕业实习总结报告这既是毕业实习要求的总结报告,也是我对AutoSAR的一点理解,更是个人对未来生活的一点思考。我不希望把这份报告草草水过,而是希望把现在的感受记录下来,给以后的自己看一看,好记性不如记下来。涉及到工作细节和隐私的部分不在此展示了。时间像一头野驴呀,…

IDEA 2024 最新激活码,激活至2099(附有效idea激活码+激活工具)

IDEA 2024最新激活码,激活至2099(附有效idea激活码+激活工具)若提示We could not validate your license ff83b7bd51f5460ca43aabd7a96863a0.信息,idea激活时提示激活码失效解决方法: IDEA 2024 解决 We could not validate your license ff83b7bd51f5460ca43aabd7a96863a…

大学物理上册

质点作曲线运动时,质点在某一点的速度方向就是沿该点曲线的切线方向。

KingbaseES V8R6备份恢复案例之---sys_backup.sh init错误

KingbaseES 、sys_rman案例说明: KingbaseES V8R6数据库单实例环境,执行sys_backup.sh init时,出现“ repo_ip [127.0.0.1] must be located in local”错误,初始化失败。 适用版本:KingbaseES V8R6 一、问题现象 如下所示,执行sys_backup.sh init时出现以下故障:二、问…

鱼厂实习,光速转正了!

从最初那一份懵懂,到如今独立承担项目,回想这一路在鱼厂的成长,每一步都像是在重塑一个新的自己。今天要分享的这篇文章,比较特殊,是我们团队一位同事写的。主要分享了他从 0 开始学编程,再到加入鱼厂光速转正的故事。长达 6000 多字,诉说了自己四年多的经历,满满的真情…

深育大讲堂 | 洞见容器存储技术原理和市场应用趋势

深育大讲堂 | 洞见容器存储技术原理和市场应用趋势 4月12日,【深育大讲堂】系列直播活动第一讲“从容器存储讲起”圆满结束。深信服产教中心资深讲师丁运管、深信服四川省云业务总监薛悟团分别就多场景下的容器存储技术以及容器技术的应用与最佳实践进行深入剖析;并聚焦前沿…

apipost学习

开发团队的痛点: 1. 任何一个团队都是由前端、后端、测试三个TEAM组成的。 2. 产品经理确定需求和过评审后,前后端开发人员一起开会研讨定接口。并先由一个开发人员负责用Swagger定义API文档; 3. 后端会参照API 文档开发接口,并进行调试,用Postman里再跑一遍。 4. 接口…