H5Media 入门Demo -- 语音、视频、桌面基础功能演示

       H5Media 是一套纯网页版(无需安装插件)的跨平台实时音视频SDK,基于H5Media开发的应用,同一套代码便可运行在所有平台及浏览器上,并支持嵌入到手机原生APP和PC桌面应用中。

       在了解了 《H5Media 开发手册》之后,接下来,我们将给出一个Demo,来演示H5Media的语音视频和屏幕分享功能。

一. 主要功能及支持平台

1.本Demo的主要功能有

(1)一对一语音视频聊天。

(2)远程桌面观看。

(3)当客户端掉线时,会进行自动重连,当网络恢复后,重连成功。

2.支持的平台

(1)支持的操作系统包括:Windows、信创国产Linux(银河麒麟、统信UOS)、Android、iOS、Mac、鸿蒙OS。

(2)支持的CPU架构:X86/X64、ARM、MIPS、Loongarch。

(3)支持几乎所有的主流浏览器:Chrome、Edge、Firefox、Safari、360浏览器、QQ浏览器等。    

(4)另外,我们测试过,使用APP套壳,在WebView控件中加载Demo页面,也是可以正常视频聊天的。

         如此,可以在C/S架构的客户端或手机APP中嵌入WebView控件来引入视频聊天或桌面分享功能的。

二. 开发环境

1. 服务端:

    服务端开发环境是 Visual Sudio 2022 ,开发语言是 C# 。

2. Web端:

    PC版Web开发环境是 VS Code 1.85 ,使用 vue 3。

    手机版Web开发环境是 HBuilder 3.8.12,uni-app(导出H5)。

三. 运行效果

     此Demo的源码分为三个部分,分别是服务端,PC端Web(横版)和手机端Web(竖版)。接下来首先来看移动端Web的运行效果。 

(1)首先是登录界面,在登录界面有三个输入框,依次为服务器IP、用户账号和用户密码,在本Demo中,用户账号和用户密码均可随便填写。           

          

(2)接下来是首页界面,首页界面有一个已连接的提示框,代表的意思是目前与服务端是连接状态,当因为网络原因或者其他原因断开时,则会提示已断开连接。   

          

(3)发起视频聊天,输入对方的账号,然后点击请求视频会话按钮即可向对方发起视频聊天请求,对方接受请求和即可聊天了。    

         下图是手机端的视频聊天效果:

           

注意:手机端是不支持分享自己的桌面的,但是移动端可以观看PC端桌面。

(4)接下来看看一下PC端的运行效果。

         登录之后主页界面,左上角是关于自己的一些信息,右边窗口则是显示连接对方的摄像头或者桌面。    

           

(4)下图是在PC端观看他人桌面。

         输入对方的账号,然后点击请求远程桌面,在对方同意后便可以观看别人的屏幕了。  

         

四. 服务端源码说明

        注意,由于浏览器的限制,如果你要将Web端部署到公网上,需要使用HTTPS协议,否则无法访问摄像头。

        与之对应的,服务端也需要使用到WSS协议,因此需要准备一份SSL证书用于部署。如果你仅仅只是在本地运行看一下效果,则无需准备。

   

        上图为服务端初始化代码,若不打算部署只是在浏览器中加载本地Demo页面,则应将上图中的第六行注释掉,并将第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替换掉。

   若打算将网站部署在服务器上,则需要将第五行X509Certificate2中的两个参数分别修改为你证书的路径和密码。

五. Web端源码说明

       本Demo的中的Web端包含两套代码,其中移动端Web采用Uniapp进行开发,PC端Web采用Vue框架进行开发。为了便于理解,下面对源码中的关键点进行讲解说明,两套代码逻辑基本相同,因此这里不作区分。 

1. 消息定义

在本Demo中,我们定义了10个消息类型,用于Web端之间进行通信,其定义如下:

const informationTypes = {
  // 视频请求
  VideoRequest: 0,

  // 回复视频请求的结果
  VideoResult: 1,

  // 通知对方 挂断 视频连接
  CloseVideo: 2,

  // 通知好友 网络原因,导致 视频中断
  NetReasonCloseVideo: 3,

  // 通知对方(忙线中) 挂断 视频连接
  BusyLine: 4,

  // 远程桌面请求
  DesktopRequest: 5,

  // 回复远程桌面请求的结果
  DesktopResult: 6,

  // 主动取消远程桌面请求
  CancelDesktop: 7,

  // 对方(主人端)主动断开远程桌面
  OwnerCloseDesktop: 8,

  // 客人端断开远程桌面连接
  GuestCloseDesktop: 9
};

      由于这些消息类型经常会使用到,因此需要将其放到一个全局都能访问到的地方,在移动端Web源码中,它被放在了Vuex中。而在PC端Web源码中,它放在src目录下的omcs目录下。 

2. 自定义消息处理器

     在登录成功后的这个时机,通过调用多媒体管理器上的 SetCustomMessageReceivedCallback 方法,我们向 multimediaManager(多媒体管理器)注册一个回调函数,这个回调函数会在接收到其他用户或服务端的消息时被触发。

      这个回调函数会接收一个对象类型的参数,其中包含了消息的类型和消息发起者的用户名数据,然后就可以根据消息的类型来完成自己的业务操作了。下图是本Demo中定义的消息处理器:  

      

3. 一对一语音视频

      在本Demo中,一对一语音视频聊天功能的实现逻辑简而言之就是:例如用户A想要与用户B视频聊天,那么用户A向用户B发送VideoRequest消息,在用户B收到来自用户A的VideoRequest消息时选择同意与否,并将携带用户B意愿数据的VideoResult消息发送用户A。

// 请求视频会话
const videoRequest = async () => {
  // ...
  multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null);
  // ...
};

// 响应视频会话
const videoResult = (flag) => {
  // ...
  multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, [flag ? 1 : 0], "");
  // ...
};

4. 桌面分享

     与一对一语音视频聊天功能类似,实现桌面分享也是一方发起请求,一方进行回应。与语音视频对应的,桌面分享的请求的消息类型为DesktopRequest,响应的消息类型为DesktopResult。

5. 断网重连

     在网络断开时,用户进入掉线状态(与服务器断开),每5秒会进行与服务器的重新连接。提前向多媒体管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回调,能够在与媒体服务器断开和重新连接成功时做一些事情。 

六. 如何在本地部署运行Web端

     Web端包含两套代码,其中移动端Web的目录是H5MediaDemo_WebH5,PC端Web的目录是H5MediaDemo_WebPC。 

1. 移动端web:

      由于移动端web是采用uniapp开发的,而uniapp项目需要通过HBuilder X来运行,因此,你需要在电脑上安装一个HBuilder X,然后在HBuilderX中打开运行——>运行到浏览器,然后选择一个浏览器就可以运行起来了,如下图:

       

2. PC端web:

       PC端采用Vue3开发的,需要依赖NodeJS环境,因此,你需要在电脑上安装一个NodeJS(建议安装长期维护版)。在安装完后,通过在命令行窗口输入node -v和npm - v来检查是否安装成功:      

       

       确定安装成功后,通过命令行进入到H5MediaDemo_WebPC的项目根目录,然后输入npm run dev即可将项目运行起来。 

       

七. 源码下载

(1)PC版源码

(2)手机版源码

      另外,我们已经部署好了测试服务器,以方便测试。    

      PC   Web 测试网址: https://h5rtc.oraycn.com:544

      手机 Web 测试网址: https://h5rtc.oraycn.com:543 

 

--------------------------------------------------------------------------------------------------------------------  

Q Q:168757008

官网: www.oraycn.com

导航

首页

官方网站

联系我们

立即咨询 

站内搜索

ESFramework 通信框架

详细说明

SDK与Demo下载

ESFramework FAQ

版本变更记录

OMCS 语音视频框架

详细说明

SDK与Demo下载

OMCS FAQ

版本变更记录

OrayTalk 企业即时通讯系统

详细说明

客户端下载

OVCS 视频会议系统

详细说明

源码下载

傲瑞实用组件

SDK下载

H5Media 纯网页音视频交互

NPusher 推流组件

MCapture 语音视频采集组件

MFile 语音视频录制组件

MPlayer 语音视频播放组件

OAUS 自动升级系统

StriveEngine 轻量级的通信引擎

傲瑞组件 FAQ

授权

授权流程

产品选购指南

授权方案说明

授权SDK使用说明

其它

支持信创国产化

SDK使用技巧

联系我们