+ {/* 内容区域 - 添加事件处理层 */}
+
+ );
+ },
+);
+export default Pip;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/loading/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/loading/index.tsx
new file mode 100644
index 0000000..8a898bc
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/loading/index.tsx
@@ -0,0 +1,5 @@
+function Loading() {
+ return
+ {children}
+
+ {showContent && content}
+ Loading...
+}
+
+export default Loading
\ No newline at end of file
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.css
new file mode 100644
index 0000000..c2f9484
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.css
@@ -0,0 +1,24 @@
+.nav {
+ width: calc(100% - 40px);
+ height: 44px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ border-bottom: 1px solid #ebedf0;
+}
+
+.leftSection {
+ display: flex;
+ align-items: center;
+
+ .yunxinlogo {
+ height: 24px;
+ cursor: pointer;
+ }
+
+ .appName {
+ font-size: 18px;
+ color: #333;
+ }
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.tsx
new file mode 100644
index 0000000..080bc78
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/nav/index.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import { Divider } from "antd-mobile";
+import "./index.css";
+interface NavProps {
+ logoSrc?: string;
+ appName?: string;
+ userRole?: string;
+}
+
+const Nav: React.FC
+
+ );
+ },
+ (prev, next) => prev.level === next.level,
+); // 仅level变化时重新渲染
+
+export default NetworkSignal;
+export type { SignalLevel };
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.css
new file mode 100644
index 0000000..ac295e6
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.css
@@ -0,0 +1,141 @@
+.qr-code-container {
+ font-family: "Arial", sans-serif;
+ max-width: 100vw;
+ margin: 0 auto;
+ text-align: center;
+ background-color: #f9f9f9;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ height: calc(100% - 46px);
+}
+
+.qr-code-container h3 {
+ color: #333;
+ margin: 10px 0;
+}
+
+.qr-code-box {
+ margin-top: 10px auto;
+ padding: 15px;
+ background-color: white;
+ border-radius: 8px;
+ display: inline-block;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.loading {
+ padding: 20px;
+ color: #666;
+}
+
+.url-display {
+ display: flex;
+ margin-top: 10px;
+}
+
+.url-input {
+ flex: 1;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px 0 0 4px;
+ font-size: 14px;
+ outline: none;
+}
+
+.copy-btn {
+ padding: 10px 15px;
+ background-color: #07c160;
+ color: white;
+ border: none;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+ background-color: #06ad56;
+}
+
+.action-buttons {
+ margin: 10px 0;
+}
+
+.download-btn {
+ padding: 10px 20px;
+ background-color: #1989fa;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+}
+
+.download-btn:hover {
+ background-color: #177ee5;
+}
+
+.customize-section {
+ margin-top: 10px 0;
+ padding: 15px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.customize-section h3 {
+ margin-top: 0;
+ color: #333;
+}
+
+.custom-controls {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.control-group {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+}
+
+.control-group label {
+ width: 60px;
+ text-align: right;
+ color: #555;
+}
+
+.control-group input[type="range"] {
+ width: 150px;
+}
+
+.control-group span {
+ width: 50px;
+ text-align: left;
+ color: #666;
+}
+
+.instructions {
+ margin-top: 10px;
+ padding: 15px;
+ background-color: #f0f7ff;
+ border-radius: 8px;
+ text-align: left;
+}
+
+.instructions h3 {
+ margin-top: 0;
+ color: #333;
+}
+
+.instructions ol {
+ padding-left: 20px;
+ color: #555;
+}
+
+.instructions li {
+ margin-bottom: 8px;
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.tsx
new file mode 100644
index 0000000..be59637
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/components/wechatQrCode/index.tsx
@@ -0,0 +1,132 @@
+import { useState, useEffect } from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import "./index.css";
+
+const WechatQrCode = () => {
+ const [currentUrl, setCurrentUrl] = useState("");
+ const [isCopied, setIsCopied] = useState(false);
+ const [size, setSize] = useState(200);
+ const [bgColor, setBgColor] = useState("#ffffff");
+ const [fgColor, setFgColor] = useState("#000000");
+
+ // 获取当前页面URL
+ useEffect(() => {
+ setCurrentUrl(window.location.href);
+ }, []);
+
+ // 重置复制状态
+ useEffect(() => {
+ if (isCopied) {
+ const timer = setTimeout(() => setIsCopied(false), 2000);
+ return () => clearTimeout(timer);
+ }
+ }, [isCopied]);
+
+ // 下载二维码
+ const downloadQRCode = () => {
+ const svg = document.getElementById("qr-code-canvas") as Node;
+ const svgData = new XMLSerializer().serializeToString(svg);
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+ const img = new Image();
+
+ img.onload = () => {
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ const pngFile = canvas.toDataURL("image/png");
+ const downloadLink = document.createElement("a");
+ downloadLink.download = "QRCode";
+ downloadLink.href = pngFile;
+ downloadLink.click();
+ };
+
+ img.src =
+ "data:image/svg+xml;base64," +
+ btoa(unescape(encodeURIComponent(svgData)));
+ };
+
+ return (
+
+ {bars.map(({ bar, color, active }) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default WechatQrCode;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/config/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/config/index.tsx
new file mode 100644
index 0000000..10275f9
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/config/index.tsx
@@ -0,0 +1,2 @@
+export const appkey = "";
+export const secret = "";
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/constant/index.ts b/One-to-One-Video/NERtcSample-1to1-Web-React/src/constant/index.ts
new file mode 100644
index 0000000..95588e9
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/constant/index.ts
@@ -0,0 +1,9 @@
+export const NETWORK_STATUS = {
+ 0: 'UNKNOWN',
+ 1: 'EXCELLENT',
+ 2: 'GOOD',
+ 3: 'POOR',
+ 4: 'BAD',
+ 5: 'VERYBAD',
+ 6: 'DOWN'
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/features/browserVisibilityMonitor.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/features/browserVisibilityMonitor.tsx
new file mode 100644
index 0000000..2f379da
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/features/browserVisibilityMonitor.tsx
@@ -0,0 +1,131 @@
+export type VisibilityState = "visible" | "hidden";
+export type VisibilityChangeCallback = (state: VisibilityState) => void;
+export type VisibilityEventType = "change" | "hide" | "show";
+
+class BrowserVisibilityMonitor {
+ private isHidden: boolean;
+ private callbacks: Map请使用微信扫码访问当前页面
+ +
+ {currentUrl ? (
+
+
+ 加载中...
+ )}
+
+
+ setIsCopied(true)}>
+
+
+
+
+
+
+
+
+
+
+
+ 自定义二维码
+
+
+
+
+ setSize(parseInt(e.target.value))}
+ />
+ {size}px
+
+
+
+
+ setBgColor(e.target.value)}
+ />
+
+
+
+
+ setFgColor(e.target.value)}
+ />
+
+
+
+ 使用说明
+-
+
- 下载二维码 +
- 打开微信，点击右上角"+" +
- 选择"扫一扫"功能 +
- 扫描二维码图片即可访问当前页面 +
+
+ );
+};
+
+export default Home;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.css
new file mode 100644
index 0000000..e753953
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.css
@@ -0,0 +1,198 @@
+.preview-body {
+ height: calc(100% - 46px);
+ background: #f7f8fa;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ flex-direction: column;
+ position: relative;
+}
+.preview-body-header {
+ position: absolute;
+ top: 10px;
+ right: 1px;
+ background-color: #07c160;
+ /* border: 1px solid #008000cf; */
+ color: #fff;
+ line-height: 1;
+ font-size: 1.07692308em;
+ padding: 0.61538462em 1.23076923em;
+ z-index: 10000;
+ border-radius: 0.30769231em;
+ box-shadow: 0 0 0.61538462em rgba(0, 0, 0, 0.4);
+}
+
+.checked-body {
+ position: relative;
+ width: 94vw;
+ height: 94vw;
+ background: #fff;
+ box-shadow: 0 4px 10px 0 rgba(47, 56, 111, 0.1);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: 15vw;
+ gap: 20px;
+}
+
+.checked-body-title {
+ font-size: 24px;
+}
+
+.checked-body-text {
+ font-size: 14px;
+ color: #0000009e;
+}
+
+.checked-body-steps {
+ width: 340px;
+ width: 340px;
+ position: absolute;
+ top: 10px;
+}
+.adm-steps .adm-step .adm-step-icon {
+ margin-bottom: 22px; /* 增加或减少这个值 */
+}
+
+.checked-body-steps-item {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: 20px;
+ gap: 10px;
+}
+
+.checked-body-steps-microphone-devices {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+ gap: 15px;
+}
+
+.checked-body-steps-microphone-devices-title {
+ font-size: 14px;
+}
+
+.checked-body-steps-microphone-volume {
+ display: flex;
+ align-items: baseline;
+ flex-direction: column;
+ justify-content: center;
+ gap: 5px;
+ margin-top: 10px;
+ width: 286;
+}
+
+.checked-body-steps-microphone-volume-title {
+ font-size: 14px;
+}
+
+.checked-body-steps-microphone-callback {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 30px;
+}
+
+.checked-body-steps-microphone-callback-title {
+ font-size: 13px;
+}
+
+.checked-body-steps-microphone-callback-btn {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+ gap: 50px;
+}
+
+.checked-body-steps-speaker {
+ display: flex;
+ align-items: baseline;
+ flex-direction: column;
+ justify-content: center;
+ gap: 10px;
+}
+
+.checked-body-steps-camera-callback-btn {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ gap: 10px;
+}
+
+.checked-body-steps-item-network {
+ display: flex;
+ align-items: baseline;
+ flex-direction: column;
+ justify-content: center;
+ width: 280px;
+ margin-top: 10px;
+}
+
+.checked-body-steps-network {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-top: 20px;
+ width: 280px;
+}
+
+.checked-body-steps-item-report {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.checked-body-steps-report {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.checked-body-steps-network-title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.checked-body-steps-network-description {
+ flex-shrink: 0;
+ white-space: nowrap;
+}
+
+.checked-body-steps-network-title-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: row;
+ width: 220px;
+ gap: 10px;
+}
+
+.checked-body-steps-item-report {
+ display: flex;
+ align-items: baseline;
+ flex-direction: column;
+ justify-content: center;
+ width: 280px;
+}
+
+.checked-body-steps-report-btn {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+ gap: 50px;
+ margin-top: 10px;
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.tsx
new file mode 100644
index 0000000..cfa12c4
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/preview/index.tsx
@@ -0,0 +1,758 @@
+import { useEffect, useState, useRef } from "react";
+import {
+ AudioOutline,
+ VideoOutline,
+ SoundOutline,
+ GlobalOutline,
+} from "antd-mobile-icons";
+import { Button, Space, Steps, Toast } from "antd-mobile";
+import { Select } from "antd";
+import { useNavigate } from "react-router-dom";
+import "./index.css";
+import RTCPreview from "@/features/rtcPreview";
+import { appkey, secret } from "@/config";
+import { useAppContext } from "@/store/index";
+import type {
+ NetworkInfo,
+ DeviceCheckResult,
+ NetworkStatus,
+ NetworkStatusText,
+} from "../../types/index";
+import { getSystemInfo } from "@/utils";
+
+const systemInfo = getSystemInfo();
+
+const Preview: React.FC = () => {
+ const navigate = useNavigate();
+ const { meetingInfo, setMeetingInfo } = useAppContext();
+ const { Step } = Steps;
+ const [checking, setChecking] = useState(false);
+ const [stepIndex, setStedIndex] = useState(-1);
+ const [volume, setVolume] = useState(0);
+ const [networkInfo, setNetworkInfo] = useState
+
+ )}
+
+ {Array.from({ length: totalBars }).map((_, index) => {
+ const isActive = index < activeBars;
+ return (
+
+ );
+ })}
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+export default Preview;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.css b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.css
new file mode 100644
index 0000000..3e7bda6
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.css
@@ -0,0 +1,64 @@
+.rtc-body {
+ height: calc(100% - 46px);
+ width: 100vw;
+ background-image: linear-gradient(179deg, #141417, #181824);
+ display: flex;
+ flex-direction: column;
+ position: relative;
+}
+
+.rtc-main-window {
+ height: 100%;
+ width: 100%;
+ margin: 0 auto;
+ background: #25252d;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 22px;
+ color: #fff;
+}
+
+.rtc-main-window-statistics-box {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ background-color: rgba(30, 30, 30, 0.6);
+ height: auto;
+ color: green;
+ font-size: 12px;
+ padding: 5px;
+ z-index: 9;
+ display: flex;
+ align-items: baseline;
+ flex-direction: column;
+}
+
+.rtc-main-window-small-video-wrapper {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 9;
+}
+
+.rtc-main-window-small-video {
+ background: #25252d;
+ border: 1px solid #fff;
+ width: 25vw; /* 宽度为视口宽度的25%（响应式） */
+ aspect-ratio: 3/4; /* 固定宽高比（竖屏9:16） */
+ border-radius: 8px; /* 圆角 */
+ text-align: center;
+}
+
+.rtc-tab-bar {
+ height: 54px;
+ width: 100%;
+ background-image: linear-gradient(180deg, #292933 7%, #212129);
+ box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0.3);
+ list-style: none;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ color: #fff;
+}
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.tsx
new file mode 100644
index 0000000..93c2443
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/pages/rtc/index.tsx
@@ -0,0 +1,767 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import "./index.css";
+import type { MediaInfo } from "@/types";
+import { Toast } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import { SoundMuteOutline } from "antd-mobile-icons";
+import muteIcon from "@/assets/mute.png";
+import unmuteIcon from "@/assets/unmute.png";
+import closeCameraIcon from "@/assets/camera-opned.png";
+import openCameraIcon from "@/assets/camera-closed.png";
+import flipCameraIcon from "@/assets/camera-flip.png";
+import overIcon from "@/assets/over.png";
+import { appkey, secret } from "@/config";
+import Pip from "@/components/Pip";
+import type { PipHandle } from "@/components/Pip";
+import NetworkSignal from "@/components/networkSignal";
+import type { SignalLevel } from "@/components/networkSignal";
+import RTCManager from "@/features/rtcManager";
+import { useAppContext } from "@/store/index";
+import useVisibility from "@/hooks/useVisibility";
+import { throttle } from "lodash-es";
+import type { PEER_LEAVE_REASON_CODE } from "nertc-web-sdk/types/types";
+
+const RTC: React.FC = () => {
+ const navigate = useNavigate();
+ const visibility = useVisibility();
+ const { meetingInfo, setMeetingInfo } = useAppContext();
+ const [isMuted, setIsMuted] = useState(false);
+ const remoteUid = useRef
+ 跳过检测
+
+ {checking ? (
+
+ {!showReport ? (
+
+ ) : (
+
+
+
+
+ ) : null}
+
+ {/* 麦克风检测UI */}
+ {stepIndex === 0 && !showReport ? (
+
+
+ ) : null}
+
+ {/* 扬声器检测UI */}
+ {stepIndex === 1 ? (
+
+
+
+
+ 选择麦克风
+
+
+
+
+
+
+ 对着麦克风说话
+
+ {/*
+
+
+ 是否可以看到音量图标跳动？
+
+
+
+
+
+
+
+ ) : null}
+
+ {/* 摄像头检测UI */}
+ {stepIndex === 2 ? (
+
+
+
+
+ 请点击播放下面的音频
+
+
+
+
+
+ 是否可以听到声音？
+
+
+
+
+
+
+
+ ) : null}
+
+ {/* 网络检测UI */}
+ {stepIndex === 3 && !showReport ? (
+
+
+
+ 选择摄像头
+
+
+
+
+
+
+
+
+ 是否可以看到自己？
+
+
+
+
+
+
+
+ ) : null}
+
+ {/* 检查报告UI */}
+ {showReport ? (
+
+
+
+
+
+
+ 操作系统
+
+
+ {networkInfo.osType}
+
+
+
+ 浏览器
+
+ {networkInfo.userAgent}
+
+
+
+
+ 支持NERTC
+
+
+ {networkInfo.supportRTC ? "支持" : "不支持"}
+
+
+
+
+ 上行网络质量
+
+
+ {networkInfo.uplinkNetworkQuality}
+
+
+
+
+ 下行网络质量
+
+
+ {networkInfo.downlinkNetworkQuality}
+
+
+
+
+
+
+
+
+
+ ) : null}
+ 检查报告
+
+
+
+
+
+
+
+
+ {microphoneDefaultValue.label}
+
+
+ {rtcPreviewResultRef.current.microphone.isOK
+ ? "正常"
+ : "异常"}
+
+
+
+
+
+
+ 系统扬声器
+
+
+ {rtcPreviewResultRef.current.speaker.isOK
+ ? "正常"
+ : "异常"}
+
+
+
+
+
+
+ {cameraDefaultValue.label}
+
+
+ {rtcPreviewResultRef.current.camera.isOK
+ ? "正常"
+ : "异常"}
+
+
+
+
+
+
+ 上行网络质量
+
+
+ {networkInfo.uplinkNetworkQuality}
+
+
+
+
+
+
+ 下行网络质量
+
+
+ {networkInfo.downlinkNetworkQuality}
+
+
+
+
+
+
+
+
+
+
+ )}
+ 环境监测
+
+ 检查前请确保网络通畅，摄像头和麦克风正常工作
+
+
+ {/*右上角小视频窗口，支持拖拽*/}
+
+
+ {/** 视频渲染大窗口UI */}
+
+ );
+};
+export default RTC;
diff --git a/One-to-One-Video/NERtcSample-1to1-Web-React/src/routes/router.tsx b/One-to-One-Video/NERtcSample-1to1-Web-React/src/routes/router.tsx
new file mode 100644
index 0000000..b60058b
--- /dev/null
+++ b/One-to-One-Video/NERtcSample-1to1-Web-React/src/routes/router.tsx
@@ -0,0 +1,37 @@
+import { createBrowserRouter, createHashRouter } from "react-router-dom";
+//import Home from '../pages/home'
+import Preview from "../pages/preview";
+import RTC from "../pages/rtc";
+import App from "../App";
+import Loading from "../components/loading";
+import { lazy, Suspense } from "react";
+const Home = lazy(() => import("../pages/home"));
+
+// 路由配置
+const routes = [
+ {
+ path: "/",
+ element:
+ {
+ e.stopPropagation(); // 阻止事件冒泡
+ console.log("点击播放声音");
+ rtcManagerRef.current?.playRemoteAudioStream(remoteUid.current);
+ setIsMuted(false);
+ }}
+ />
+ )}
+
+
+
+ {/** 按钮UI */}
+
+ {
+ e.stopPropagation(); // 阻止事件冒泡
+ console.log("点击播放声音");
+ rtcManagerRef.current?.playRemoteAudioStream(remoteUid.current);
+ setIsMuted(false);
+ }}
+ />
+ )}
+
+
+
+ {/* {`房间名称： ${meetingInfo.channelName}`}
+ {`音频音量： ${meidaInfo.audioLevel}`}
+ {`音频码率： ${meidaInfo.audioBitrate} Kbps`}
+ {`视频码率： ${meidaInfo.videoBitrate} Kbps`}
+ {`视频帧率： ${meidaInfo.videoFrameRate} fps`}
+
+ {`视频分辨率： ${meidaInfo.videoFrameWidth} * ${meidaInfo.videoFrameHeight}`}
+
+
+
*/}
+ {!largeVideoRef.current?.querySelector("video") && "等待视频流"}
+
+
+
+ 
openTheMicrophone()}
+ />
+ 
openTheCamera()}
+ />
+ 
flipCamera()}
+ />
+ 
leave()}
+ />
+
+