一种基于JavaScript和HTML的视频会议方法

技术领域

本发明涉及通讯技术领域，具体为一种基于JavaScript和HTML的视频会议方法。

背景技术

传统会议受时间、地域限制范围小、效率低，运用视频会议系统后，各组织可跨越时间、空间阻隔，随时召开异地多方开展日常会议，缩短时间消耗，加快信息传递速度，减少差旅成本支出，打造沟通无障碍的工作空间，成为急需解决的问题。

发明内容

本发明的目的在于提供一种基于JavaScript和HTML的视频会议方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种基于JavaScript和HTML的视频会议方法，所述方法包括以下步骤：

根据accessKey和secretKey来获取token，使用token、用户ID及房间ID来创建视频房间；

进入会议房间后处理回调事件；

使用麦克风、摄像头、屏幕共享、白板、聊天功能，发布实时状态；

其他用户通过回调事件展示各个用户及功能状态，并展示到用户当前设备；

非房主用户离开房间时，其他用户回调该用户状态；房主离开房间时，销毁房间，视频会议结束。

优选的，进入会议房间后处理回调事件的具体步骤包括：

用户连接状态：连接成功、重新连接成功、重新加会成功时，开始以秒为单位收集网络情况；网络故障与服务器连接超时时，离开房间并清场应用层，停止收集网络情况，用户退出房间；

会议中已经发布的视频资源，采取订阅处理；

桌面共享、白板、聊天等功能均需要采取订阅处理；

参会者信息回调，具体展示在参会者列表，用户退会及加入会议及时通知房主。

优选的，点击麦克风按钮及摄像头按钮后，用户端通过dom操作修改麦克风及摄像头展示状态，获取设备麦克风及摄像头权限，得到用户授权后，添加当前用户到麦克风用户列表，摄像头开启后添加画面到屏幕中间，视频最多允许8路，数量超出的部分不予展示，展示过后对本地视频进行发布，至此其它用户进行远端订阅视频流及音频流，只订阅未订阅过的视频并展示远端音视频画面到本地设备，房间内所有用户均可见，每个用户的本地设备都只能最多展示8路视频，使用dom操作进行视频的展示与取消。

优选的，用户本地点击屏幕共享按钮，弹出弹窗提示选择共享源，选择Chorm标签页栏中的展示的标签页，当前标签页、另一标签页、窗口或者整个屏幕，选定后点击分享按钮进行屏幕共享，发布视频流信息，使得其他用户能够订阅到该用户的共享信息，同样是订阅未订阅过的桌面共享，当某一用户进行屏幕共享时，其他用户无法进行屏幕共享、白板操作、展示摄像头功能。

优选的，用户点击白板按钮创建白板，默认为底色，白板右上方有操作选项，分别为鼠标、激光笔、笔、颜色、橡皮擦、撤销、清除、保存；点击鼠标，则移动鼠标时在白板上以箭头显示移动；点击激光笔，则移动鼠标时在白板上以激光红点显示移动；点击笔时，展示不同书写方式，如曲线、圆形、菱形、正方形等；点击颜色时，展示颜色选择框，根据RGB、HSL、HEX设置颜色模式；点击橡皮擦，用橡皮擦移动进行区域书写内容擦除；点击撤销时，撤销上一步操作；点击清除时，白板上所有内容将会被清除；点击保存时，会以图片形式将白板及其内容保存到本地。

优选的，聊天板块输入框支持输入各种文字，敲击回车键进行发送，发送成功后参会人员皆可见消息内容，历史消息不会因成员离开房间而消失，新进入房间的用户不可见进入房间之前的聊天消息。

优选的，还包括时限控制，视频会议房间体验时间为60分钟，房间开通55分钟时，房主设备提示五分钟后自动关闭房间，房间内其他用户无提示，五分钟后房间自动关闭，房间内所有用户退出房间，停止收集网络情况。

与现有技术相比，本发明的有益效果是：

本发明提出的基于JavaScript和HTML的视频会议方法，基于JavaScript和HTML编程语言，angular前端框架而发明的视频会议系统，应用于实时音视频项目的体验RTCS服务，用户可限时体验线上视频会议，使用系统中的各个功能，以满足自身对线上会议的需求。

附图说明

图1为本发明方法流程图；

图2为本发明进入会议房间回调各功能状态示意图；

图3为本发明麦克风及摄像头功能示意图；

图4为本发明屏幕共享功能示意图；

图5为本发明白板功能示意图；

图6为本发明聊天功能示意图。

具体实施方式

为了使本发明的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本发明实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本发明一部分实施例，而不是全部的实施例，仅仅用以解释本发明实施例，并不用于限定本发明实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，本发明提供一种技术方案：一种基于JavaScript和HTML的视频会议方法，所述方法包括以下步骤：

根据accessKey和secretKey来获取token，使用token、用户ID及房间ID来创建视频房间；

进入会议房间后处理回调事件；

使用麦克风、摄像头、屏幕共享、白板、聊天功能，发布实时状态；

其他用户通过回调事件展示各个用户及功能状态，并展示到用户当前设备；

非房主用户离开房间时，其他用户回调该用户状态；房主离开房间时，销毁房间，视频会议结束。

实施例二

在实施例一的基础上，下面通过实例的方式进一步说明本专利，实例为创建视频会议房间及实现各个功能，该基于JavaScript和HTML的视频会议系统的实现包括六个结构：

结构一：进入会议房间，回调各功能状态。该视频会议系统需要特定的accessKey和secretKey来获取token，取到token后，再根据用户ID及房间ID来创建视频房间，房间ID重复时会进行提示，不允许新建房间。进入房间后，展示视频会议基本功能，左上角为房间ID,ID右侧为复制按钮，右上角为房间的总流量，单位kps，中间部分为成员开通摄像头缩略画面，下部分为麦克风、摄像头、离开会议、屏幕共享、白板按钮，右侧左边栏位为参会成员列表，包含成员用户名及其麦克风状态，其中房主用户名后面有房主标识，右边栏位为聊天信息，如下图2所示；

进入房间后进行回调事件处理，包括以下几方面：1、用户连接状态：

连接成功、重新连接成功、重新加会成功时，开始以秒为单位收集网络情况；网络故障与服务器连接超时时，离开房间并清场应用层，停止收集网络情况，用户退出房间；2、会议中已经发布的视频资源，采取订阅处理；

3、桌面共享、白板、聊天等功能均需要采取订阅处理；4、参会者信息回调，具体展示在参会者列表，用户退会及加入会议及时通知房主。

结构二：麦克风及摄像头功能。点击麦克风按钮及摄像头按钮后，用户端通过dom操作修改麦克风及摄像头展示状态，获取设备麦克风及摄像头权限，得到用户授权后，添加当前用户到麦克风用户列表，摄像头开启后添加画面到屏幕中间，视频最多允许8路，数量超出的部分不予展示，展示过后对本地视频进行发布，至此其它用户可进行远端订阅视频流及音频流，只订阅未订阅过的视频并展示远端音视频画面到本地设备，房间内所有用户均可见。每个用户的本地设备都只能最多展示8路视频，使用dom操作进行视频的展示与取消。如下图3所示；

结构三：屏幕共享功能。用户本地点击屏幕共享按钮，弹出弹窗提示选择共享源，选择Chorm标签页栏中的展示的标签页，当前标签页、另一标签页、窗口或者整个屏幕，选定后点击分享按钮进行屏幕共享，发布视频流信息，使得其他用户能够订阅到该用户的共享信息，同样是订阅未订阅过的桌面共享。当某一用户进行屏幕共享时，其他用户无法进行屏幕共享、白板操作、展示摄像头等功能。如下图4所示；

结构四：白板功能。用户点击白板按钮创建白板，默认为底色，白板右上方有操作选项，分别为鼠标、激光笔、笔、颜色、橡皮擦、撤销、清除、保存。点击鼠标，则移动鼠标时在白板上以箭头显示移动；点击激光笔，则移动鼠标时在白板上以激光红点显示移动；点击笔时，展示不同书写方式，如曲线、圆形、菱形、正方形等；点击颜色时，展示颜色选择框，可以根据RGB、HSL、HEX设置颜色模式；点击橡皮擦，可用橡皮擦移动进行区域书写内容擦除；点击撤销时，撤销上一步操作；点击清除时，白板上所有内容将会被清除；点击保存时，会以图片形式将白板及其内容保存到本地。

白板功能需要一名用户创建，以该用户的本地设备确定白板内元素的位置，之后其他用户通过白板回调获取canvas元素，基于各个用户当前设备选染白板内元素的位置。同时其他用户均可操作该白板，笔、颜色、橡皮擦、撤销、清除等功能只在当前设备生效，无法擦除、撤销、清除其他用户的操作，保存内容则为所有用户书写的内容。当某一用户进行白板操作时，所有用户无法进行屏幕共享、展示摄像头等功能。白板页面如下图5所示；

结构五：聊天功能。聊天板块输入框可输入各种文字，敲击回车键进行发送，发送成功后参会人员皆可见消息内容。历史消息不会因成员离开房间而消失，新进入房间的用户不可见进入房间之前的聊天消息。如下图6所示；

结构六：时限控制。视频会议房间体验时间为60分钟，房间开通55分钟时，房主设备提示五分钟后自动关闭房间，房间内其他用户无提示。五分钟后房间自动关闭，房间内所有用户退出房间，停止收集网络情况。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。