feat:共享桌面移动端全屏支持

2026-02-15 01:34:46 +08:00 · 2025-09-01 15:53:03 +08:00
parent 86fd9ec08c
commit 4faf1c3141
7 changed files with 106 additions and 20 deletions
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@

 **安全、快速、简单的点对点文件传输解决方案 - 无需注册，即传即用**

-## [在线体验](https://transfer.52python.cn) • [GitHub](https://github.com/MatrixSeven/file-transfer-go)
+## [在线体验](https://transfer.52python.cn) • [GitHub](https://github.com/MatrixSeven/file-transfer-go) • [X关注我](https://x.com/_MatrixSeven)

 ![项目演示](img.png)

@@ -31,6 +31,9 @@

 ## 🔄 最近更新日志

+### 2025-09--1
+- ✅ **移动端桌面全屏** - 优化移动端下UI，并解决全屏问题
+
 ### 2025-08-28
 - ✅ **完善Docker部署支持** - 优化Docker配置，支持一键部署和多环境配置
 - ✅ **优化README文档** - 更新项目说明，完善部署指南和技术栈信息
--- a/chuan-next/src/components/DesktopViewer.tsx
+++ b/chuan-next/src/components/DesktopViewer.tsx
@@ -144,7 +144,33 @@ export default function DesktopViewer({
        // 全屏时自动隐藏控制栏，鼠标移动时显示
        setShowControls(false);
      } else {
+        // 退出全屏时显示控制栏
        setShowControls(true);
+        
+        // 延迟检查视频状态，确保全屏切换完成
+        setTimeout(() => {
+          if (videoRef.current && stream) {
+            console.log('[DesktopViewer] 🔄 退出全屏，检查视频状态');
+            
+            // 确保视频流正确设置
+            const currentSrcObject = videoRef.current.srcObject;
+            if (!currentSrcObject || currentSrcObject !== stream) {
+              videoRef.current.srcObject = stream;
+            }
+            
+            // 检查视频是否暂停
+            if (videoRef.current.paused) {
+              console.log('[DesktopViewer] ⏸️ 退出全屏后视频已暂停，显示播放按钮');
+              setIsPlaying(false);
+              setNeedsUserInteraction(true);
+              hasAttemptedAutoplayRef.current = true; // 标记已尝试过自动播放
+            } else {
+              console.log('[DesktopViewer] ▶️ 退出全屏后视频仍在播放');
+              setIsPlaying(true);
+              setNeedsUserInteraction(false);
+            }
+          }
+        }, 200); // 延迟200ms确保全屏切换完成
      }
    };

@@ -153,7 +179,7 @@ export default function DesktopViewer({
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
-  }, []);
+  }, [stream]);

  // 鼠标移动处理（全屏时）
  const handleMouseMove = useCallback(() => {
@@ -207,13 +233,43 @@ export default function DesktopViewer({

  // 切换全屏
  const toggleFullscreen = useCallback(async () => {
-    if (!containerRef.current) return;
+    if (!videoRef.current) return;

    try {
      if (isFullscreen) {
-        await document.exitFullscreen();
+        // 退出全屏
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        // 退出iOS全屏模式
+        if ((document as any).webkitExitFullscreen) {
+          await (document as any).webkitExitFullscreen();
+        }
+        // 退出视频全屏模式
+        if ((videoRef.current as any).webkitExitFullscreen) {
+          await (videoRef.current as any).webkitExitFullscreen();
+        }
+        // 退出Android全屏模式
+        if ((videoRef.current as any).exitFullscreen) {
+          await (videoRef.current as any).exitFullscreen();
+        }
      } else {
-        await containerRef.current.requestFullscreen();
+        // 进入标准全屏
+        if (videoRef.current.requestFullscreen) {
+          await videoRef.current.requestFullscreen();
+        }
+        // 进入iOS全屏模式
+        else if ((videoRef.current as any).webkitRequestFullscreen) {
+          await (videoRef.current as any).webkitRequestFullscreen();
+        }
+        // 进入iOS视频全屏模式
+        else if ((videoRef.current as any).webkitEnterFullscreen) {
+          await (videoRef.current as any).webkitEnterFullscreen();
+        }
+        // 进入Android全屏模式
+        else if ((videoRef.current as any).requestFullscreen) {
+          await (videoRef.current as any).requestFullscreen();
+        }
      }
    } catch (error) {
      console.error('[DesktopViewer] 全屏切换失败:', error);
@@ -223,9 +279,22 @@ export default function DesktopViewer({
  // 退出全屏
  const exitFullscreen = useCallback(async () => {
    try {
+      // 退出标准全屏
      if (document.fullscreenElement) {
        await document.exitFullscreen();
      }
+      // 退出iOS全屏模式
+      if ((document as any).webkitExitFullscreen) {
+        await (document as any).webkitExitFullscreen();
+      }
+      // 退出视频全屏模式
+      if (videoRef.current && (videoRef.current as any).webkitExitFullscreen) {
+        await (videoRef.current as any).webkitExitFullscreen();
+      }
+      // 退出Android全屏模式
+      if (videoRef.current && (videoRef.current as any).exitFullscreen) {
+        await (videoRef.current as any).exitFullscreen();
+      }
    } catch (error) {
      console.error('[DesktopViewer] 退出全屏失败:', error);
    }
@@ -301,15 +370,15 @@ export default function DesktopViewer({
        }}
      />

-      {/* 需要用户交互的播放覆盖层 - 只在自动播放尝试失败后显示 */}
-      {hasAttemptedAutoplayRef.current && needsUserInteraction && !isPlaying && (
+      {/* 需要用户交互的播放覆盖层 - 在视频暂停时显示 */}
+      {((needsUserInteraction && !isPlaying) || (isConnected && !isPlaying && !needsUserInteraction && videoRef.current?.paused)) && (
        <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white z-10">
          <div className="text-center">
            <div className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors cursor-pointer" onClick={handleManualPlay}>
              <Play className="w-10 h-10 text-white ml-1" />
            </div>
            <h3 className="text-lg font-semibold mb-2">点击播放桌面共享</h3>
-            <p className="text-sm opacity-75">浏览器需要用户交互才能开始播放媒体</p>
+            <p className="text-sm opacity-75">视频已暂停，点击继续播放</p>
          </div>
        </div>
      )}
@@ -331,23 +400,23 @@ export default function DesktopViewer({
          showControls || !isFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
        }`}
      >
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          {/* 左侧信息 */}
          <div className="flex items-center space-x-4 text-white text-sm">
            <div className="flex items-center space-x-2">
              <div className={`w-2 h-2 rounded-full ${isPlaying ? 'bg-green-500 animate-pulse' : 'bg-yellow-500'}`}></div>
-              <span>{isPlaying ? '桌面共享中' : needsUserInteraction ? '等待播放' : '连接中'}</span>
+              <span className="text-xs sm:text-sm">{isPlaying ? '桌面共享中' : needsUserInteraction ? '等待播放' : isConnected ? '已暂停' : '连接中'}</span>
            </div>
            {videoStats.resolution !== '0x0' && (
              <>
-                <div className="w-px h-4 bg-white/30"></div>
-                <span>{videoStats.resolution}</span>
+                <div className="w-px h-4 bg-white/30 hidden sm:block"></div>
+                <span className="text-xs sm:text-sm hidden sm:block">{videoStats.resolution}</span>
              </>
            )}
            {connectionCode && (
              <>
-                <div className="w-px h-4 bg-white/30"></div>
-                <span className="font-mono">{connectionCode}</span>
+                <div className="w-px h-4 bg-white/30 hidden sm:block"></div>
+                <span className="font-mono text-xs sm:text-sm hidden sm:block">{connectionCode}</span>
              </>
            )}
          </div>
@@ -372,7 +441,7 @@ export default function DesktopViewer({
            <Button
              variant="ghost"
              size="sm"
-              className="text-white hover:bg-white/20"
+              className="text-white hover:bg-white/20 hidden sm:flex"
            >
              <Settings className="w-4 h-4" />
            </Button>
@@ -413,6 +482,19 @@ export default function DesktopViewer({
        )}
      </div>

+      {/* 移动端浮动全屏按钮 - 在控制栏隐藏时显示 */}
+      {!isFullscreen && (
+        <Button
+          variant="ghost"
+          size="lg"
+          onClick={toggleFullscreen}
+          className="fixed bottom-20 right-4 z-40 md:hidden bg-black/60 text-white hover:bg-black/80 rounded-full p-3 shadow-lg"
+          title="全屏"
+        >
+          <Maximize className="w-5 h-5" />
+        </Button>
+      )}
+
      {/* 加载状态 */}
      {stream && !isConnected && (
        <div className="absolute top-4 left-4 bg-black/60 text-white px-3 py-2 rounded-lg text-sm flex items-center space-x-2">
--- a/chuan-next/src/components/WeChatGroup.tsx
+++ b/chuan-next/src/components/WeChatGroup.tsx
@@ -24,7 +24,7 @@ export default function WeChatGroup() {
                        {/* 微信群二维码 - 请将此区域替换为实际的二维码图片 */}
                        <div className="relative">
                            <img
-                                src="https://cdn-img.luxika.cc//i/2025/08/25/68abd75c363a6.png"
+                                src="https://cdn-img.luxika.cc//i/2025/09/01/68b53eb002f71.png"
                                alt="微信群二维码"
                                className="w-64 h-64 rounded-xl"
                            />
--- a/chuan-next/src/hooks/connection/useSharedWebRTCManager.ts
+++ b/chuan-next/src/hooks/connection/useSharedWebRTCManager.ts
@@ -239,7 +239,7 @@ export function useSharedWebRTCManager(): WebRTCConnection {
      }
      
      // 构建完整的WebSocket URL
-      const wsUrl = baseWsUrl.replace('/ws/p2p', `/ws/webrtc?code=${roomCode}&role=${role}&channel=shared`);
+      const wsUrl = `${baseWsUrl}/api/ws/webrtc?code=${roomCode}&role=${role}&channel=shared`;
      console.log('[SharedWebRTC] 🌐 连接WebSocket:', wsUrl);
      const ws = new WebSocket(wsUrl);
      wsRef.current = ws;
--- a/chuan-next/src/hooks/webrtc/WebRTCManager.ts
+++ b/chuan-next/src/hooks/webrtc/WebRTCManager.ts
@@ -318,7 +318,7 @@ export class WebRTCManager extends EventEmitter {
        throw new WebRTCError('WS_URL_NOT_CONFIGURED', 'WebSocket URL未配置', false);
      }

-      const wsUrl = baseWsUrl.replace('/ws/p2p', `/ws/webrtc?code=${roomCode}&role=${role}&channel=shared`);
+      const wsUrl = baseWsUrl.replace('/api/ws/webrtc', `/ws/webrtc?code=${roomCode}&role=${role}&channel=shared`);
      this.wsManager = new WebSocketManager({
        url: wsUrl,
        reconnectAttempts: 5,
--- a/chuan-next/src/lib/config.ts
+++ b/chuan-next/src/lib/config.ts
@@ -33,12 +33,12 @@ const getCurrentWsUrl = () => {
    
    if (isNextDevServer) {
      // 开发模式：通过 Next.js 开发服务器访问，连接到后端 WebSocket
-      return 'ws://localhost:8080/ws/p2p';
+      return 'ws://localhost:8080';
    }
    
    // 生产模式或通过 Go 服务器访问：使用当前域名和端口
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    return `${protocol}//${window.location.host}/ws/p2p`;
+    return `${protocol}//${window.location.host}`;
  }
  // 服务器端返回空字符串，强制在客户端计算
  return '';
--- a/cmd/main.go
+++ b/cmd/main.go
@@ -58,6 +58,7 @@ func main() {
 	r.Handle("/*", web.CreateFrontendHandler())

 	// WebRTC信令WebSocket路由
+	r.Get("/api/ws/webrtc", h.HandleWebRTCWebSocket)
 	r.Get("/ws/webrtc", h.HandleWebRTCWebSocket)

 	// WebRTC房间API