add node and webpack

runner365 · Oct 15, 2021 · 7c070ac · 7c070ac
1 parent 45a84a9
commit 7c070ac
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -1,26 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <script src="jssrc/encode.js"></script>
-        <script src="jssrc/flvmux.js"></script>
-        <script src="jssrc/http3writer.js"></script>
-        <script src="jssrc/wswriter.js"></script>
-        <script type='text/javascript'>
-            async function publish() {
-                let videoElement = document.getElementById('video_container_publish')
-                wsClient = new WsWriter();
-
-                wsClient.SetVideoElement(videoElement);
-                wsClient.Init("127.0.0.1:1900", "live/6699.flv");
-            }
-        </script>
     </head>
 
     <body>
         <h1>Webcodec&Webtransport push demo</h1>
         <br/>
         <div>
-            <button onclick="publish()">publish</button>
+            <button id="publishId">publish</button>
             <br><br>
         </div>
 

diff --git a/jssrc/encode.js → jssrc/Encoder.js b/jssrc/encode.js → jssrc/Encoder.js
@@ -1,3 +1,5 @@
+
+
 class Encoder {
     constructor() {
         this.videoElement_ = null;
@@ -38,7 +40,9 @@ class Encoder {
                 avc: {format: "avc"},
                 codec: 'avc1.42e01f',
                 width: 1280,
-                height: 720
+                height: 720,
+                bitrate: 3000000,
+                hardwareAcceleration: "prefer-hardware",
             })
         } else if (this.videoCodecType == "vp8") {
             await this.vencoder_.configure({
@@ -159,3 +163,5 @@ class Encoder {
                     timestamp:ts, data:chunkData, isSeq:false, isKey:false});
     }
 }
+
+module.exports = Encoder;
diff --git a/jssrc/flvmux.js b/jssrc/flvmux.js
@@ -1,3 +1,5 @@
+
+
 let FLV_CODEC_H264 = 7;
 let FLV_CODEC_AV1  = 13;
 let FLV_CODEC_VP8  = 14;
@@ -148,4 +150,6 @@ class FlvMux {
     async output(data) {
         await this.Writer.Send(data)
     }
-}
+}
+
+module.exports = FlvMux;
diff --git a/jssrc/http3writer.js b/jssrc/http3writer.js
@@ -33,4 +33,6 @@ class Http3Writer {
         }
         this.stream.close();
     }
-}
+}
+
+module.exports = Http3Writer;
diff --git a/jssrc/index.js b/jssrc/index.js
@@ -0,0 +1,14 @@
+const WsWriter  = require('./WsWriter');
+
+
+async function publish() {
+    let videoElement = document.getElementById('video_container_publish')
+    let wsClient = new WsWriter();
+    wsClient.SetVideoElement(videoElement);
+    wsClient.Init("127.0.0.1:1900", "live/6699.flv");
+}
+
+document.getElementById('publishId').addEventListener('click', ()=>{
+    publish()
+})
+
diff --git a/jssrc/wswriter.js b/jssrc/wswriter.js
@@ -1,3 +1,8 @@
+// import FlvMux from './FlvMux';
+// import Encoder from './Encoder';
+const FlvMux  = require('./FlvMux');
+const Encoder  = require('./Encoder');
+
 function stringToUint8Array(str) {
     var arr = [];
     for (var i = 0, j = str.length; i < j; ++i) {
@@ -22,10 +27,24 @@ class WsWriter {
     }
 
     async Init(host, uri) {
-        //"localhost:1900", "/live/1000.flv"
-        console.log("try to open host:", host, "uri:", uri);
-        let url = "ws://" + host + "/" + uri;
+        let url = "";
+
+        if (uri != "") {
+            url = "ws://" + host + "/" + uri;
+            console.log("websocket url:", url);
+        } else {
+            url = "wss://" + host;
+            console.log("websocket ssl url:", url);
+        }
         this.ws = new WebSocket(url);
+        /*
+        this.ws = new WebSocket(url, {
+            protocolVersion: 8,
+            origin: 'https://' + host,
+            rejectUnauthorized: false
+          });
+        */
+
         this.ws.onopen = () =>
         {
             console.log("ws client is opened....");
@@ -77,6 +96,5 @@ class WsWriter {
     async close() {
 
     }
-
-
-}
+}
+module.exports = WsWriter;
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "webcodec-push-sdk",
+    "version": "1.0.0",
+    "description": "webcodec push sdk",
+    "main": "index.js",
+    "scripts": {
+        "build": "NODE_ENV=development webpack --config ./webpack.config.js",
+        "start": "webpack serve --config ./webpack.config.js --port=9000"
+    },
+    "browser": {
+        "fs": false,
+        "path": false,
+        "os": false
+    },
+    "dependencies": {
+        "events": "^3.3.0"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@babel/core": "^7.12.10",
+        "@babel/preset-env": "^7.12.11",
+        "babel-loader": "^8.2.2",
+        "babel-plugin-import": "^1.13.3",
+        "css-loader": "^5.1.3",
+        "fs": "",
+        "html-webpack-plugin": "^4.5.0",
+        "net": "",
+        "style-loader": "^2.0.0",
+        "uglifyjs-webpack-plugin": "^2.2.0",
+        "webpack": "",
+        "webpack-bundle-analyzer": "",
+        "webpack-cli": "^4.9.0",
+        "webpack-dev-server": ""
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,91 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: "./jssrc/index.js",
+    module: {
+        rules: [
+          {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+          },
+          {
+            test: /\.ts?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/,
+          },
+          {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader'],
+          },
+          {
+            test: /\.less$/,
+            use: [
+              'vue-style-loader',
+              {
+                loader: 'css-loader',
+                options: { esModule: false },
+              },
+              {
+                loader: 'less-loader',
+                options: {
+                  lessOptions: {
+                    javascriptEnabled: true,
+                  },
+                },
+              },
+              // MiniCssExtractPlugin.loader,
+            ],
+          },
+          {
+            test: /\.js$/i,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      targets: {
+                        browsers: 'chrome > 70',
+                      },
+                    },
+                  ],
+                ],
+                plugins: [
+                  [
+                    'import',
+                    {
+                      libraryName: 'ant-design-vue',
+                      libraryDirectory: 'es',
+                      style: 'css',
+                    },
+                  ],
+                ],
+              },
+            },
+          },
+        ],
+    },
+    mode: 'development',
+    devtool: 'inline-source-map',
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.json', '.vue'],
+      alias: {
+        'webcodec-push-sdk': path.resolve(__dirname, 'index.js'),
+      }
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'webcodec-push-sdk-webpack.bundle.js',
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+          template: './index.html',
+          excludeChunks: ['client'],
+        }),
+    ],
+    node: {
+        fs: 'empty',
+    }
+};