如何实现纯网页语音视频聊天和桌面分享？（附源码，PC版+手机版）

黑皮小 發表於 2024-1-19 12:12:00

如何实现纯网页语音视频聊天和桌面分享？（附源码，PC版+手机版）

在网页里实现文字聊天是比较容易的，但若要实现视频聊天，就比较麻烦了。本文将实现一个纯网页版的视频聊天和桌面分享的Demo，可直接在浏览器中运行，不需要安装任何插件。
<h2>一. 主要功能及支持平台</h2>
1.本Demo的主要功能有
<div class="postText">
<div id="cnblogs_post_body">
（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控件来引入视频聊天或桌面分享功能的。

</div>

</div>
<h2>二. 开发环境</h2>
1. 服务端：
    服务端开发环境是 Visual Sudio 2022 ，开发语言是 C# 。
2. Web端：
    PC版Web开发环境是 VS Code 1.85 ，使用 vue 3。
    手机版Web开发环境是 HBuilder 3.8.12，uni-app（导出H5）。
<h2>三. 运行效果</h2>
     此Demo的源码分为三个部分，分别是服务端，PC端Web（横版）和手机端Web（竖版）。接下来首先来看移动端Web的运行效果。 
（1）首先是登录界面，在登录界面有三个输入框，依次为服务器IP、用户账号和用户密码，在本Demo中，用户账号和用户密码均可随便填写。           
          <img src="https://img2023.cnblogs.com/blog/513369/202309/513369-20230915152140020-854969020.png" alt="" width="353" height="628">
（2）接下来是首页界面，首页界面有一个已连接的提示框，代表的意思是目前与服务端是连接状态，当因为网络原因或者其他原因断开时，则会提示已断开连接。   
         <img src="https://img2024.cnblogs.com/blog/9005/202401/9005-20240116143548814-1843905064.png" alt=""> 
（3）发起视频聊天，输入对方的账号，然后点击请求视频会话按钮即可向对方发起视频聊天请求，对方接受请求和即可聊天了。    
         下图是手机端视频聊天效果：
          <img src="https://img2024.cnblogs.com/blog/9005/202401/9005-20240119120140736-1363337276.jpg" alt=""> 
注意：手机端是不支持分享自己的桌面的，但是移动端可以观看PC端桌面。
（4）接下来看看一下PC端的运行效果。
         登录之后主页界面，左上角是关于自己的一些信息，右边窗口则是显示连接对方的摄像头或者桌面。    
         <img src="https://img2023.cnblogs.com/blog/513369/202309/513369-20230915160849211-314566739.png" alt="">  
（4）下图是在PC端观看他人桌面。
         输入对方的账号，然后点击请求远程桌面，在对方同意后便可以观看别人的屏幕了。  
         <img src="https://img2023.cnblogs.com/blog/513369/202309/513369-20230915164317552-457518472.png" alt="">
<h2>四. 服务端源码说明</h2>
        注意，由于浏览器的限制，如果你要将Web端部署到公网上，需要使用HTTPS协议，否则无法访问摄像头。
        与之对应的，服务端也需要使用到WSS协议，因此需要准备一份SSL证书用于部署。如果你仅仅只是在本地运行看一下效果，则无需准备。
   <img src="https://img2024.cnblogs.com/blog/9005/202401/9005-20240116144714894-1572946778.png" alt="" width="877" height="112">
        上图为服务端初始化代码，若不打算部署只是在浏览器中加载本地Demo页面，则应将上图中的第六行注释掉，并将第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替换掉。
　　若打算将网站部署在服务器上，则需要将第五行X509Certificate2中的两个参数分别修改为你证书的路径和密码。
<h2>五. Web端源码说明</h2>
       本Demo的中的Web端包含两套代码，其中移动端Web采用Uniapp进行开发，PC端Web采用Vue框架进行开发。为了便于理解，下面对源码中的关键点进行讲解说明，两套代码逻辑基本相同，因此这里不作区分。 
<h3>1. 消息定义</h3>
在本Demo中，我们定义了10个消息类型，用于Web端之间进行通信，其定义如下：
<div class="cnblogs_code">
<pre>const informationTypes = {
// 视频请求
VideoRequest: 0,

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

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

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

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

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

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

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

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

// 客人端断开远程桌面连接
GuestCloseDesktop: 9
};</pre>
</div>
      由于这些消息类型经常会使用到，因此需要将其放到一个全局都能访问到的地方，在移动端Web源码中，它被放在了Vuex中。而在PC端Web源码中，它放在src目录下的omcs目录下。 
<h3>2. 自定义消息处理器</h3>
     在登录成功后的这个时机，通过调用多媒体管理器上的 SetCustomMessageReceivedCallback 方法，我们向 multimediaManager（多媒体管理器）注册一个回调函数，这个回调函数会在接收到其他用户或服务端的消息时被触发。
      这个回调函数会接收一个对象类型的参数，其中包含了消息的类型和消息发起者的用户名数据，然后就可以根据消息的类型来完成自己的业务操作了。下图是本Demo中定义的消息处理器：  
      <img src="https://img2023.cnblogs.com/blog/513369/202309/513369-20230913171710478-715649402.png" alt="" width="505" height="240">
<h3>3. 一对一语音视频</h3>
      在本Demo中，一对一语音视频聊天功能的实现逻辑简而言之就是：例如用户A想要与用户B视频聊天，那么用户A向用户B发送VideoRequest消息，在用户B收到来自用户A的VideoRequest消息时选择同意与否，并将携带用户B意愿数据的VideoResult消息发送用户A。
<div class="cnblogs_code">
<pre>// 请求视频会话
const videoRequest = async () => {
// ...
multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null);
// ...
};

// 响应视频会话
const videoResult = (flag) => {
　　// ...
　　multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, , "");
　　// ...
};</pre>
</div>
<h3>4. 桌面分享</h3>
     与一对一语音视频聊天功能类似，实现桌面分享也是一方发起请求，一方进行回应。与语音视频对应的，桌面分享的请求的消息类型为DesktopRequest，响应的消息类型为DesktopResult。
<h3>5. 断网重连</h3>
     在网络断开时，用户进入掉线状态（与服务器断开），每5秒会进行与服务器的重新连接。提前向多媒体管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回调，能够在与媒体服务器断开和重新连接成功时做一些事情。 
<h2>六. 如何在本地部署运行Web端</h2>
     Web端包含两套代码，其中移动端Web的目录是H5MediaDemo_WebH5，PC端Web的目录是H5MediaDemo_WebPC。 
<h3>1. 移动端web：</h3>
      由于移动端web是采用uniapp开发的，而uniapp项目需要通过HBuilder X来运行，因此，你需要在电脑上安装一个HBuilder X，然后在HBuilderX中打开运行——>运行到浏览器，然后选择一个浏览器就可以运行起来了，如下图：
       <img src="https://img2023.cnblogs.com/blog/513369/202309/513369-20230914091547242-1447466404.png" alt="">
<h3>2. PC端web：</h3>
       PC端采用Vue3开发的，需要依赖NodeJS环境，因此，你需要在电脑上安装一个NodeJS（建议安装长期维护版）。在安装完后，通过在命令行窗口输入node -v和npm - v来检查是否安装成功：      
       <img src="https://img2024.cnblogs.com/blog/9005/202401/9005-20240116145551188-522897750.png" alt="">
       确定安装成功后，通过命令行进入到H5MediaDemo_WebPC的项目根目录，然后输入npm run dev即可将项目运行起来。 
       <img src="https://img2024.cnblogs.com/blog/9005/202401/9005-20240116145632148-298375765.png" alt="">
<h2>七. 源码下载</h2>
（1）PC版源码
（2）手机版源码
      另外，我们已经部署好了测试服务器，以方便测试。
（1）PC  Web 测试网址 
（2）手机 Web 测试网址
      网页版视频聊天Demo实现的介绍就到这里了，谢谢！
  
来源：https://www.cnblogs.com/zhuweisky/p/17967600

頁: [1]

琼殿技术论坛's Archiver

如何实现纯网页语音视频聊天和桌面分享？（附源码，PC版+手机版）