位置: IT常识 - 正文

VUE实现Web端多人语音视频聊天(vue多平台)

编辑:rootadmin
1 多人语音聊天功能介绍 本文展示了如何使用 ZEGO Express SDK 构造多人音视频通话场景,即实现多对多实时音视频聊天互动。用户可在房间内与其余用户进行实时音视频通话,互相推拉流。该场景可用于多人实时音视频聊天、多人视频会议等。 2 Web端实现多人语音聊天准备工作 在应用多人音视频通话 ... 1 多人语音聊天功能介绍

推荐整理分享VUE实现Web端多人语音视频聊天(vue多平台),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuerem,vue可以做多页面应用吗,vue可以做多页面应用吗,vue多人开发,vue使用webworker,vuerem,vue怎么实现多页面,vue怎么实现多页面,内容如对您有帮助,希望把文章链接给更多的朋友!

本文展示了如何使用 ZEGO Express SDK 构造多人音视频通话场景,即实现多对多实时音视频聊天互动。用户可在房间内与其余用户进行实时音视频通话,互相推拉流。该场景可用于多人实时音视频聊天、多人视频会议等。

2 Web端实现多人语音聊天准备工作

在应用多人音视频通话场景之前,请确保:

已在项目中集成 ZEGO Express SDK,实现基本的实时音视频功能,详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。已在 ZEGO 控制台 创建项目,并申请有效的 AppID,详情请参考 控制台 - 项目管理 中的“项目信息”。3 vue集成语音聊天示例源码下载

请参考 下载示例源码 获取源码。

相关源码请查看ZEGO Express SDK “src/Examples/Scenes/VideoForMultipleUsers” 目录下的文件。

4 ZEGO音视频SDK使用步骤

本节将介绍如何使用 ZEGO Express SDK 实现多人视频通话。

流程图如下:

API 调用时序图如下:

ZEGO Express SDK 可支持多人视频通话,如上时序图以 2 名房间成员间的实时视频通话为例,建议开发者参考上述流程设计自己的多人实时视频通话场景。

4.1 创建多人音视频聊天引擎实例

创建 ZegoExpressEngine 引擎实例,将申请到的 AppID 传入参数 “appID”,将接入服务器地址传入参数 “server”。

VUE实现Web端多人语音视频聊天(vue多平台)

“server” 为接入服务器地址,获取方式如下:

登录 ZEGO 控制台。在对应项目下单击“查看”。进入“项目配置”界面,在“项目信息”页签的“配置信息”中,单击 “ServerSecret” 后面的小眼睛按钮即可获取对应的接入服务器地址。const zg = new ZegoExpressEngine(appID, server);4.2 多人语音聊天开启房间内用户变化通知

开发者需在每位用户调用 loginRoom 接口登录房间时,将 ZegoRoomConfig 中的 “userUpdate” 设置为 “true” ,用于接收其他用户进出房间的回调通知(即 roomUserUpdate。

const isLogin = await zg.loginRoom( roomID, token, { userID }, { userUpdate: true } );4.3 监听回调事件

为实现多人视频通话功能,需要监听房间内用户和流的增减并做出相应处理,开发者可根据实际需要,实现 ZegoEvent(包含 ZegoRTCEvent 和 ZegoRTMEvent)中的某些方法,创建引擎后可通过调用 on) 接口设置回调。

4.3.1 监听房间内的用户变化

只有调用 loginRoom 登录房间时设置了关注用户变化,即 ZegoRoomConfig 中的 “userUpdate” 设置为 “true”(默认值为 “false”)时,才能监听 roomUserUpdate 回调。

为了监听房间内的用户变化,需注册 roomUserUpdate 回调,已登录房间内用户的新增和删除都会触发该回调,开发者可以根据实际需要在回调中实现自己的业务逻辑。

回调中 “updateType” 参数指明了房间内用户变化的类型,该参数取值如下:

用户变化类型枚举值说明用户新增ADD房间内用户增加(即加入房间),“userList” 为新增的用户列表。用户减少DELETE房间内用户减少(即退出房间),“userList” 为减少的用户列表。

用户首次登录房间时,若此房间内已存在其他用户,该新登录用户会通过此回调接收到新增类型的用户列表,即 “updateType” 为 “ADD” 的回调,该用户列表为房间内已存在的用户。

zg.on('roomUserUpdate', (roomID, updateType, userList) => { console.log('roomUserUpdate roomID ', roomID, streamList);if (updateType === 'ADD') { // update view} else if(updateType == 'DELETE') { // update view}});4.3.2 多人语音聊天监听房间内的流变化

当某条流被删除时,如果开发者正在调用 startPlayingStream 接口拉取该流,请调用 stopPlayingStream 接口停止拉流,否则 SDK 会报拉流错误。

为监听房间内的流变化,需注册 roomStreamUpdate 回调,已登录房间内流的新增和删除都会触发该回调,开发者可以根据实际需要在回调中实现自己的业务逻辑。

回调中 “updateType” 参数指明了房间内流变化的类型,该参数取值如下:

流变化类型枚举值说明流新增ADD房间内流增加,“streamList” 为新增的流列表。流减少DELETE房间内流减少,“streamList” 为减少的流列表。

用户首次登录房间时,若此房间内存在其他用户正在推流,会接收到流新增列表,即 “updateType” 为 “ADD” 的回调。

zg.on('roomStreamUpdate', (roomID, updateType, streamList) => { console.log('roomStreamUpdate roomID ', roomID, streamList); if(updateType === 'ADD') { // update view } else if(updateType == 'DELETE') { // update view }});4.3 推流、拉流、登录房间其他操作

请参考 快速开始 - 实现流程 依次完成登录房间、推流和拉流相关操作。

5 API 参考列表方法描述ZegoExpressEngine初始化 EngineroomStreamUpdate房间内流变化回调roomUserUpdate房间内用户变化回调loginRoom登录房间createStream创建流startPublishingStream开始推流startPlayingStream开始拉流stopPublishingStream停止推流stopPlayingStream停止拉流logoutRoom退出房间5 获取音视频SDK更多帮助

获取本文的Demo、开发文档、技术支持,访问即构文档中心

近期有开发规划的开发者可上即构官网查看,恰逢即构七周年全线音视频产品1折的优惠,联系商务获取RTC产品优惠;

本文链接地址:https://www.jiuchutong.com/zhishi/310809.html 转载请保留说明!

上一篇:Python curses库如何使用(python chess库)

下一篇:pandas中join()的两种应用方法(pandas inner join)

  • 罗技g502怎么调鼠标速度(罗技g502怎么调滚轮速度)

    罗技g502怎么调鼠标速度(罗技g502怎么调滚轮速度)

  • vivos7和s6的区别有哪些(vivos7与s6参数配置对比)

    vivos7和s6的区别有哪些(vivos7与s6参数配置对比)

  • ipad购买日期未验证是什么意思(ipad购买日期未验证手机里却显示了保修时间)

    ipad购买日期未验证是什么意思(ipad购买日期未验证手机里却显示了保修时间)

  • 手机罗马数字怎么打(手机罗马数字怎么打出来)

    手机罗马数字怎么打(手机罗马数字怎么打出来)

  • 手机镜像到电视怎么让电视画面全屏(手机镜像到电视画面很小)

    手机镜像到电视怎么让电视画面全屏(手机镜像到电视画面很小)

  • 微信运动屏蔽别人后对方显示的是(微信运动屏蔽别人)

    微信运动屏蔽别人后对方显示的是(微信运动屏蔽别人)

  • 投影仪3d功能怎么使用(投影仪的3d模式怎么用)

    投影仪3d功能怎么使用(投影仪的3d模式怎么用)

  • 计算机病毒寄生方式(计算机病毒寄生方式分类)

    计算机病毒寄生方式(计算机病毒寄生方式分类)

  • 怎么设置禁止境外来电(怎么设置禁止境外来电移动)

    怎么设置禁止境外来电(怎么设置禁止境外来电移动)

  • 优步与滴滴的区别(优步与滴滴的区别在哪里)

    优步与滴滴的区别(优步与滴滴的区别在哪里)

  • 抖音关注的人顺序为什么会变(抖音关注的人顺序可以改吗)

    抖音关注的人顺序为什么会变(抖音关注的人顺序可以改吗)

  • 半导体降温原理(半导体降温帽图片)

    半导体降温原理(半导体降温帽图片)

  • smart指标数据异常还能重装系统吗(smart指标数据异常怎么办)

    smart指标数据异常还能重装系统吗(smart指标数据异常怎么办)

  • 机械硬盘插主板哪个口(机械硬盘插主板哪个位置)

    机械硬盘插主板哪个口(机械硬盘插主板哪个位置)

  • wps怎么复制所有内容(wps怎么复制所有图片)

    wps怎么复制所有内容(wps怎么复制所有图片)

  • 双向停机是啥意思(双向停机怎么解除)

    双向停机是啥意思(双向停机怎么解除)

  • 抖音上收藏的表情包在哪(抖音上收藏的表情包怎么删除)

    抖音上收藏的表情包在哪(抖音上收藏的表情包怎么删除)

  • 微信怎么发应用给好友(微信怎么发应用文件给好友)

    微信怎么发应用给好友(微信怎么发应用文件给好友)

  • a57有没有nfc功能(a57手机有nfc功能吗)

    a57有没有nfc功能(a57手机有nfc功能吗)

  • 为什么酷狗下载的歌不是mp3格式(为什么酷狗下载的是kgm格式)

    为什么酷狗下载的歌不是mp3格式(为什么酷狗下载的是kgm格式)

  • 栅格化图层是什么意思(栅格化图层样式怎么弄)

    栅格化图层是什么意思(栅格化图层样式怎么弄)

  • word2007怎么设置页码(word2007怎么设置图片环绕方式)

    word2007怎么设置页码(word2007怎么设置图片环绕方式)

  • 照片怎么不超过200k(照片怎么不超过1mb)

    照片怎么不超过200k(照片怎么不超过1mb)

  • 快手直播不推送了咋办(快手直播不推送多久恢复)

    快手直播不推送了咋办(快手直播不推送多久恢复)

  • 饿了么怎么给外地人订餐(饿了么怎么给外地的朋友点外卖)

    饿了么怎么给外地人订餐(饿了么怎么给外地的朋友点外卖)

  • 饿了么的订单怎么删除(饿了么的订单怎么退款)

    饿了么的订单怎么删除(饿了么的订单怎么退款)

  • 怎么用蓝牙听歌(怎么蓝牙听歌拍视频)

    怎么用蓝牙听歌(怎么蓝牙听歌拍视频)

  • 华为折叠手机发布会(华为折叠手机发布时间)

    华为折叠手机发布会(华为折叠手机发布时间)

  • 航天金税盘使用说明
  • 金税盘连接不上电脑是怎么回事
  • 个人所得税申报截止时间
  • 合伙企业投资收益做账
  • 物业公司车棚算固定资产吗
  • 劳务派遣人员保险由谁缴纳
  • 设备5年直线法计提折旧怎么做
  • 合法的扣税凭证图片
  • 剩余折旧月份
  • 营业外支出结转损益
  • 汇算清缴前发票未到
  • 从支付宝里可以查出结婚个人信息吗
  • 电话费开专票可抵扣吗
  • 结转与结余
  • 注册了店面没有营业执照
  • 资产负债率是用年初和年末数吗
  • 如何申请残疾人
  • win11前面板耳机没声音
  • 开启自动备份注册表
  • php数组函数,选班长
  • PHP:oci_field_size()的用法_Oracle函数
  • postman如何设置token
  • 铁路运输企业受托代征的印花税款信息
  • 哪一个国家有大提顿国家公园
  • 临时用工账务处理流程
  • 金税三期税收管理系统响应异常返回信息:没有查询
  • 衍生工具主要用途
  • php图片代码
  • 销售产品是销项税额还是进项税额
  • 递归最小二乘法辨识参数
  • trace 命令用法
  • 差旅费包干是什么意思
  • 应收账款资产负债表负数
  • 企业筹建期间
  • 补计提工资什么意思
  • 财务报表怎么重新编制
  • 三代手续费操作流程
  • access里面也暗含了sql
  • SQL2005Express中导入ACCESS数据库的两种方法
  • 应交税费企业所得税科目
  • 其他债权投资有减值吗
  • 个体户核定征收超过了怎么办
  • 企业所得税季度平均值怎么算
  • 起征点和免征额都是税收优惠形式
  • 结转本年利润按什么算
  • 进货没开票销售开票了
  • 用友反结账怎么操作
  • 购买原材料无法准确划分用途的进项税额怎么抵扣
  • 网络竞价须知
  • 出口为什么没有增值税
  • 现金流水账怎么做表格
  • jdbc连接MySQL实验总结
  • WINDOWS操作系统内置的GUEST
  • ntfs跟fat32
  • windows service 2008 r2
  • wps.exe是什么
  • diskgenius分区linux
  • win8个性化外观恢复默认设置
  • opengl绘图
  • ExtJS TabPanel beforeremove beforeclose使用说明
  • angularjs4
  • jquery 图片
  • shell脚本转码
  • bat批处理执行cmd命令
  • python爬虫怎么做
  • unity3d改变物体坐标系
  • unity克隆物体
  • angularjs4
  • jQuery.datatables.js插件用法及api实例详解
  • 优化ui界面是啥意思
  • javascript包括在html中
  • 在jquery中使用什么方法获取和设置属性
  • js的span标签
  • js中对象
  • jquery插件是干什么的
  • Linux开发基于Qt的Android应用指定调试设备
  • jquery教程实例
  • 高新区税务局发工资时间
  • 云南省税务局网上办税服务厅官网
  • 如何打印更正申请
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设