【electron】解决CS里的全屏问题

目录

解决方法及原理

效果

用原生的html即可全屏

原生的electron api

wvp工程还是用它的h5 不变

---

解决方法及原理

### 1. 在主进程中启用全屏权限
在[main.js](file:///d:/java/test/cs/main.js)中增加了对全屏权限的支持：
- 在[webPreferences](file:///d:/java/test/cs/main.js#L12-L12)中添加了`fullscreenable: true`
- 在权限处理函数中允许[fullscreen](file://d:\java\test\cs\main.js#L50-L50)权限请求
- 添加了专门用于全屏控制的IPC处理程序

### 2. 在预加载脚本中暴露Electron原生全屏API
在[preload.js](file:///d:/java/test/cs/preload.js)中通过IPC暴露了以下方法：
- `window.electron.enterFullscreen()` - 进入全屏
- `window.electron.exitFullscreen()` - 退出全屏
- `window.electron.isFullscreen()` - 检查是否全屏状态

### 3. 在2.html中增加了两种全屏方法的支持
在[2.html](file:///d:/web-video-platform/wvp/static/2.html)中实现了：
- HTML5原生全屏API（适用于普通浏览器）
- Electron原生全屏API（适用于Electron环境）
- 用户可以选择使用哪种方法进行全屏操作

### 使用说明：

1. 在Electron应用中打开[2.html](file:///d:/web-video-platform/wvp/static/2.html)
2. 选择"Electron原生全屏"选项
3. 点击"切换全屏"按钮即可正常使用全屏功能
4. 按ESC键或再次点击按钮可退出全屏

这样修改后，在Electron环境中就可以正常使用全屏功能了。Electron原生全屏方法比HTML5 API在Electron环境中更加稳定可靠。

效果

用原生的html即可全屏

原生的electron api

wvp工程还是用它的h5 不变

即我们只是需要cs:里的 main.js里开放权限即可。