alindas / arena Goto Github PK

1. getUserMedia 获取用户摄像头、麦克风等流；getDisplayMedia 获取系统流

2. 动态添加流

MediaDevices 接口的 devicechange 事件可以用来监控设备变更。

当使用` MediaRecorder 录制 MediaStream 时，如果移除或添加媒体轨道（track），MediaRecorder 通常会自动结束录制，并触发 onstop 事件。

可通过动态开启和关闭MediaRecorder处理媒体轨道的变化。

在录制过程中破坏了已记录的媒体轨道，这会导致 MediaRecorder 的 dataavailable 事件不再触发。并且被破坏的媒体轨道的状态不会再动态变化

出现这种情况的主要原因是 electron-builder 默认情况下把所有的 js 文件都进行了混淆，包括了应用程序入口文件和 preload 脚本文件。这个问题可以通过以下两种方式解决：

1. 配置 electron-builder 跳过预加载脚本的混淆。在 package.json 文件的 electron-builder 配置中添加如下参数：

"build": {
  "asar": true,
  "nodeIntegration": true,
  "builderOptions": {
    "prepackaged": "./build",
    "asarUnpack": [
      "**/preload/**"
    ],
    "extraFiles": [
      {
        "from": "src/preload",
        "to": "preload",
        "filter": ["*.js"]
      }
    ]
  }
}

其中，asarUnpack 参数用于解压 preload 目录下的脚本文件，extraFiles 参数用于将解压后的脚本文件拷贝到 app.asar.unpacked 目录。这样就可以避免 electron-builder 对预加载脚本文件的自动混淆，从而解决无法运行的问题。

2. 启用 electron-builder 的 sourcemap。在 package.json 文件的 electron-builder 配置中添加如下参数：

"build": {
  "asar": true,
  "nodeIntegration": true,
  "builderOptions": {
    "prepackaged": "./build",
    "sourcemap": true
  }
}

启用 sourcemap 后，electron-builder 会生成一个 .js.map 文件，并在构建完成后提示将其上传到服务器上。在 Electron 主进程初始化时，可以手动加载这个 sourcemap 文件，并设置对应的 preload 脚本文件，这样就可以解决无法运行的问题。

以上两种方式都可以解决使用 electron-builder 打包应用时无法运行预加载脚本文件的问题，具体采用哪种方式还需要根据应用实际情况来决定。

根据 IndexedDB 规范，IndexedDB 数据库在没有活动的事务时会自动关闭。这主要出于性能考虑，并且大多数情况下你并不需要手动关闭数据库。

如果你在不关闭数据库的情况下多次打开数据库，并没有什么特别的负面影响。实际上，IndexedDB 已经设计为支持同时处理多个数据库操作，它内部有事务机制在维护并发控制和数据的完整性。

重复打开数据库并不会创建新的数据库实例或者覆盖现有数据，而是返回指向同一个数据库的另一个连接对象。如果你在多次打开的数据库对象上执行操作，IndexedDB 会以事务队列的方式来处理，保证在一个事务完成后另一个事务才会开始。

但请注意，如果你的应用在多个标签页或窗口中打开，每个标签页或窗口都会有自己独立的连接，这可能会导致并发问题。这种情况下，你需要使用 versionchange 事件来协调这些连接，确保在新的版本数据库打开时，旧的连接被正确关闭。

总的来说，除非有特殊的需要，否则你通常不需要担心关闭 IndexedDB 数据库。

安装依赖包

npm i react react-dom
npm i --save-dev @babel/cli @babel/core @babel/preset-react @babel/plugin-transform-react-jsx

根目录下添加 .babelrc

{
  "presets": [
    "@babel/preset-react",
    // 如果 jsx 采用 esm 模块，需要对其进行转换
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "modules": "commonjs"
      }
    ]
}

package.json 添加编译命令

"start": "electron .", 
"babel": "babel rc -d utils",
"dev-rc": "npm run babel && npm start"

rc 目录放置 jsx 文件，从 utils 引用编译后的文件

const utilsFn = require('./utils/utilsFn').default // babel6 转换的 esm 模块都放在 default 上导出