首页 > 其他分享 >使用WebRTC技术搭建小型的视频聊天页面

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

时间:2024-11-19 12:17:54浏览次数:1  
标签:信令 TURN 餐厅 服务器 顾客 页面 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(节省大量部署时间)

常见问题

  • 稍后补充

源代码

标签:信令,TURN,餐厅,服务器,顾客,页面,WebRTC,搭建
From: https://www.cnblogs.com/sjie/p/18554602

相关文章

  • 从零开始搭建web组态
    成果展示:http://www.hcy-soft.com演示地址:若依管理系统(生产环境)一、技术选择目前只有两种选择,canvas和svgCanvas:是一个基于像素的渲染引擎,使用JavaScriptAPI在画布上绘制图像,它的优点包括:Canvas渲染速度快,适合处理大量图像和高度动态的图像。可以直接操作像素,能......
  • 如何轻松搭建小型网站?基于腾讯云轻量应用服务器网站全解析
    如何轻松搭建小型网站?基于腾讯云轻量应用服务器网站全解析在双十一这个购物狂欢节,腾讯云轻量应用服务器为开发者带来了前所未有的优惠!无论你是刚刚入门的小白,还是经验丰富的开发者,腾讯云轻量应用服务器都能为你提供强大且高效的技术支持。简化的操作界面、灵活的配置选项、......
  • 手把手教你搭建OpenScenario交通场景(下)
        在《手把手教你搭建OpenScenario交通场景(上)》中,我们已经介绍,在动力学仿真软件ModelBase中对车辆、行人、物体和RSU四类实体进行创建后,实体的名称将根据各自类型出现在编辑器左上位置的实体列表中进行显示,并可用于通过点击在编辑器中实现快速查找。模型库    ......
  • 从0开始搭建一个包含文档的组件库
    初始化项目使用vue-press作为文档框架,使用vue3+ts+vite作为组件库和测试项目框架,PnpmWorkspaces作为Monorepo项目的依赖管理工具新建一个文件夹,根据vue-press的官方文档,在根目录下安装了vue-press,同时使用vite初始化组件库项目。修改组件库项目package.json修改name字......
  • 循序渐进搭建复杂B端系统整洁架构
    作者:京东零售赵嘉铎前言:信息时代技术更迭和传播速度不断加快,技术变得泛娱乐化,大数据、云计算、区块链、元宇宙、大模型,一代代技术热点在社会舆论的裹挟之下不断地吸引着资本的眼球,技术人员为了不被时代所淘汰也不得不时刻追赶潮流。在这样一个时代背景下,软件工程作为一门不起眼......
  • 移动开发技术——基本框架搭建
     一、实现效果二、功能说明主界面有上中下三个结构,包含四个界面:联系人、聊天、发现、我的。从聊天可以点击进入列表页面,点击列表的某一行可以进入详情页面,列表的每一行对应不同的数据,列表可以上下滚动,要用到recycleview。需要实现以下功能:activity之间的跳转,数据的绑......
  • H.265流媒体播放器EasyPlayer.js无插件H5播放器关于页面首次加载超时检测
    EasyPlayer.js网页直播/点播播放器是TSINGSEE青犀流媒体组件系列中关注度较高的产品,经过多年的发展和迭代,目前已经有多个应用版本,包括RTSP版、RTMP版、Pro版以及js版,其中js版本作为网页播放器,受到了用户的广泛使用。在功能上,EasyPlayer.js播放器支持直播、点播、录像、快照截图......
  • WVP-pro 搭建相关的坑注意
    Wvp-pro是一个开源的gb28181平台## 一些知识点网址 https://doc.wvp-pro.cn/#/相关的另一个开源的  一个基于C++11的高性能运营级流媒体服务框架ZLMediaKitjava,sprinboot,npmmysqredisdocker坑位wvp部署时,需要设置zlmediakit的secret,这个secret需要在do......
  • 使用ProxyPool搭建代理IP池并获取代理IP示例
    安装ProxyPool首先确保已经安装了 pip 工具(Python的包管理工具),在命令行执行以下命令安装 proxypool:配置ProxyPoolProxyPool的配置文件通常是 config.py,可以根据需求修改配置项,比如设置代理IP的来源、验证周期等。以下是一个简单示例配置(部分关键配置项示意):启动ProxyP......
  • Flutter项目实战(1):通用项目框架搭建
    下面介绍Flutter最基本的通用项目框架搭建,同时实现了一个登录界面图标和登录界面。先看下效果图:使用ScreenUtilInit自适应界面大小;使用Stack支持多个子界面在同一个全屏主界面上选择显示;使用Get插件实现界面之间的跳转和国际化翻译;界面都通过Transform实现了鼠标移动......