企业微信会议小程序:降低跨组织会议门槛,实现微信用户与企业成员便捷沟通

2024-06-15
来源:网络整理

|简介:企业微信跨组织会议门槛较高,外部客户或合作伙伴需要在企业微信上建立线上组织,才可以加入会议。通过引入小程序加入会议功能,可以降低跨组织会议门槛。针对微信用户发起会议、邀请企业微信及微信好友加入会议的场景,企业微信会议小程序还提供了微信端接入及发起会议功能,让微信用户能够发起会议、邀请企业成员加入会议。

产品功能描述

企业微信会议接入腾讯云提供的SDK,腾讯会议后台提供创建会议、加入会议、获取会议信息的REST API接口。

企业微信会议接入腾讯云提供的SDK,腾讯会议后台提供创建会议、加入会议、获取会议信息的REST API接口。

虽然企业微信APP发起的会议支持邀请微信好友加入会议,但用户需要下载安装企业微信并注册企业微信后才能加入会议,加入会议的门槛相对较高。

虽然通过企业微信吸引新用户很有帮助,但是不够人性化,所以我们推出了一个解决方案,让用户直接通过微信小程序加入会议。

功能表现:

企业微信APP发起会议后,可以邀请微信好友,好友会收到小程序卡片,打开小程序即可直接加入会议;或者微信用户发起会议,邀请企业微信或微信用户加入会议。

视频会议在小程序端的UI表现:

视频会议支持美颜、会议附件、文档共享、屏幕共享等功能:

音频会议和会议管理:

支持企业微信发起预约会议,邀请微信用户参加,会议开始时,会收到微信服务通知,提醒进入会议;

会议技术流程介绍

首先介绍一下TRTC

TRTC:腾讯实时音视频(TRTC);

腾讯云提供多人音视频通话解决方案和低延迟互动直播解决方案两大服务,提供覆盖手机、桌面等全平台的客户端SDK和云端API,终端用户还可以在微信、QQ、企业微信小程序中使用TRTC服务,在网页上也可以轻松使用。

下图是TRTC官方的产品架构图:

腾讯会议与TRTC的关系

腾讯会议基础服务基于 TRTC 的音视频媒体服务+房间访问权限保护(建立与 TRTC 房间不互通的私有房间集合),结合腾讯会议自有的会控能力、会议模式下强大的混音模块等,同时还包含腾讯会议自身扩展的一些功能;

TRTC 房间访问权限保护机制

房间内的可选字段,用于腾讯云检查用户是否有权限进入指定房间。

由服务端计算提供,加入会议室时由腾讯会议后台返回,为采集必填字段。

小程序接入会议整体技术解决方案

企业微信会议依赖模块示意图

腾讯会议有自己的小程序,建立在内部API体系上,不对外开放,但企业微信端接入是基于Rest API的开放体系。

此前,我们从未向第三方开放过小程序的能力。企业微信推出的小程序接入,是腾讯会议首次提供加入会议小程序的渠道。由于春节期间疫情爆发,腾讯会议的后端同事经常通宵达旦,在无人支持的情况下,整个项目流程异常漫长和痛苦。

TRTC 官方提供的小程序 demo 是利用微信小程序提供的 live- 和 live- 实现的,小程序加入腾讯会议私域房间,主要技术流程如下图所示:

会议小程序接入整体架构示意图:

接入腾讯会议整体流程概述:

小程序用户加入腾讯会议逻辑会议室;

加入成功后,获取音视频房间信息,包括实时音视频控制台端媒体流动态分配的机器IP、端口;

获取加入音视频媒体室的用户信息及鉴权信息,包括音视频室RTMP代理的服务器及端口信息。根据用户所在区域通过云端动态分配最优线路,最大限度保证用户在会议中的音频、视频及通话的流畅度;

在获取音视频鉴权必要信息后,通过live-建立音视频通道链路,响应音视频通道推送的用户音视频流,推送采集到的音视频流,并推送、接收音视频混录流或辅流,基于辅视频流实现屏幕共享,发起屏幕共享的人可以通过live-推送当前录屏的数据流,腾讯会议侧音视频房间接口机负责转发给RTMP代理,再通过音视频建立的通道分发数据流,推送给房间内其他用户;

同时建立企业微信会议逻辑房间的长链接通道,初始化当前用户在逻辑房间的状态;企业微信会议拥有独立的会控能力,包括文档共享、屏幕共享、灵活的主持人会控能力等,均基于企业微信会议长链接服务;

企业微信拥有独立的会议控制能力,具体的会议控制命令包括(人员上线/下线、麦克风开关、视频开关、主持人控制、请求上台发言、主持人控制会议人员进入或灵活的管理规则等)。这部分能力由企业微信后台单独控制,例如当人员上线/下线时,通过REST API通知腾讯会议后台更新会议状态,尽可能保持音视频房间成员状态与企业微信逻辑房间状态同步;

企业微信会议完整技术方案示意图:

会议终端接入解决方案及注意事项

企业微信App作为客户端接入腾讯会议提供的SDK,访问音视频房间,包括音视频的采集、播放、美颜、推流控制等,并与企业微信后台的逻辑房间层建立长链接通道。

企业微信App通过企业微信后台请求接口发起会议,会议创建后会返回音视频媒体房间信息,企业微信App获取音视频房间信息后通过SDK发起推送行为,接收推送事件和音视频数据,包括媒体房间的用户信息。

音视频房间用户列表是根据创建会议时传入的pid生成的,这里逻辑房间层也需要将用户信息添加到用户列表中,将逻辑房间和媒体房间用户关联起来。

接收同房间用户的音视频流数据,并使用直播渲染的方式显示用户的视频。

小程序发起长链接与企业微信后台建立同步通道,用于会控命令与上行命令的交互。

企业微信小程序发起者可以分享屏幕,这是通过 TRTC 的视频流通道采集和推送能力,通过 TRTC 的音视频房间推流给其他用户,其他用户收到的分享者视频画面替换为屏幕画面(TRTC 支持辅流,即视频画面和分享的屏幕画面都可以显示,微信小程序暂不支持);

会议小程序独立会控

企业微信会议过程中的会控是通过单独的逻辑房间长链接通道实现的,会控逻辑相关的时序操作流程如下图所示:

企业微信的会议控制包括主持人控制参会人员上下台,或者单独控制视频、音频的开启、关闭等。

企业微信用户可以在会议中发起文档分享,这是企业微信提供的一项私有能力。发起人分享文档时,通过企业微信后台转化为共享数据流,通过长链接推送给其他用户。小程序接收到共享数据后实时更新,包括发起人在分享中的翻页、画箭头等动作,都会同步渲染在小程序中。

音视频接入层

音视频引擎介绍

引擎介绍由腾讯会议同学提供

引擎接口层主要向上层提供启动、停止、设置各类参数的接口,以及一些引擎事件通知回调等。另外,引擎并不提供实际的网络传输,而是向上层提供发送和接收数据的接口。

IO流是引擎一个非常重要的抽象概念(有点类似响应式编程的思想),各种数据处理模块(如解包、FEC、音频解码、混音等)通过IO流串联起来,形成一条或多条单向的树形链路,各个模块的处理依次分布在各个节点上,IO流的拓扑结构由组织构成。

IO流是引擎一个非常重要的抽象概念(有点类似响应式编程的思想),各种数据处理模块(如解包、FEC、音频解码、混音等)通过IO流串联起来,形成一条或多条单向的树形链路,各个模块的处理依次分布在各个节点上,IO流的拓扑结构由组织构成。

每个节点绑定一个对象,需要实现两个功能:和。前者在数据流入本模块时进行解析处理,后者在数据流出本模块时将处理后的数据传递给下一个模块。

引擎的基本处理流程。引擎有两个主要流程:

接收流和发送流。这两个流的拓扑结构是在引擎启动时构建的。

1. 接收流

Dmx节点收到网络发来的数据包后,进行解包,然后按照uin分成几部分,每部分有独立的IO调用链,分别对应FEC解码(含ARQ)、QT解码、防抖、音频解码,然后全部合并在一起,进入混音模块,最后输出到终端播放。

2. 发送流

发送流从录音设备获取数据开始,然后数据流经过3A、编码、QT编码、FEC编码,最后发送到网络上。

我们遇到的问题及解决方案

我们在开发会议小程序的过程中遇到了各种各样的问题,下面记录并分享我们遇到的问题以及解决办法;

如果你也遇到过类似的问题,可以通过微信联系我们,交流经验。

1. 文档共享/屏幕共享相关问题

文档共享、屏幕共享过程中短暂断线,导致数据流无法渲染;

问题:

腾讯会议提供的音视频服务均依赖于live-建立的通道,若live-组件在文档共享或屏幕共享过程中因切换视角而暂时中断,会议音视频将中断,需重新建立成功后才能恢复。

解决方案:

通过控制视图节点的布局调整,保持实时连接状态,避免视图的重新渲染;

文档共享的技术实现

微信小程序接入视频会议开发_微信开会的小程序_经常收到微信小程序开发会议

当简企业微信小程序的会议主持人发起文档分享时,可以在文档上绘制一个标记图标,小程序会接受文档内容和文档分享的指令信息,指令信息为箭头的起始和终止坐标的x/y坐标。

小程序提供文档分享及查看窗口,同时调整live-和live-的表现,通过长链接接收命令信息后,在文档内容上层创建一个等大小的箭头用于绘制箭头,命令的实时变化会通过长链接通知,解决演示中箭头指向问题;

我们遇到的一个比较严重的bug就是在缩放到一定比例之后,会出现超出绘制范围的bug,导致箭头无法渲染(老版本API的问题);

屏幕共享的技术实现流程

会议中的屏幕共享通过辅助视频流上行推送,其他端用户通过直播进行推送,在推送的用户列表信息中,会出现一个用于标识屏幕共享的视频流信息。

当小程序收到屏幕分享视频流时,会切换到屏幕分享状态,将屏幕分享数据显示在大屏幕上,并以直播方式正常播放分享者的视频;

屏幕共享视频流采用实时回放;

2. 音视频控制相关问题

音频和视频在舞台上和舞台下时,推流中断,屏幕闪烁的问题

音视频房间与逻辑房间不一致的问题

音量控制动画

各个端采集视频图像的方向不同(移动端、小程序端、桌面端的区别)

3. 其他问题

腾讯会议室认证问题

前期遇到的问题大部分都来自于此,首先这里有两个概念,一个是逻辑房间,一个是音视频房间,需要的认证信息不一样,再加上腾讯会议测试环境和正式环境不互通,导致这里的问题比较多。

加入房间时的用户身份信息和签约时使用的字段有所不同,必要的字段由腾讯会议后台提供。

因为音视频媒体室所需要的签名都是腾讯会议处理,都是依赖转换后的签名来生成签名,另外还存在测试环境和正式环境不互通的问题。

测试环境不稳定

原生组件同层渲染相关问题

1. 小程序原生组件的问题

小程序原生组件处于最高层,所以无论页面上其他组件设置多少z-,都无法覆盖原生组件。同层渲染是为了解决小程序中普通元素之间原生组件无法覆盖的问题,以及解决特定组件下UI表现的各种异常问题;

会议小程序用到的组件如下(更多原生组件请参考官方文档):

- 居住-

- 居住-

-(仅在以下情况下表现为本机组件)

-

官方对于原生组件的使用限制:

由于原生组件脱离了渲染进程,使用时有以下限制:

原生组件的层级最高,所以页面上其他组件无论设置多少z-,都无法覆盖原生组件。

后续插入的原生组件可以覆盖先前插入的原生组件。

原生组件还不能在-view 中使用。

某些 CSS 样式无法应用于原生组件。

例如:

无法为原生组件设置 CSS 动画

无法将本机组件定义为:

不能在父节点使用:用来剪裁原生组件的显示区域

原生组件的事件监听不能使用 bind: 方法,仅支持 。原生组件也不支持 和 事件绑定方法。

原生组件会遮挡弹出的调试面板。工具方面,原生组件是用网页组件模拟的,很多时候不能很好的还原真机性能,建议开发者在使用原生组件时尽量在真机上调试。

2.-原生组件的View适配方案

存在严重缺陷,但在原生组件不支持同层渲染的情况下,这是必要的

-查看和-

为了解决原生组件最高级别的限制,小程序特意提供了-view和-,可以在一些原生组件上进行叠加。

这两个组件也属于原生组件,但是使用限制和其他原生组件不同,-view为了解决依赖按钮的事件行为,支持嵌套的view类型;

使用 -View 覆盖实时和实时取景元素

严重缺陷:

-view 不支持滚动列表响应滚动事件和行为,导致涉及滚动页面的列表出现问题;

3. 同层渲染遇到的问题及解决方法

若您发现同层渲染存在无法解决的问题,您可以强制关闭同层渲染。

//app.json中的配置

“”:””

同层渲染是为了解决原生组件的层级问题而设计的,支持同层渲染之后,原生组件可以随意和其他组件叠放,层级的限制将不复存在。

不过需要注意的是组件还是原生渲染,样式在原生组件内部一般无效,目前map、live-、live-、(2d)组件已经支持同层渲染。

原生组件的相对层级,为了调整原生组件间的相对层级,支持在样式中声明 z- 来指定原生组件的层级,这个 z- 只是调整原生组件间的层级顺序,其层级依然高于其他非原生组件。

1、live-和live-组件不支持点击事件,但是支持切换全屏操作;

2. 同层渲染时视图元素跳动问题

问题表现:

叠加在原生组件上的普通视图元素在列表滚动时位置会发生变化,且偶尔会跳出实时视图,无法跟随容器的作用域变化;

解决方案:

在普通视图的根节点上添加 will- 和 ,告知该方法元素将发生哪些变化。这里将会发生缩放的变化,强制触发重新渲染;

将要-: ;

:(1);

3. 视频流出现黑屏

问题表现:

推送视频流地址时,播放时没有视图流信息,导致播放窗口黑屏;

解决方案:

在直播监控中判断当前视频流的帧率是否正常,若不正常则使用头像显示覆盖黑屏。

4. 屏幕共享视频流中断并恢复

问题表现:

企业微信用户发起屏幕共享时,若用户未结束共享但视频流推送中断,则屏幕会暂停或黑屏。

解决方案:

当我们检测到用户结束了阻止共享行为时,我们在逻辑室增加通知逻辑,通知小程序主动结束屏幕共享状态;

若用户仍在共享中,腾讯会议音视频房间推送的视频流中断,则会提示用户重新进房间恢复画面(并反馈腾讯会议修复此bug);

5. 实时滚动问题(遗留问题)

问题表现:

当用户点击某个用户头像进入全屏,再返回列表时,有一定概率出现小窗滚动;

解决方案:

初步方案是将普通视图节点与直播全屏视图分离,并列放置于同一层级。由于调整幅度较大,后续会作为技术优化进行完善。

分享