fix: 优化

README.md

@@ -16,26 +16,21 @@
   基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间
 </p>
 
-## 致敬开源
-
-billd-live自2023年3月开源以来，仅有作者（也就是我）一个人维护，深知做开源的难处。
+## 简介
 
-如果你做过开源项目，并且单个仓库拿到 **`128+star`**，我个人认为这是非常不容易的，因为这代表了你的开源被很多人关注或认同，如果此时你正在了解直播相关方面的内容，我录制的 [**billd-live付费课**](https://www.hsslive.cn/article/151) 或许会对你有一定帮助，它将对你进行**免费**，作为我认同你在开源方面做的贡献，以及我对你力所能及的回馈，希望你能不忘初心，砥砺前行~
+billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://live.bilibili.com)功能，即你（房主）可以发布直播，别人进入你的直播间后能看到你的直播内容；而你也可以作为观众，进入别人的直播间看别人的直播内容。
 
 ## 生态
 
-| 名称         | 仓库                                                                             | star & fork                                                                                                                                                                                                                                                                                                                         | 线上地址                                                       |
-| ------------ | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| 直播间网页端 | [billd-live](https://github.com/galaxy-s10/billd-live)                           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live)                                                     | [https://live.hsslive.cn](https://live.hsslive.cn)             |
-| 直播间移动端 | [billd-live-react-native](https://github.com/galaxy-s10/billd-live-react-native) | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-react-native?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-react-native?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) |                                                                |
-| 直播间移动端 | [billd-live-flutter](https://github.com/galaxy-s10/billd-live-flutter)           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-flutter?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-flutter?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter)                     |                                                                |
-| 直播间移动端 | [billd-live-kotlin](https://github.com/galaxy-s10/billd-live-kotlin)             | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-kotlin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-kotlin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin)                         |                                                                |
-| 直播间后台   | [billd-live-admin](https://github.com/galaxy-s10/billd-live-admin)               | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-admin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-admin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin)                             | [https://live-admin.hsslive.cn](https://live-admin.hsslive.cn) |
-| 直播间后端   | [billd-live-server](https://github.com/galaxy-s10/billd-live-server)             | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-server?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-server?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server)                         | [https://live-api.hsslive.cn](https://live-api.hsslive.cn)     |
-
-## 简介
-
-billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://live.bilibili.com)功能，即你（房主）可以发布直播，别人进入你的直播间后能看到你的直播内容；而你也可以作为观众，进入别人的直播间看别人的直播内容。
+| 名称         | 仓库                                                                             | star & fork                                                                                                                                                                                                                                                                                                                         | 线上地址                                                                       |
+| ------------ | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| 直播间网页端 | [billd-live](https://github.com/galaxy-s10/billd-live)                           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live)                                                     | [https://live.hsslive.cn](https://live.hsslive.cn)                             |
+| 远程桌面     | [billd-desk](https://github.com/galaxy-s10/billd-desk)                           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-desk?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-desk) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-desk?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-desk)                                                     | [https://live.hsslive.cn/remoteDeskTop](https://live.hsslive.cn/remoteDeskTop) |
+| 直播间移动端 | [billd-live-react-native](https://github.com/galaxy-s10/billd-live-react-native) | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-react-native?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-react-native?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) |                                                                                |
+| 直播间移动端 | [billd-live-flutter](https://github.com/galaxy-s10/billd-live-flutter)           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-flutter?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-flutter?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter)                     |                                                                                |
+| 直播间移动端 | [billd-live-kotlin](https://github.com/galaxy-s10/billd-live-kotlin)             | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-kotlin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-kotlin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin)                         |                                                                                |
+| 直播间后台   | [billd-live-admin](https://github.com/galaxy-s10/billd-live-admin)               | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-admin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-admin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin)                             | [https://live-admin.hsslive.cn](https://live-admin.hsslive.cn)                 |
+| 直播间后端   | [billd-live-server](https://github.com/galaxy-s10/billd-live-server)             | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-server?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-server?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server)                         | [https://live-api.hsslive.cn](https://live-api.hsslive.cn)                     |
 
 ## 功能
 
@@ -43,7 +38,7 @@ billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://
 - [x] srs webrtc 推流，`http-flv` 或 `hls`拉流
 - [x] msr 推流，ffmpeg转码，`http-flv` 或 `hls`拉流
 - [x] 一对一打PK
-- [ ] 一对多打PK
+- [x] 一对多打PK
 - [x] 前端混流
 - [x] 推流鉴权
 - [x] 拉流鉴权
@@ -276,3 +271,9 @@ pnpm run dev
 - docker 版本：24.0.2, build cb74dfc
 - srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.170
 - ffmpeg 版本：6.0
+
+## 致敬开源
+
+billd-live自2023年3月开源以来，仅有作者（也就是我）一个人维护，深知做开源的难处。
+
+如果你做过开源项目，并且单个仓库拿到 **`128+star`**，我个人认为这是非常不容易的，因为这代表了你的开源被很多人关注或认同，如果此时你正在了解直播相关方面的内容，我录制的 [**billd-live付费课**](https://www.hsslive.cn/article/151) 或许会对你有一定帮助，它将对你进行**免费**，作为我认同你在开源方面做的贡献，以及我对你力所能及的回馈，希望你能不忘初心，砥砺前行~

src/constant.ts

@@ -20,16 +20,16 @@ export const appBuildInfo =
   // @ts-ignore
   process.env.BilldHtmlWebpackPlugin as BilldHtmlWebpackPluginLog;
 
-// export const WEBSOCKET_URL =
-//   process.env.NODE_ENV === 'development'
-//     ? `ws://192.168.1.102:4300` // `ws://localhost:4300`
-//     : `wss://srs-pull.${prodDomain}`;
-
 export const WEBSOCKET_URL =
   process.env.NODE_ENV === 'development'
-    ? `ws://localhost:4300` // `ws://localhost:4300`
+    ? `ws://192.168.1.102:4300` // `ws://localhost:4300`
     : `wss://srs-pull.${prodDomain}`;
 
+// export const WEBSOCKET_URL =
+//   process.env.NODE_ENV === 'development'
+//     ? `ws://localhost:4300` // `ws://localhost:4300`
+//     : `wss://srs-pull.${prodDomain}`;
+
 export const AXIOS_BASEURL =
   process.env.NODE_ENV === 'development'
     ? `/api`

src/hooks/use-pull.ts

@@ -63,6 +63,9 @@ export function usePull(roomId: string) {
     stopDrawingArr.value = [];
     remoteVideo.value.forEach((el) => el.remove());
     remoteVideo.value = [];
+    if (isRemoteDesk.value && videoWrapRef.value) {
+      videoWrapRef.value.removeAttribute('style');
+    }
   }
 
   function handleVideoWrapResize() {
@@ -181,7 +184,11 @@ export function usePull(roomId: string) {
         });
         nextTick(() => {
           if (isRemoteDesk.value && videoWrapRef.value) {
-            videoWrapRef.value.style.display = 'inline-block';
+            if (newVal.size) {
+              videoWrapRef.value.style.display = 'inline-block';
+            } else {
+              videoWrapRef.value.style.removeProperty('display');
+            }
           }
         });
       }
@@ -367,6 +374,15 @@ export function usePull(roomId: string) {
     }
   );
 
+  watch(
+    () => appStore.remoteDesk.isClose,
+    (newval) => {
+      if (newval) {
+        handleStopDrawing();
+      }
+    }
+  );
+
   function initPull(data: { autolay?: boolean; isRemoteDesk?: boolean }) {
     if (data.autolay === undefined) {
       autoplayVal.value = true;

src/hooks/use-websocket.ts

@@ -348,7 +348,7 @@ export const useWebsocket = () => {
         console.log('收到nativeWebRtcOffer', data);
         if (data.isRemoteDesk) {
           if (data.receiver === mySocketId.value) {
-            console.warn('是发给我的nativeWebRtcOffer');
+            console.warn('是发给我的nativeWebRtcOffer-isRemoteDesk');
             if (networkStore.rtcMap.get(data.sender)) {
               return;
             }
@@ -371,11 +371,10 @@ export const useWebsocket = () => {
               sdp: data.sdp,
             });
           } else {
-            console.error('不是发给我的nativeWebRtcOffer');
+            console.error('不是发给我的nativeWebRtcOffer-isRemoteDesk');
           }
           return;
         }
-        console.log('kkkkkkkkkkk');
         if (
           data.live_room.type === LiveRoomTypeEnum.pk ||
           data.live_room.type === LiveRoomTypeEnum.tencent_css_pk

src/utils/network/webRTC.ts

@@ -618,6 +618,7 @@ export class WebRTCClass {
       const appStore = useAppStore();
       appStore.remoteDesk.isClose = true;
       appStore.remoteDesk.isRemoteing = false;
+      appStore.remoteDesk.startRemoteDesk = false;
     } catch (error) {
       this.prettierLog({ msg: '手动关闭webrtc连接失败', type: 'error' });
       console.error(error);

src/views/remoteDesktop/index.vue

@@ -160,6 +160,7 @@ watch(
   () => appStore.remoteDesk.isClose,
   (newval) => {
     if (newval) {
+      networkStore.removeRtc(receiverId.value);
       useTip({
         content: '远程连接断开',
         hiddenCancel: true,
@@ -234,6 +235,7 @@ function handleMouseDown(event: MouseEvent) {
         roomId: roomId.value,
         sender: mySocketId.value,
         receiver: receiverId.value,
+        keyboardtype: 0,
         type: isLongClick
           ? RemoteDeskBehaviorEnum.pressButtonLeft
           : RemoteDeskBehaviorEnum.pressButtonLeft,
@@ -301,7 +303,7 @@ function handleMouseUp(event: MouseEvent) {
         roomId: roomId.value,
         sender: mySocketId.value,
         receiver: receiverId.value,
-        keyboardtype: '',
+        keyboardtype: 0,
         type: isLongClick
           ? RemoteDeskBehaviorEnum.releaseButtonLeft
           : RemoteDeskBehaviorEnum.releaseButtonLeft,
@@ -313,7 +315,7 @@ function handleMouseUp(event: MouseEvent) {
 }
 
 function handleClose() {
-  networkStore.rtcMap.get(receiverId.value)?.close();
+  networkStore.removeRtc(receiverId.value);
 }
 
 function handleRemote() {