netease-im · dachong · Jul 1, 2025
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/.eslintrc.js b/One-to-One-Video/NERtcSample-1to1-Web-React/.eslintrc.js
@@ -0,0 +1,29 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended', // ESLint 推荐规则
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended', // 继承 Prettier 规则
+  ],
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
+  env: {
+    browser: true,
+    es6: true,
+    node: false,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    // 自定义规则（可选）
+    'react/react-in-jsx-scope': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'prettier/prettier': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
+};
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/.gitignore b/One-to-One-Video/NERtcSample-1to1-Web-React/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/.prettierrc b/One-to-One-Video/NERtcSample-1to1-Web-React/.prettierrc
@@ -0,0 +1,18 @@
+
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": true,
+  "tabWidth": 2,
+  "jsxSingleQuote": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "endOfLine": "auto", 
+  "overrides": [
+      {
+        "files": ".prettierrc",
+        "options": { "parser": "typescript" }
+      }
+    ]
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/CHANGELOG.md b/One-to-One-Video/NERtcSample-1to1-Web-React/CHANGELOG.md
@@ -0,0 +1,28 @@
+# Changelog
+
+- 体验地址: https://app.yunxin.163.com/webdemo/tender/#/nertcDemoH5
+
+## [1.0.0] - 2025-07-01
+
+### Added
+
+- 完整的点对点音视频通话通话场景（移动端H5）
+- 完整了会前设备检测流程
+  - 系统环境检查
+  - 音频采集检查
+  - 扬声器检查
+  - 视频采集检查
+  - 网络检查检查
+- 基本音视频会控
+  - 布局为大小屏模式（默认对端是大盘）
+  - 支持大小屏切换
+  - 支持小屏滑动
+  - 支持开关麦克风
+  - 支持开关摄像头
+  - 支持前置后置摄像头切换
+- 异常监控
+  - 规避浏览器的音频自动播放限制（通过手动触发）
+  - 支持音视频设备不可用异常监控
+  - 支持音视频设备没有数据流监控
+  - 支持网络异常监控
+  - 监控网络质量变化
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/README.md b/One-to-One-Video/NERtcSample-1to1-Web-React/README.md
@@ -0,0 +1,49 @@
+# 云信音视频移动端浏览器H5 Demo
+
+## 功能
+
+- H5音视频通话会前检测功能
+- H5音视频实时通话功能（包含各种会控）
+
+## 结构
+
+- src： 源码目录
+  - main.tsx： 入口文件
+  - App.tsx： 根组件，作为所有其他组件的容器
+  - src/pages： 页面目录
+    - src/pages/home： 首页
+    - src/pages/preview： 会前检测页面
+    - src/pages/rtc: 实时通话页面
+  - src/components： 组件目录
+  - src/config： 全局配置
+  - src/constant： 全局定义
+  - src/assets： 静态资源
+  - src/store： 全局变量
+  - src/types： 类型定义
+  - src/hooks： 全局钩子
+  - src/routes: 路由配置
+  - src/features： 功能模块目录
+  - src/utils： 工具库
+- dist： 打包目录
+- package.json： 依赖包
+- tsconfig.json： ts语法编译配置
+- .umirc.ts： 开发环境配置
+
+## 开发流程
+
+### 环境依赖
+
+- 脚手架: umi
+- 环境要求：node v18.x
+- src/config/config.ts： 配置云信的appkey和secret
+
+### 开发环境启动
+
+- npm install (node使用 v18版本)
+- npm run dev
+
+### 打包
+
+- npm run build
+
+### 部署
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/index.html b/One-to-One-Video/NERtcSample-1to1-Web-React/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--禁用缩放：防止移动端误触导致页面缩放-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <title>NERTC H5 Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/package.json b/One-to-One-Video/NERtcSample-1to1-Web-React/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "nertc-demo-h5",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "antd-mobile": "^5.39.0",
+    "consola": "^3.4.2",
+    "import": "^0.0.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^6.30.1",
+    "vconsole": "^3.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.15.21",
+    "@types/react": "18.2.0",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "18.2.0",
+    "antd": "^5.25.2",
+    "classnames": "2.3.2",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "js-sha1": "^0.7.0",
+    "lodash-es": "^4.17.21",
+    "nertc-web-sdk": "^5.8.20",
+    "path": "^0.12.7",
+    "prettier": "^3.5.3",
+    "qrcode.react": "^4.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  }
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/public/favicon.bak.ico b/One-to-One-Video/NERtcSample-1to1-Web-React/public/favicon.bak.ico
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/public/favicon.ico b/One-to-One-Video/NERtcSample-1to1-Web-React/public/favicon.ico
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/public/vite.svg b/One-to-One-Video/NERtcSample-1to1-Web-React/public/vite.svg
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/.prettierrc b/One-to-One-Video/NERtcSample-1to1-Web-React/src/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/App.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/App.css
@@ -0,0 +1,47 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  /* padding: 2rem; */
+  text-align: center;
+}
+
+.App {
+  width: 100vw;
+  height: 100vh;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/App.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/App.tsx
@@ -0,0 +1,25 @@
+import { Outlet } from "react-router-dom";
+import { AppProvider } from "./store/index";
+import { RTCProvider } from "./store/index";
+import Navbar from "./components/nav";
+import Logo from "@/assets/yunxinLogo.png";
+import "./App.css";
+import VConsole from "vconsole";
+
+new VConsole();
+function App() {
+  return (
+    <AppProvider>
+      <RTCProvider>
+        {" "}
+        {/* 在最外层或适当位置添加 RTCProvider */}
+        <div className="app">
+          <Navbar logoSrc={Logo} appName={"音视频H5"} />
+          <Outlet /> {/* 子路由会渲染在这里 */}
+        </div>
+      </RTCProvider>
+    </AppProvider>
+  );
+}
+
+export default App;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-closed.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-closed.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-flip.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-flip.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-opned.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/camera-opned.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/mute.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/mute.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/openCamera.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/openCamera.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/over.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/over.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/react.svg b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/react.svg
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/relieve-silence.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/relieve-silence.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/silence.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/silence.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/stopCamera.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/stopCamera.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/unmute.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/unmute.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/yunxinLogo.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/yunxinLogo.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/yunxinLogo1.png b/One-to-One-Video/NERtcSample-1to1-Web-React/src/assets/yunxinLogo1.png
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/Pip/index.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/Pip/index.css
@@ -0,0 +1,9 @@
+.pip {
+  border-radius: 8px;
+  overflow: hidden;
+  z-index: 100;
+  user-select: none;
+  touch-action: none; /* 禁用触摸默认行为 */
+  background: #25252d;
+  border: 1px solid #fff;
+}