Merge pull request #3 from sophiezzhou/main

release: trtc-education-electron v1.0.1

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 1.0.1 (2022-1-23)
+
+## Fix
+
+- 不再自动加载 React 开发者工具，中国大陆区域由于网络限制，无法自动下载。
+- README.md 中增加关于 Windows 10、11 系统下，运行代码时的一些注意事项。
+- 修复问题：进入屏幕分享后，切换一次分享的屏幕或窗口，退出屏幕分享后，窗口不能正常恢复尺寸和位置的问题。
+
 # 1.0.0 (2022-1-18)
 
 ## Features

README.md

@@ -4,7 +4,18 @@ TRTC Education Electron 是一款在线课堂应用软件，支持一名老师
 
 # 立刻体验
 
-我们提供了构建好的安装包，可以下载、安装，立刻体验：[Windows 版](https://web.sdk.qcloud.com/trtc/electron/download/trtc-education-electron/TRTCElectronEducation-windows.zip)、[Mac 版](https://web.sdk.qcloud.com/trtc/electron/download/trtc-education-electron/TRTCElectronEducation-mac.zip)。
+我们提供了构建好的安装包，可以下载、安装，立刻体验：[Windows 版](https://web.sdk.qcloud.com/trtc/electron/download/solution/education-v2/TRTCEducationElectron-windows-latest.zip)、[Mac 版](https://web.sdk.qcloud.com/trtc/electron/download/solution/education-v2/TRTCEducationElectron-mac-latest.zip)。
+
+# 效果展示
+
+<table>
+<tr><th>教师端</th><th>学生端</th><tr>
+<tr><td><img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/preview-teacher.gif"/></td><td><img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/preview-student.gif"/></td><tr>
+</table>
+
+# 技术交流
+
+欢迎加入我们的 QQ 交流群：695855795，期待一起交流&学习！
 
 # 运行代码
 
@@ -14,81 +25,87 @@ TRTC Education Electron 是一款在线课堂应用软件，支持一名老师
 
 [注册腾讯云](https://cloud.tencent.com/document/product/378/17985) 账号，并完成 [实名认证](https://cloud.tencent.com/document/product/378/3629)。
 
-## 步骤 2: 创建应用， 获取 SDKAppID 和 密钥
+## 步骤 2: 创建应用，获取 SDKAppID 和密钥
+
+如果您之前已经创建过腾讯云实时音视频的应用，可以跳过该步骤，直接使用之前创建应用的 SDKAppID 和密钥。
 
-如果您之前已经创建过腾讯云实时音视频的应用，可以跳过该步骤，直接使用之前创建应用的 SDKAppID 和 密钥。
+1. 登录实时音视频控制台，选择 **【开发辅助】** > **【[快速跑通 Demo](https://console.cloud.tencent.com/trtc/quickstart)】**，在 **“创建应用”** 页签，输入您的应用名称，例如`TestTRTC`，单击 **【创建】** 按钮。  
+   <img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/create-new-app.png" width="800">
 
-1. 登录实时音视频控制台，选择【开发辅助】>【[快速跑通 Demo](https://console.cloud.tencent.com/trtc/quickstart)】，在“创建应用”页签，输入您的应用名称，例如`TestTRTC`，单击【创建】。  
-   <img src="https://main.qcloudimg.com/raw/f04d288ed091c98a5e8056eb86fb49e8.png">
+2. 跳过 **“下载源码”** 页签，直接点击 **【下一步】** 按钮，进入 **“修改配置”** 页签，记录下页面上显示的 SDKAppID 和密钥，后续步骤将会用到。
 
-2. 在跳过“下载源码”页签，直接点击“下一步”按钮，进入“修改配置”页签，记录下页面上显示的 SDKAppID 和密钥，后续步骤将会用到。
+  <img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/copy-sdkappid-secretkey.png" width="800">
 
-3. 本应用内部用到腾讯云即时通信 IM 实现应用内聊天、课堂互动控制信令传递，且是多窗口应用，需要开启即时通信 IM 的多实例登录。
+## 步骤 3: 配置 即时通信 IM
 
-3.1. 进入“相关云服务”菜单，点击下图中“即时通信 IM 应用”跳转到 IM 应用管理页面。
+本应用内部用到腾讯云即时通信 IM 实现应用内聊天、课堂互动控制信令传递，且是多窗口应用，需要开启即时通信 IM 的多实例登录。
+
+1. 进入 **“相关云服务”** 菜单，点击下图中 **“即时通信 IM 应用”** 跳转到 IM 应用管理页面。
 
   <img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/open-im-web-console.png" width="800">
 
-3.2. 找到刚创建的应用，如下图，点击进入该应用管理页面。
+2. 找到刚创建的应用，如下图，点击进入该应用管理页面。
 
   <img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/find-target-im-sdkapp-name.png" width="800">
 
-3.3. 打开菜单：功能配置->登录与消息，如下图所示，点击“登录设置”区域的“编辑”链接，将“Web 端可同时在线个数”设置为大于等于 2 的值（目前本应用最多需要同时登录 2 个 IM 示例，可以设置更多一些，已备后续使用）。
+3. 打开菜单：**【功能配置】** -> **【登录与消息】** ，如下图所示，点击 **“登录设置”** 区域的 **“编辑”** 链接，将 **“Web 端可同时在线个数”** 设置为大于等于 2 的值（目前本应用最多需要同时登录 2 个 Web IM 实例，可以设置更多一些，以备后续使用）。
 
   <img src="https://web.sdk.qcloud.com/trtc/electron/download/resources/education-v2/modify-web-instance-up-limit.png" width="800">
 
-## 步骤 3: 运行环境准备
+## 步骤 4: 运行环境准备
 
 本代码工程的运行依赖于 node.js 和 yarn。
 
-### 步骤 3.1：安装 node.js
+1. 安装 node.js
 
 建议 [node.js](https://nodejs.org/en/download/) 使用 14.16.0 以上版本，安装完成后，在命令行终端执行以下命令检查 node.js 版本。
 
 ```
 node --version
 ```
 
-### 步骤 3.2: 安装 yarn
+2. 安装 yarn
 
-如果 node.js 版本小于 16.10，在命令行终端执行以下命令安装 [yarn](https://yarnpkg.com/getting-started/install)。
+- 如果 node.js 版本小于 16.10，在命令行终端执行以下命令安装 [yarn](https://yarnpkg.com/getting-started/install)。
 
 ```
 npm i -g corepack
 ```
 
-如果 node.js 版本大于等于 16.10，在命令行终端执行以下命令安装 yarn。
+- 如果 node.js 版本大于等于 16.10，在命令行终端执行以下命令安装 yarn。
+
+> 注意：Window 10、11 下如果遇到权限不足的错误提示，请尝试以管理员身份，在 cmd 控制台执行。
 
 ```
 corepack enable
 ```
 
-## 步骤 4: 克隆代码工程
+## 步骤 5: 克隆代码工程
 
-您可以直接下载代码，解压后进入代码目录 `trtc-education-electron`，或者使用 [git](https://git-scm.com/downloads) 工具克隆代码工程。使用 git 工具克隆代码工程，请在命令行终端执行以下命令：
+您可以直接[下载代码](https://github.com/TencentCloud/trtc-education-electron)，解压后进入代码目录 `trtc-education-electron`，或者使用 [git](https://git-scm.com/downloads) 工具克隆代码工程。使用 git 工具克隆代码工程，请在命令行终端执行以下命令：
 
 ```
 git clone https://github.com/TencentCloud/trtc-education-electron.git
 
 cd trtc-education-electron
 ```
 
-## 步骤 5: 添加基础配置
+## 步骤 6: 配置 SDKAppID 和密钥
 
 1. 找到并打开 `src/main/config/generateUserSig.js` 文件。
 
-2. 设置 `generateUserSig.js` 文件中的相关参数：
+2. 设置 `generateUserSig.js` 文件中的相关参数，用于生成身份认证用的用户签名 UserSig：
    - SDKAPPID：默认为 0，请设置为步骤 2 创建应用的 SDKAppID。
    - SECRETKEY：默认为空字符串，请设置为步骤 2 创建应用的密钥。
 
-> ⚠️ 注意：
-> 以上两个配置是为使用腾讯云实时音视频时，对用户做认证，生成用户签名 userSig。
+> 注意：
+> 以上两个配置是为使用腾讯云实时音视频时，对用户做认证，生成用户签名 UserSig
 >
-> 这种生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通 Demo 和功能调试**。
+> 这种生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此 **该方法仅适合本地跑通 Demo 和功能调试**。
 >
 > 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/647/17275#Server)。
 
-## 步骤 6：开发模式运行
+## 步骤 7：开发模式运行
 
 在命令行终端中，进入代码目录 `trtc-education-electron`，执行以下命令。
 
@@ -98,14 +115,22 @@ yarn
 yarn start
 ```
 
-## 步骤 7: 构建安装包、运行
+> 注意:
+>
+> 第一次执行 yarn 命令安装依赖时，Window 10、11 下如果遇到权限不足的错误提示，请尝试以管理员身份，在 cmd 控制台执行一次；之后就可以以普通用户身份在 cmd 控制台或者集成开发工具自带终端中执行，例如：Visual Studio Code、WebStorm 等。
+>
+> 安装依赖过程中，如遇到 Electron 下载慢甚至卡住不动等问题，您可以参考 [Electron 常见问题收录](https://cloud.tencent.com/developer/article/1616668) 文档解决。
+
+## 步骤 8: 构建安装包、运行
 
 在命令行终端中，进入代码目录 `trtc-education-electron`，执行以下命令构建安装包，构建好的安装包位于 `trtc-education-electron/build/release` 目录下，可以安装运行。
 
 ```
 yarn package
 ```
 
+> 注意：只能使用 Mac 电脑构建 Mac 安装包，使用 Windows 电脑构建 Windows 安装包。
+
 # 代码说明
 
 ```
@@ -143,10 +168,6 @@ yarn package
 
 2. 腾讯云开发者论坛收录常见问题：<https://cloud.tencent.com/developer/article/1616668>。
 
-# 技术交流
-
-欢迎加入我们的 QQ 交流群：695855795，期待一起交流&学习！
-
 # 官网文档
 
 我们的官网文档，请查看：<https://cloud.tencent.com/document/product/647/45465>

build/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "trtc-education-electron",
   "productName": "TRTC-Education-Electron",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "TRTC Education Electron based on Tencent RTC, Tencent IM and Electron for teachers and students interacting and coordinating remotely",
   "main": "./dist/main/main.js",
   "author": {

src/main/create-window.ts

@@ -60,7 +60,15 @@ export async function createWindow(
     process.env.NODE_ENV === 'development' ||
     process.env.DEBUG_PROD === 'true'
   ) {
-    await installExtensions();
+    /**
+     * 安装 React 开发者工具时，需要访问 Chrome App Store，国内网络默认无法访问，
+     * 安装时会有超时的报错提示。
+     * 如果可以访问 Chrome App Store，可以取消下面一行代码的注释。
+     * 如果不能访问 Chrome App Store，仍然希望安装 React 开发者工具，可以尝试
+     * 以下链接中的方法：
+     * https://www.electronjs.org/docs/latest/tutorial/devtools-extension#manually-loading-a-devtools-extension
+     */
+    // await installExtensions();
   }
 
   const newWindowOptions = { ...defaultOptions, ...options };

src/main/windows/window-class-room.ts

@@ -78,10 +78,17 @@ class ClassRoomWindow extends BaseWindow {
 
   enterScreenShareMode() {
     this.logger?.log(`${ClassRoomWindow.logPrefix}onEnterScreenShareMode`);
+    if (this.windowMode === EWindowMode.ScreenShare) {
+      this.logger?.debug(
+        `${ClassRoomWindow.logPrefix}onEnterScreenShareMode already in screen share mode, exit.`
+      );
+      return; // 已经进入屏幕分享模式，直接退出
+    }
     this.windowMode = EWindowMode.ScreenShare;
     if (this.browserWindow) {
-      this.browserWindow.setMinimumSize(VIDEO_LIST_WINDOW_WIDTH, HEADER_HEIGHT);
       this.browserWindow.setResizable(false);
+      this.browserWindow.setMinimumSize(VIDEO_LIST_WINDOW_WIDTH, HEADER_HEIGHT);
+      this.browserWindow.setAlwaysOnTop(true);
 
       const userCount = Object.keys(store.userMap).length || 1;
       this.videoListWindowHeight =
@@ -111,11 +118,12 @@ class ClassRoomWindow extends BaseWindow {
 
   private enterWhiteboardBounds() {
     if (this.browserWindow) {
-      this.browserWindow.setMinimumSize(1200, 640);
       this.browserWindow.setResizable(true);
+      this.browserWindow.setMinimumSize(1200, 640);
+      this.browserWindow.setAlwaysOnTop(false);
       if (this.whiteboardWindowBounds) {
         this.logger?.debug(
-          `${ClassRoomWindow.prelog}enterWhiteboardMode bounds:`,
+          `${ClassRoomWindow.prelog}enterWhiteboardBounds bounds:`,
           this.whiteboardWindowBounds
         );
         this.setBounds(this.whiteboardWindowBounds);

src/main/windows/window-main.ts

@@ -245,12 +245,12 @@ class MainWindow extends BaseWindow {
       this.topToolbarWindow.show();
     }
 
+    // 教师端课堂窗口（白板窗口）进入屏幕分享模式
     if (this.teacherClassRoomWindow) {
       this.teacherClassRoomWindow.send(
         EUserEventNames.ON_START_SHARE_SCREEN_WINDOW,
         store.currentUser.sharingScreenInfo
       );
-      this.teacherClassRoomWindow.setAlwaysOnTop(true);
       this.teacherClassRoomWindow.enterScreenShareMode();
     }
   }
@@ -287,7 +287,6 @@ class MainWindow extends BaseWindow {
         EUserEventNames.ON_STOP_SHARE_SCREEN_WINDOW,
         null
       );
-      this.teacherClassRoomWindow.setAlwaysOnTop(false);
       this.teacherClassRoomWindow.enterWhiteboardMode();
     }
   }

src/renderer/core/room-core/TUIRoomCoordinator.ts

@@ -489,7 +489,8 @@ class TUIRoomCoordinator implements ITUIRoomCoordinator {
       const message = {
         cmd: ETUIRoomCoordinatorCommand.SendSpeechApplication,
         room_id: this.roomID,
-        receiver_id: userID,
+        sender_id: userID,
+        agree,
       };
       let tsResponse = null;
       if (agree) {