Wrong url path for vison_wasm_internal

[huynguyen-ff]

Hi, I have followed the example but unfortunately it doesn't work because the wrong in url fetch. Can anyone help me to fix this? Thanks a lot. Below are my code and the wrong url fetching.

[lukasIO]

hi!

what build chain (including versions) are you using? Specifically webpack/nextjs/react version would be interesting to know.

[huynguyen-ff]

Hi, here are our dependencies:

{
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build-staging": "VITE_APP_ENV=staging vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "prepare": "husky install"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.1.0",
    "@livekit/components-react": "^1.1.8",
    "@livekit/components-styles": "^1.0.6",
    "@livekit/track-processors": "^0.2.7",
    "@mediapipe/tasks-vision": "^0.10.6",
    "axios": "^1.3.5",
    "classnames": "^2.3.2",
    "date-fns": "^2.30.0",
    "livekit-client": "^1.13.3",
    "lodash": "^4.17.21",
    "prettier": "^2.8.7",
    "react": "^18.2.0",
    "react-audio-player": "^0.17.0",
    "react-chat-elements": "^12.0.10",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.9",
    "react-router-dom": "^6.10.0",
    "react-select": "^5.7.3",
    "react-toastify": "^9.1.2",
    "react-use-websocket": "^4.3.1",
    "zod": "^3.21.4",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.195",
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vite-plugin-eslint": "^1.8.1"
  }
}

[lukasIO]

thanks! that looks fine, what build target to you have for TS ?

[huynguyen-ff]

Here is our tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[huynguyen-ff]

So I guess the answer is ESNext, correct me if I do not understand you correctly 😄.

[huynguyen-ff]

here is my code for integrating livekit, hope it help:

import '@livekit/components-styles';
import {
  LiveKitRoom,
  VideoConference,
  RoomAudioRenderer,
  ControlBar,
  GridLayout,
  ParticipantTile,
  useTracks,
} from '@livekit/components-react';
import { Track, createLocalVideoTrack } from 'livekit-client';
import { useEffect, useState } from 'react';
import { useRoomContext } from '@livekit/components-react';
import { BackgroundBlur } from '@livekit/track-processors';

const serverUrl = 'wss://serverurl';

const VideoCall = () => {
  const [token, setToken] = useState('');
  const [viewRoom, setViewRoom] = useState(false);
  return (
    <div>
      <label htmlFor="token">
        Your token:
        <input id="token" onChange={(e) => setToken(e.target.value)} />
      </label>

      <button className="block border-2" onClick={() => setViewRoom(!viewRoom)}>
        View room
      </button>
      {viewRoom && (
        <LiveKitRoom
          video={true}
          audio={true}
          token={token}
          connectOptions={{ autoSubscribe: false }}
          serverUrl={serverUrl}
          // Use the default LiveKit theme for nice styles.
          data-lk-theme="default"
          style={{ height: '100vh' }}
        >
          {/* Your custom component with basic video conferencing functionality. */}
          <MyVideoConference />
          {/* The RoomAudioRenderer takes care of room-wide audio for you. */}
          <RoomAudioRenderer />
          {/* Controls for the user to start/stop audio, video, and screen 
      share tracks and to leave the room. */}
          <ControlBar />
        </LiveKitRoom>
      )}
    </div>
  );
};

function MyVideoConference() {
  // `useTracks` returns all camera and screen share tracks. If a user
  // joins without a published camera track, a placeholder track is returned.
  const tracks = useTracks(
    [
      { source: Track.Source.Camera, withPlaceholder: true },
      { source: Track.Source.ScreenShare, withPlaceholder: false },
    ],
    { onlySubscribed: false }
  );
  const room = useRoomContext();
  const blur = async () => {
    const track = await createLocalVideoTrack();
    await track?.setProcessor(BackgroundBlur(100));
    room.localParticipant.publishTrack(track);
  };
  useEffect(() => {
    blur();
  }, [room]);
  return (
    <GridLayout
      tracks={tracks}
      style={{ height: 'calc(100vh - var(--lk-control-bar-height))' }}
    >
      {/* The GridLayout accepts zero or one child. The child is used
      as a template to render all passed in tracks. */}
      <ParticipantTile />
    </GridLayout>
  );
}

export default VideoCall;

[lukasIO]

hm, no ESNext should be fine. Does this only happen when using vite dev ? Might be connected to that. You can try

1. vite preview and see if that changes things
2. vite build and serve it with a http server

but it might also be that vite is trying to do some optimisations/misinterprets the URL.

[huynguyen-ff]

Hi, thanks for your support. I have tried both of your above approach and still meet the same error, although I have user serve package and host at port 3000. Below is my network log for that.

[jonkad]

Hi @lukasIO

I've got the same issue with vue3. It seams to be an issue with @mediapipe/tasks-vision. Here is an simple example to demonstrate the JsLoader issue: vue3-livekit-tasks-vision example