Electron+React+WebRTC屏幕共享(1):开发环境

很早之前就计划做一个基于 WebRTC 的屏幕共享程序,顺便假设一个 TURN 服务器,试试 WebRTC 流量中转。
简介
很久之前的计划,在此之前,我也开发过类似的 WebRTC 音视频共享,但只是一个很简单的一对一项目,没用上公网 TURN 服务器,也没时间细细研究,因此心里有点遗憾。
这次选定了Electron
作为客户端载体,React
用来开发界面,计划开发一个支持TURN
服务器 + 房间的屏幕共享程序。
选择Electron
是为了使用 WebRTC API,降低开发难度;选择React
是为了组件化的 WEB UI 与自动渲染,省时省力。
在整个计划内,我会以系列文章(梓喵出没博客www.azimiao.com)的形式记录开发进度。
本期内容:搭建开发环境
开发环境很早前就搭好了,我也开发了一些内容,但是为了系列文章完整性,还是要专门列出来。
目前已做的内容预览:
配置 webpack 与 babel 等
webpack 用来打包我们的前端资源。在打包过程中,webpack 和 引入的插件会分析资源依赖,合并或压缩资源等。
Babel 是一个javascript
编译器,他会把使用ES6
及以上标准书写的代码转换成浏览器兼容的代码,我们的jsx
文件就需要使用 babel 转换。
- 配置 webpack
webpack 配置教程全网都是,不过多描述,这里先展示目前的 rules://梓喵出没博客(azimiao.com) rules: [ { test: /\.jsx?$/, use: [{ loader: 'babel-loader' }], include: defaultInclude }, {//梓喵出没(azimiao.com) test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], include: defaultInclude }, { test: /\.(jpe?g|png|gif)$/, use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }], include: defaultInclude }, { test: /\.(eot|svg|ttf|woff|woff2)$/, use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }], include: defaultInclude } ]
为了打包成在
Electron
中运行的网页,需要声明target
:target: 'electron-renderer'
声明一个
NODE_ENV
参数,供其他脚本区分环境://DefinePlugin允许我们创建全局变量[梓喵出没(azimiao.com)] plugins: [ new HtmlWebpackPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) ],
开发时运行
webpack-dev-server
,子线程(梓miao出没博客(www.azimiao.com))直接调起Electron
:devServer: { contentBase: path.resolve(__dirname, 'dist'), stats: { colors: true, chunks: false, children: false }, before() { spawn( 'electron', ['.'], { shell: true, env: process.env, stdio: 'inherit' } ) .on('close', code => process.exit(0)) .on('error', spawnError => console.error(spawnError)) } }
- 配置 Babel
我们的 React 工程使用JSX
编写,Babel 将会转换 JSX 文件,并吐出一个转换过的文件,供 webpack 继续干活。
上文中, JSX 下面的loader: 'babel-loader'
即声明了将JSX
交给 Babel 处理。但是,纯 Babel 并不知怎么处理文件,需要我们配置 Babel 的配置文件.babelrc
,将我们需要的预设或插件放进去。//本文来源:www.azimiao.com { "presets": [ "@babel/preset-react"//预设,相当于官方的插件合集 ], "plugins": ["@babel/plugin-proposal-class-properties"]//引入了一个插件,用于解析在 js 类中写的属性 }
配置 package.json
- 配置 Electron
package.json
中需要指定Electron
的入口:"main": "main.js"
- 配置 React
package.json
中需要指定homepage
,这个路径将会加在webpack
打包后的路径前面:"homepage": "./"
- 配置 start 脚本
webpack-dev-server
具有修改内容自动编译并自动刷新的“热更新”功能,方便开发,因此,package.json
中的start
命令如下:"start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.development.config.js --mode development"
到这里,配置开发环境的核心内容就讲完了。