在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了。本文将实现一个纯网页版的视频聊天和桌面分享的Demo,可直接在浏览器中运行,不需要安装任何插件。

一. 主要功能及支持平台

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端的视频聊天效果:

注意:手机端是不支持分享自己的桌面的,但是移动端可以观看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)手机版源码

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

(1)PC  Web 测试网址

(2)手机 Web 测试网址

网页版视频聊天Demo实现的介绍就到这里了,谢谢!

如何实现纯网页语音视频聊天和桌面分享?(附源码,PC版+手机版)的更多相关文章

  1. 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)

    今天我们来盘一盘Socket通讯和WebSocket协议在即时通讯的小应用——聊天. 理论大家估计都知道得差不多了,小编也通过查阅各种资料对理论知识进行了充电,发现好多demo似懂非懂,拷贝回来又运行 ...

  2. 史林枫:开源HtmlAgilityPack公共小类库封装 - 网页采集(爬虫)辅助解析利器【附源码+可视化工具推荐】

    做开发的,可能都做过信息采集相关的程序,史林枫也经常做一些数据采集或某些网站的业务办理自动化操作软件. 获取目标网页的信息很简单,使用网络编程,利用HttpWebResponse.HttpWebReq ...

  3. Android 音视频深入 十八 FFmpeg播放视频,有声音(附源码下载)

    项目地址https://github.com/979451341/AudioVideoStudyCodeTwo/tree/master/FFmpegv%E6%92%AD%E6%94%BE%E8%A7% ...

  4. Android 音视频深入 九 FFmpeg解码视频生成yuv文件(附源码下载)

    项目地址,求star https://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(MP4%E8 ...

  5. 【转】OMCS网络语音视频聊天框架(跨平台)

    原文地址:http://www.cnblogs.com/zhuweisky/archive/2012/08/02/2617877.html OMCS网络语音视频框架是集成了语音通话.视频通话.远程桌面 ...

  6. SpringBoot2.x整合Prometheus+Grafana【附源码+视频】

    图文并茂,新手入门教程,建议收藏 SpringBoot2.x整合Prometheus+Grafana[附源码+视频] 附源码+视频 目录 工程简介 简介 Prometheus grafana Spri ...

  7. 循序渐进做项目系列(4)迷你QQ篇(2)——视频聊天!(附源码)

    一·效果展示 源码派送:MiniQQ1.1 文字聊天的实现参见:循序渐进做项目系列(3):迷你QQ篇(1)——实现客户端互相聊天 二·服务端设计 对于实现视频聊天而言,服务端最核心的工作就是要构造多媒 ...

  8. 网络语音视频技术浅议(附多个demo源码下载)

    我们在开发实践中常常会涉及到网络语音视频技术.诸如即时通讯.视频会议.远程医疗.远程教育.网络监控等等,这些网络多媒体应用系统都离不开网络语音视频技术.本人才疏学浅,对于网络语音视频技术也仅仅是略知皮 ...

  9. 免费美女视频聊天,多人视频会议功能加强版本(Fms3和Flex开发(附源码))

    Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第4篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/a ...

  10. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

随机推荐

  1. Django笔记四十四之Nginx+uWSGI部署Django以及Nginx负载均衡操作

    本文首发于公众号:Hunter后端 原文链接:Django笔记四十四之Nginx+uWSGI部署Django以及Nginx负载均衡操作 这一篇笔记介绍如何使用 Nginx + uWSGI 来部署 Dj ...

  2. [USACO2007NOVS] Milking Time S

    题目描述 Bessie 可以在接下来 \(N\) 个小时内产奶,为了方便,我们把这 \(N\) 个小时 \(0\dots N-1\) 编号. FJ 在这 \(N\) 个小时内有 \(M\) 段时间可以 ...

  3. 第一行代码 Android 第三版读后感

    <第一行代码Android 第三版>是一本非常好的Android开发入门书籍.本书结合作者的丰富经验和实际案例,通过一步一步的介绍,详细地讲解了Android开发的各个方面,包括Andro ...

  4. Codeforces Round #426 (Div. 2) problem C

    C. The Meaningless Game time limit per test 1 second memory limit per test 256 megabytes input stand ...

  5. 解析$nextTick魔力,为啥大家都爱它?

    1.为什么需要使用$nextTick? 首先我们来看看官方对于$nextTick的定义: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 由于vu ...

  6. 华企盾DSC:wps个人模式无策略组新建的文件仍然加密

    解决方法:右键wps安装目录手动解密即可(原因:wps模板被加密导致)

  7. selenium之鼠标键盘操作

    鼠标操作 1.引入ActionChains类 2.定位相关元素 3.在ActionChains().调用相关鼠标操作方法 from selenium.webdriver.common.action_c ...

  8. Python——第四章:闭包(Closure)、装饰器(Decorators)

    闭包: 本质, 内层函数对外层函数的局部变量的使用. 此时内层函数被称为闭包函数    1. 可以让一个变量常驻与内存,可随时被外层函数调用.    2. 可以避免全局变量被修改.被污染.更安全.(通 ...

  9. Rust 学习笔记

    rust 学习梳理 数据类型 基于已明确的类型,Rust会推断剩下大部分类型.基于类型推断Rust具备了与动态类型语言近似的易读性,并仍能在编译期捕获类型错误. 函数可以是泛型的:单个函数ujiu可以 ...

  10. 如何将没有复制或移动构造函数的对象放入vector容器

    正文 直接说答案,这个问题无法实现.原因是因为std::vector容器的插入一定会调用类对象的构造函数或者移动构造函数. 说一下为什么会有这个问题,因为不想用指针,我想直接通过类对象本身的RAII机 ...