Electron+React+WebRTC screen sharing (1): development environment

Long ago, I planned to build a screen sharing program based on WebRTC. By the way, suppose a TURN server, and try WebRTC traffic transfer.

brief introduction

A long time ago, I also developed a similar WebRTC audio and video sharing program, but it was a simple one-on-one project. I didn't use the TURN server on the public network, and I didn't have time to study it carefully. So I felt a little sorry.

This time Electron As the client carrier, React It is used to develop the interface and plan to develop a support TURN Server+room screen sharing program.

choice Electron It is to use WebRTC API to reduce development difficulty; choice React It is for componentized WEB UI and automatic rendering, saving time and effort.

In the whole plan, I will record the development progress in the form of a series of articles (Zimiao appearance blog www.azimiao. com).

Content of this issue: building the development environment

The development environment has been set up for a long time, and I have developed some content, but for the sake of the integrity of the series of articles, I still need to list them specifically.

Preview of content done so far:

Configure webpack, babel, etc

The webpack is used to package our front-end resources. In the packaging process, webpack and the introduced plug-in will analyze resource dependency, merge or compress resources, etc.

Babel is a javascript The compiler will use ES6 And above standards into browser compatible code, our jsx The file needs to be converted using babel.

1. Configure webpack
   The webpack configuration tutorial is available on the whole network, but there are many descriptions. Here are the current rules:

    //Zimiao haunting blog (azimiao. com) rules: [ { test: /\.jsx?$/, use: [{ loader: 'babel-loader' }], include: defaultInclude }, {//Zimiao haunts (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 } ]

   To be packaged in Electron The web page running in needs to be declared target :

    target: 'electron-renderer'

   Declare a NODE_ENV Parameters for other scripts to distinguish between environments:

    //DefinePlugin allows us to create global variables [Zimiao. com] plugins: [ new HtmlWebpackPlugin(), new webpack.DefinePlugin({ 'process.env. NODE_ENV': JSON.stringify('development') }) ],

   Run at development time webpack-dev-server , sub thread (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. Configure Babel
   Our React project uses JSX Written, Babel will convert JSX files and spit out a converted file for webpack to continue working.
   In the above, the loader: 'babel-loader' That is to say, it will JSX Give it to Babel for processing. However, pure Babel does not know how to handle files. We need to configure Babel's configuration files .babelrc , put in the preset or plug-in we need.

    //Source: www.azimiao.com { "presets": [ "@ babel/preset read"//By default, it is equivalent to the official plug-in collection ], "Plugins": ["@ babel/plugin proprietary class properties"]//A plug-in is introduced to parse the attributes written in the js class }

Configure package.json

1. Configure Electron
   package.json It needs to be specified in Electron Entrance to:

    "main": "main.js"

2. Configure React
   package.json It needs to be specified in homepage , this path will be added to webpack In front of the packed path:

    "homepage": "./"

3. Configure the start script
   webpack-dev-server It has the "hot update" function of automatically compiling and refreshing the modified content, which is convenient for development. Therefore, package.json In start The command is as follows:

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

So far, the core content of configuring the development environment is over.