alindas / arena Goto Github PK
View Code? Open in Web Editor NEW技术试炼场
技术试炼场
getUserMedia
获取用户摄像头、麦克风等流;getDisplayMedia
获取系统流
动态添加流
MediaDevices 接口的 devicechange 事件可以用来监控设备变更。
当使用` MediaRecorder 录制 MediaStream 时,如果移除或添加媒体轨道(track),MediaRecorder 通常会自动结束录制,并触发 onstop 事件。
可通过动态开启和关闭MediaRecorder处理媒体轨道的变化。
在录制过程中破坏了已记录的媒体轨道,这会导致 MediaRecorder 的 dataavailable 事件不再触发。并且被破坏的媒体轨道的状态不会再动态变化
根据 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 上导出
出现这种情况的主要原因是 electron-builder 默认情况下把所有的 js 文件都进行了混淆,包括了应用程序入口文件和 preload 脚本文件。这个问题可以通过以下两种方式解决:
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 对预加载脚本文件的自动混淆,从而解决无法运行的问题。
package.json
文件的 electron-builder 配置中添加如下参数:"build": {
"asar": true,
"nodeIntegration": true,
"builderOptions": {
"prepackaged": "./build",
"sourcemap": true
}
}
启用 sourcemap 后,electron-builder 会生成一个 .js.map
文件,并在构建完成后提示将其上传到服务器上。在 Electron 主进程初始化时,可以手动加载这个 sourcemap 文件,并设置对应的 preload 脚本文件,这样就可以解决无法运行的问题。
以上两种方式都可以解决使用 electron-builder 打包应用时无法运行预加载脚本文件的问题,具体采用哪种方式还需要根据应用实际情况来决定。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.