很早之前就计划做一个基于 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 转换。

  1. 配置 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))
            }
    }
    
  2. 配置 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

  1. 配置 Electron
    package.json中需要指定Electron的入口:

    "main": "main.js"
    
  2. 配置 React
    package.json中需要指定homepage,这个路径将会加在webpack打包后的路径前面:

    "homepage": "./"
    
  3. 配置 start 脚本
    webpack-dev-server具有修改内容自动编译并自动刷新的“热更新”功能,方便开发,因此,package.json中的start命令如下:

    "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.development.config.js --mode development"
    

到这里,配置开发环境的核心内容就讲完了。

梓喵出没博客(azimiao.com)版权所有,转载请注明链接:https://www.azimiao.com/6373.html
欢迎加入梓喵出没博客交流群:313732000

我来吐槽

*

*