diff --git a/app/worker-client.js b/app/worker-client.js index 0dbc972..1939646 100644 --- a/app/worker-client.js +++ b/app/worker-client.js @@ -4,8 +4,7 @@ import EventEmitter from 'events' import { Writable, PassThrough } from 'stream' import toArrayBuffer from 'to-arraybuffer' import ByteBuffer from 'bytebuffer' -import webworkify from 'webworkify' -import worker from './worker' +import Worker from './worker' /** * Creates proxy MumbleClients to a real ones running on a web worker. @@ -13,7 +12,7 @@ import worker from './worker' */ class WorkerBasedMumbleConnector { constructor () { - this._worker = webworkify(worker) + this._worker = new Worker() this._worker.addEventListener('message', this._onMessage.bind(this)) this._reqId = 1 this._requests = {} diff --git a/app/worker.js b/app/worker.js index 0a5869e..704492a 100644 --- a/app/worker.js +++ b/app/worker.js @@ -3,18 +3,11 @@ import mumbleConnect from 'mumble-client-websocket' import toArrayBuffer from 'to-arraybuffer' import chunker from 'stream-chunker' import Resampler from 'libsamplerate.js' +import CodecsBrowser from 'mumble-client-codecs-browser' // Polyfill nested webworkers for https://bugs.chromium.org/p/chromium/issues/detail?id=31666 import 'subworkers' -// Monkey-patch to allow webworkify-webpack and codecs to work inside of web worker -/* global URL */ -window.URL = URL - -// Using require to ensure ordering relative to monkey-patch above -let CodecsBrowser = require('mumble-client-codecs-browser') - -export default function (self) { let sampleRate let nextClientId = 1 let nextVoiceId = 1 @@ -284,4 +277,5 @@ export default function (self) { console.error('exception during message event', ev.data, ex) } }) -} + + export default null \ No newline at end of file diff --git a/package.json b/package.json index 55e4ef2..9ff0d89 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "An HTML5 Mumble client.", "scripts": { "build": "webpack && [ -f dist/config.local.js ] || cp app/config.local.js dist/", - "prepublish": "rm -rf dist && npm run build", + "prepare": "rm -rf dist && npm run build", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Jonas Herzig ", @@ -15,43 +15,46 @@ "dist" ], "devDependencies": { - "audio-buffer-utils": "^3.1.2", + "@babel/core": "^7.9.0", + "@babel/plugin-transform-runtime": "^7.9.0", + "@babel/preset-env": "^7.9.0", + "@babel/runtime": "^7.9.2", + "audio-buffer-utils": "^5.1.2", "audio-context": "^1.0.3", - "babel-core": "^6.18.2", - "babel-loader": "^6.2.8", - "babel-plugin-transform-runtime": "^6.15.0", - "babel-preset-es2015": "^6.14.0", - "babel-runtime": "^6.18.0", - "brfs": "^1.4.3", + "babel-loader": "^8.1.0", + "brfs": "^2.0.2", "bytebuffer": "^5.0.1", - "css-loader": "^0.26.0", - "dompurify": "^0.8.9", + "css-loader": "^3.4.2", + "dompurify": "^2.0.8", "drop-stream": "^1.0.0", "duplex-maker": "^1.0.0", - "extract-loader": "^0.1.0", - "file-loader": "^0.9.0", - "getusermedia": "^2.0.0", - "html-loader": "^0.4.4", - "json-loader": "^0.5.4", - "keyboardjs": "^2.3.4", - "knockout": "^3.4.0", + "extract-loader": "^5.0.1", + "file-loader": "^4.3.0", + "fs": "0.0.1-security", + "getusermedia": "^2.0.1", + "html-loader": "^0.5.5", + "json-loader": "^0.5.7", + "keyboardjs": "^2.5.1", + "knockout": "^3.5.1", + "libsamplerate.js": "^1.0.0", "lodash.assign": "^4.2.0", - "microphone-stream": "^3.0.5", - "node-sass": "^4.9.3", - "raw-loader": "^0.5.1", - "regexp-replace-loader": "0.0.1", - "sass-loader": "^4.1.1", + "microphone-stream": "^5.0.1", + "mumble-client": "^1.3.0", + "mumble-client-codecs-browser": "^1.2.0", + "mumble-client-websocket": "^1.0.0", + "node-sass": "^4.13.1", + "raw-loader": "^4.0.0", + "regexp-replace-loader": "1.0.1", + "sass-loader": "^8.0.2", "stream-chunker": "^1.2.8", "subworkers": "^1.0.1", "to-arraybuffer": "^1.0.1", - "transform-loader": "^0.2.3", + "transform-loader": "^0.2.4", "voice-activity-detection": "johni0702/voice-activity-detection#9f8bd90", - "webpack": "^1.13.3", - "webworkify-webpack": "^1.1.8", - "libsamplerate.js": "^1.0.0", - "mumble-client-codecs-browser": "^1.2.0", - "mumble-client-websocket": "^1.0.0", - "mumble-client": "^1.3.0", - "web-audio-buffer-queue": "^1.1.0" - } + "web-audio-buffer-queue": "^1.1.0", + "webpack": "^4.42.1", + "webpack-cli": "^3.3.11", + "worker-loader": "^2.0.0" + }, + "optionalDependencies": {} } diff --git a/patches/mumble-client-codecs-browser+1.2.0.patch b/patches/mumble-client-codecs-browser+1.2.0.patch new file mode 100644 index 0000000..bd042df --- /dev/null +++ b/patches/mumble-client-codecs-browser+1.2.0.patch @@ -0,0 +1,183 @@ +diff --git a/node_modules/mumble-client-codecs-browser/lib/decode-worker.js b/node_modules/mumble-client-codecs-browser/lib/decode-worker.js +index 3925f29..be9af92 100644 +--- a/node_modules/mumble-client-codecs-browser/lib/decode-worker.js ++++ b/node_modules/mumble-client-codecs-browser/lib/decode-worker.js +@@ -1,10 +1,6 @@ + 'use strict'; + +-Object.defineProperty(exports, "__esModule", { +- value: true +-}); + +-exports.default = function (self) { + var opusDecoder, celt7Decoder; + self.addEventListener('message', function (e) { + var data = e.data; +@@ -55,10 +51,12 @@ exports.default = function (self) { + }, [_decoded.buffer]); + } + }); +-}; ++ + + var _libopus = require('libopus.js'); + + var _libcelt = require('libcelt7.js'); + + var MUMBLE_SAMPLE_RATE = 48000; ++ ++export default null +\ No newline at end of file +diff --git a/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js b/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js +index 6cfda8b..28a9549 100644 +--- a/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js ++++ b/node_modules/mumble-client-codecs-browser/lib/decoder-stream.js +@@ -1,9 +1,5 @@ + 'use strict'; + +-Object.defineProperty(exports, "__esModule", { +- value: true +-}); +- + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + var _stream = require('stream'); +@@ -12,17 +8,11 @@ var _reusePool = require('reuse-pool'); + + var _reusePool2 = _interopRequireDefault(_reusePool); + +-var _webworkify = require('webworkify'); +- +-var _webworkify2 = _interopRequireDefault(_webworkify); +- + var _toArraybuffer = require('to-arraybuffer'); + + var _toArraybuffer2 = _interopRequireDefault(_toArraybuffer); + +-var _decodeWorker = require('./decode-worker'); +- +-var _decodeWorker2 = _interopRequireDefault(_decodeWorker); ++import DecodeWorker from './decode-worker'; + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +@@ -33,7 +23,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + + var pool = (0, _reusePool2.default)(function () { +- return (0, _webworkify2.default)(_decodeWorker2.default); ++ return new DecodeWorker(); + }); + // Prepare first worker + pool.recycle(pool.get()); +@@ -48,11 +38,6 @@ var DecoderStream = function (_Transform) { + + _this._worker = pool.get(); + _this._worker.onmessage = function (msg) { +- if (_this._worker.objectURL) { +- // The object URL can now be revoked as the worker has been loaded +- window.URL.revokeObjectURL(_this._worker.objectURL); +- _this._worker.objectURL = null; +- } + _this._onMessage(msg.data); + }; + return _this; +@@ -112,4 +97,5 @@ var DecoderStream = function (_Transform) { + return DecoderStream; + }(_stream.Transform); + +-exports.default = DecoderStream; +\ No newline at end of file ++//exports.default = DecoderStream; ++export default DecoderStream +\ No newline at end of file +diff --git a/node_modules/mumble-client-codecs-browser/lib/encode-worker.js b/node_modules/mumble-client-codecs-browser/lib/encode-worker.js +index f7187ab..c2ebaa3 100644 +--- a/node_modules/mumble-client-codecs-browser/lib/encode-worker.js ++++ b/node_modules/mumble-client-codecs-browser/lib/encode-worker.js +@@ -1,10 +1,6 @@ + 'use strict'; + +-Object.defineProperty(exports, "__esModule", { +- value: true +-}); + +-exports.default = function (self) { + var opusEncoder, celt7Encoder; + var bitrate; + self.addEventListener('message', function (e) { +@@ -70,7 +66,7 @@ exports.default = function (self) { + }, [_buffer]); + } + }); +-}; ++ + + var _libopus = require('libopus.js'); + +@@ -83,3 +79,5 @@ var _toArraybuffer2 = _interopRequireDefault(_toArraybuffer); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + var MUMBLE_SAMPLE_RATE = 48000; ++ ++export default null +\ No newline at end of file +diff --git a/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js b/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js +index 021f131..eeb9189 100644 +--- a/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js ++++ b/node_modules/mumble-client-codecs-browser/lib/encoder-stream.js +@@ -1,9 +1,5 @@ + 'use strict'; + +-Object.defineProperty(exports, "__esModule", { +- value: true +-}); +- + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + var _stream = require('stream'); +@@ -12,13 +8,7 @@ var _reusePool = require('reuse-pool'); + + var _reusePool2 = _interopRequireDefault(_reusePool); + +-var _webworkify = require('webworkify'); +- +-var _webworkify2 = _interopRequireDefault(_webworkify); +- +-var _encodeWorker = require('./encode-worker'); +- +-var _encodeWorker2 = _interopRequireDefault(_encodeWorker); ++import EncodeWorker from './encode-worker' + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +@@ -29,7 +19,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + + var pool = (0, _reusePool2.default)(function () { +- return (0, _webworkify2.default)(_encodeWorker2.default); ++ return new EncodeWorker(); + }); + // Prepare first worker + pool.recycle(pool.get()); +@@ -46,11 +36,6 @@ var EncoderStream = function (_Transform) { + + _this._worker = pool.get(); + _this._worker.onmessage = function (msg) { +- if (_this._worker.objectURL) { +- // The object URL can now be revoked as the worker has been loaded +- window.URL.revokeObjectURL(_this._worker.objectURL); +- _this._worker.objectURL = null; +- } + _this._onMessage(msg.data); + }; + return _this; +@@ -96,4 +81,5 @@ var EncoderStream = function (_Transform) { + return EncoderStream; + }(_stream.Transform); + +-exports.default = EncoderStream; +\ No newline at end of file ++//exports.default = EncoderStream; ++export default EncoderStream +\ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 44d4087..1e47676 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,8 +1,8 @@ -var theme = 'MetroMumbleLight' - -var path = require('path') +var theme = '../themes/MetroMumbleLight' +var path = require('path'); module.exports = { + mode: 'development', entry: { index: [ './app/index.js', @@ -12,42 +12,46 @@ module.exports = { theme: './app/theme.js', matrix: './app/matrix.js' }, + devtool: "cheap-source-map", output: { - filename: '[name].js', - path: './dist' + path: path.join(__dirname, 'dist'), + filename: '[name].js' }, module: { - postLoaders: [ - { - include: /mumble-streams\/lib\/data.js/, - loader: 'transform-loader?brfs' - } - ], - loaders: [ + rules: [ { test: /\.js$/, exclude: /node_modules/, - loader: 'babel-loader', - query: { - presets: ['es2015'], - plugins: ['transform-runtime'] + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'], + plugins: ['@babel/plugin-transform-runtime'] + } } }, { test: /\.html$/, - loaders: [ - 'file-loader?name=[name].[ext]', - 'extract-loader', - 'html-loader?' + JSON.stringify({ - attrs: ['img:src', 'link:href'], - interpolate: 'require', - root: theme - }) + use: [ + { + loader: 'file-loader', + options: { 'name': '[name].[ext]' } + }, + { + loader: "extract-loader" + }, + { + loader: 'html-loader', + options: { + attrs: ['img:src', 'link:href'], + root: theme + } + } ] }, { test: /\.css$/, - loaders: [ + use: [ 'file-loader', 'extract-loader', 'css-loader' @@ -55,7 +59,7 @@ module.exports = { }, { test: /\.scss$/, - loaders: [ + use: [ 'file-loader?name=[hash].css', 'extract-loader', 'css-loader', @@ -63,45 +67,42 @@ module.exports = { ] }, { + type: 'javascript/auto', test: /manifest\.json$|\.xml$/, - loaders: [ + use: [ 'file-loader', 'extract-loader', - 'regexp-replace-loader?' + JSON.stringify({ - match: { - pattern: "#require\\('([^']*)'\\)", - flags: 'g' - }, - replaceWith: '"+require("$1")+"' - }), + { + loader: 'regexp-replace-loader', + options: { + match: { + pattern: "#require\\('([^']*)'\\)", + flags: 'g' + }, + replaceWith: '"+require("$1")+"' + } + }, 'raw-loader' ] }, { - test: /\.json$/, - exclude: /manifest\.json$/, - loader: 'json-loader' + test: /\.(svg|png|ico)$/, + use: [ + 'file-loader' + ] }, { - test: /\.(svg|png|ico)$/, - loader: 'file-loader' + test: /worker\.js$/, + use: { loader: 'worker-loader' } + }, + { + enforce: 'post', + test: /mumble-streams\/lib\/data.js/, + use: [ + 'transform-loader?brfs' + ] } ] }, - resolve: { - alias: { - webworkify: 'webworkify-webpack' - }, - root: [ - path.resolve('./themes/') - ] - }, - includes: { - pattern: function (filepath) { - return { - re: /#require\((.+)\)/, - index: 1 - } - } - } + target: 'web' }