1.?企业?ҵ??վh5Դ??
2.API和H5的区别。
3.基于VUE2.0移动端H5 -NUT组件源码Progress分析

??ҵ??վh5Դ??

       本文将展示如何在纯网页中实现视频聊天和桌面分享功能的Demo，无需额外插件即可在浏览器中运行。网站

       一. 功能及支持平台

       该Demo具备以下功能：

       一对一语音视频聊天

       远程桌面观看

       客户端掉线后自动重连，源业网源码网络恢复时重连成功

       支持的码企操作系统包括：Windows、信创国产Linux（银河麒麟、企业统信UOS）、网站iis应用源码Android、源业网源码iOS、码企Mac、企业鸿蒙OS。网站

       CPU架构：X/X、源业网源码ARM、码企MIPS、企业Loongarch。网站

       主流浏览器：Chrome、源业网源码Edge、Firefox、怎么调试eclipse源码Safari、浏览器、QQ浏览器等。

       APP套壳内加载Demo页面，同样可正常视频聊天。

       二. 开发环境

       服务端使用Visual Sudio ，C#语言；

       PC端Web：VS Code 1.，Vue 3框架；

       手机端Web：HBuilder 3.8.，巨麦国际源码uni-app（导出H5）。

       三. 运行效果

       Demo源码分为三部分：服务端、PC端Web和手机端Web。

       移动端Web运行效果包括：登录界面、已连接提示框、发起视频聊天、手机端不支持桌面分享但可观看PC端桌面。

       PC端Web运行效果包括：登录界面、2021红包封面源码显示对方摄像头或桌面。

       四. 服务端源码说明

       部署需使用HTTPS协议，服务端需使用WSS协议。本地测试无需准备SSL证书。

       服务端初始化代码需根据部署环境调整配置。

       五. Web端源码说明

       Web端包含移动端和PC端代码，逻辑基本相同。

       消息定义：定义种消息类型用于通信。Pixella突然源码丢了

       自定义消息处理器：在登录成功后注册回调函数。

       一对一语音视频：用户间发送请求，对方选择同意或拒绝。

       桌面分享：发起和回应过程与语音视频类似。

       断网重连：网络中断时每5秒重试连接。

       六. 本地部署Web端

       移动端：通过HBuilder X运行uniapp项目。

       PC端：安装NodeJS，使用npm命令启动Vue3项目。

       七. 源码与测试

       PC版源码与手机版源码可下载。

       提供测试服务器，方便验证。

       通过本Demo，网页中实现视频聊天和桌面分享功能变得简单可行，满足多种平台与浏览器需求。

API和H5的区别。

       API和H5的区别为：性质不同、目的不同、应用不同。

       ä¸€ã€æ€§è´¨ä¸åŒ

       1、API：API是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。

       2、H5：H5是构建Web内容的一种语言描述方式,是Web中核心语言HTML的规范。

       äºŒã€ç›®çš„不同

       1、API：API的目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。

       2、H5：H5的目的是在浏览器中通过一些技术处理将其转换成为了可识别的信息。

       ä¸‰ã€åº”用不同

       1、API：开放的API 甚至源代码主要体现在桌面应用上。

       2、H5：H5主要应用于网站的网页浏览上。

基于VUE2.0移动端H5 -NUT组件源码Progress分析

       为了满足显示需求，布局采用flex布局，使%的文字位于右侧。

       颜色通过div的背景实现，红色部分在浅色背景内部，使用绝对定位确保红色覆盖并实现动画效果，使用frame animation技术。

       "nut-progress-outer"代表浅色背景，"nut-progress-inner"代表红色部分宽度，文字设置在"nut-progress-inner"的左侧。

       若需文字位于右侧，则放置在"nut-progress-outer"后面。

       scss实现时，将"progress"设为flex布局。

       在js中，通过设置属性来实现上述布局和效果。