Client-side implementation using Vue.js framework?

[Sjoerd82]

Hi, I'm having some issues with importing/using the client side code in a (Vue) framework. In this case I'm using Vite, but the approach for WebPack will probably be fairly similiar.

Initially I tried to just copy over easyrtc.js, which didnt't work, then decided to just import the whole thing as a dev-dependency (not sure about socket.io-client). And use the technique described by #63.

Importing the packages:

pnpm add socket.io-client
pnpm add -D @types/socket.io-client
pnpm add -D open-easyrtc

vite.config.ts: (I should probably leave out socketio here, since we can import it via the regular way)

  resolve: {
    alias: {
      'open-easyrtc': resolve(dirname(fileURLToPath(import.meta.url)), "node_modules/open-easyrtc/api/easyrtc.js"),
      'socket.io': resolve(dirname(fileURLToPath(import.meta.url)), "node_modules/socket.io-client/dist/socket.io.slim.js"),
    },
  },

Then tried importing easyrtc in various ways, none of these work:

<script setup lang="ts">
    // @ts-ignore
    //import * as easyrtc from 'open-easyrtc'
    //import easyrtc from 'open-easyrtc'
    //import { easyrtc } from 'open-easyrtc'
    //import { sendDataWS } from 'open-easyrtc'
    console.log(easyrtc)
</script>

The return error generally boils down to open-easyrtc not having a default export, or not exporting easyrtc.

It's probably something silly, but I'm really not that well versed into importing things. I suspect that if the import succeeds, I can start using the demo code as a starting point for further use within the framework.

Any tips or pointers would be greatly appreciated by me, and I suspect, others as well.

Related #94 #63, and maybe #32.

[hthetiot]

This works for me using typescript 4+ and webpack 5+

import easyrtc from 'open-easyrtc';

I use following tsconfig.json file:

{
  "compileOnSave": true,
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "target": "es2018",
    "module": "esnext",
    "downlevelIteration": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "types": [
      "@types/node",
      "@types/webrtc",
      "@types/socket.io-client"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strict": true,
    "declaration": true,
    "outDir": "dist",
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

[Sjoerd82]

In closing, I still have no idea how to incorporate this in a Vue client. I really think this thing has potential, but I'm moving away from it for more lightweight solutions with better framework support. Will still keep an eye on this project though ;-)

[hthetiot]

The problem is between the chair and the keyboard, easyrtc is used with many framework without issue in typescript or any other environment. It's JavaScript, people that use modern framework don't event know JavaScript anymore.