abalabahaha / opusscript

JS bindings for libopus 1.4, ported with Emscripten
MIT License
62 stars 18 forks source link

Module throws errors in browser #10

Closed AniketBhadane closed 4 years ago

AniketBhadane commented 4 years ago

I want to use opusscript in my Angular application.

I'm getting the following errors when I start the application

ERROR in ./node_modules/opusscript/build/opusscript_native_wasm.js
Module not found: Error: Can't resolve 'fs' in 'D:\DriveCode\UserPortal\node_modules\opusscript\build'
ERROR in ./node_modules/opusscript/build/opusscript_native_nasm.js
Module not found: Error: Can't resolve 'fs' in 'D:\DriveCode\UserPortal\node_modules\opusscript\build'
ERROR in ./node_modules/opusscript/build/opusscript_native_wasm.js
Module not found: Error: Can't resolve 'path' in 'D:\DriveCode\UserPortal\node_modules\opusscript\build'
ERROR in ./node_modules/opusscript/build/opusscript_native_nasm.js
Module not found: Error: Can't resolve 'path' in 'D:\DriveCode\UserPortal\node_modules\opusscript\build'

I had previously executed following commands:

    npm i opusscript
    npm i @types/node

In my component ts, I import as:

import OpusScript = require('opusscript');

My tsconfig.json is:

    {
      "compileOnSave": false,
      "preserveWhitespaces": false,
      "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "downlevelIteration": true,
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2017",
          "dom"
        ]
      }
    }

My tsconfig.app.json is:

    {
      "extends": "../tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "module": "commonjs",
        "types": ["node"]
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

The index.d.ts in opusscript library has:

    class OpusScript {
       ...
    }
    export = OpusScript;

What am I missing out here?

abalabahaha commented 4 years ago

Haven't touched Angular in a while, but try adding those as empty node modules to your webpack config:

node: {
  fs: 'empty',
  path: 'empty'
}
AniketBhadane commented 4 years ago

I don't have a webpack config file. Is there an alternate way?

abalabahaha commented 4 years ago

Can you install 8f8ffd1 (npm i abalabahaha/opusscript#8f8ffd1) and see if that makes a difference in building?

AniketBhadane commented 4 years ago

The build was successful, but during execution I'm getting error:

Error: abort(sync fetching of the wasm failed: you can preload it to Module['wasmBinary'] manually, or emcc.py will do that for you when generating HTML (but not JS)). Build with -s ASSERTIONS=1 for more info.

My code is:

      let encoder = new OpusScript(8000, 1, OpusScript.Application.AUDIO);
      let opusData = new Buffer(this.myOggContents);
      let decodedPacket = encoder.decode(opusData);
      let blob = new Blob([decodedPacket]);
      let bUrl = window.URL.createObjectURL(blob);
abalabahaha commented 4 years ago

Try disabling WASM import: new OpusScript(8000, 1, OpusScript.Application.AUDIO, { wasm: false });

AniketBhadane commented 4 years ago

Expected 1-3 arguments, but got 4.

abalabahaha commented 4 years ago

Right, Typescript... Added typings, npm i abalabahaha/opusscript#9a06f76

AniketBhadane commented 4 years ago

Now getting

RangeError: Source is too large

in this line in index.js:

    this.inOpus.set(buffer);

Also, previously I had got error that - ReferenceError: Buffer is not defined So I had added following to polyfills.ts:

(window as any).global = window;
// @ts-ignore
window.Buffer = window.Buffer || require('buffer').Buffer;
abalabahaha commented 4 years ago

For the RangeError, .decode() takes in exactly 1 opus packet, make sure myOggContents/opusData meets that requirement.

As for the Buffer and other polyfills, this module was primarily intended for Node.js operation, so some things probably need polyfill/hacks to work in the browser. Curious as to what you are using this library for, under what browser environments? I may consider adding proper browser support if there is enough use cases for that.

abalabahaha commented 4 years ago

Closing due to inactivity, please reopen if you still have issues.

sheryy commented 1 year ago

I am trying to write a Mumble Web Client for the product I am working on and Mumble uses Opus Codecs. There are other browser compatible libraries out there like "libopus.js" etc but the speed of your library is multi-fold faster than those libs. Can you provide any web version of your library?

I can run your library in browser by turning off wasm i.e. { wasm: false }, but that kills the speed.