🚨Issue occuring

---

mediasoup-client 내에 있는 Device 메서드를 사용해 chat에 join 시 Device를 생성 하고 싶음

아래 코드는 방에 join 시 Device를 생성하는 부분

const createDevice = async () => {
  try {
    device = new mediasoupClient.Device();
    console.log('createDevice ~ device:', device);

    await device.load({
      routerRtpCapabilities: rtpCapabilities,
    });

    console.log('Device RTP Capabilities', device.rtpCapabilities);

  } catch (error) {
    console.log(error);
    if (error.name === 'UnsupportedError') console.warn('browser not supported');
  }
};

socket.on('rtpCapabilities', function (rtpCapabilities) {

  console.log('Received RTP Capabilities:', rtpCapabilities);

  createDevice(rtpCapabilities);
});

💦What I tried

---

1. script로 cdn를 이용해 가져오기

->모르겠음
npm 참고

// html
<script src="https://cdn.jsdelivr.net/npm/mediasoup-client@3.7.7/lib/index.min.js">
  import { Device } from 'mediasoup-client';</script>
// 브라우저 콘솔 에러
index.js:28 Uncaught ReferenceError: exports is not defined at index.js:28:23

Object.defineProperty(exports, "__esModule", { value: true });

2. import 로 가져오기

->import는 / 같은 절대 경로로 사용해야 하는 거 같음
mediasoup-client 참고

// js파일 
import * as mediasoupClient from 'mediasoup-client';
// 브라우저 콘솔 에러 메시지
Uncaught TypeError: Failed to resolve module specifier "mediasoup-client". Relative references must start with either "/", "./", or "../".

3. require 로 가져오기

->클라이언트 단에 require가 없어서 그런듯 함

// js 파일
const mediasoupClient = require('mediasoup-client');
// 브라우저 콘솔 에러 메시지
Uncaught ReferenceError: require is not defined

💡How solve issue

---

브라우저에선 require가 없어서 생긴 문제 같아 번들러를 사용해보기로 함

browserify 사용

npm i browserify

browserify chat.js -o bundle.js

html

<script src="/bundle.js"></script>

js

const mediasoupClient = require('mediasoup-client');

📃What I learned new

---

ts와 require문은 같이 쓸 수 있을 거 같지 않음.
문제는 해결했지만 js파일 수정이 있을 때 마다 browserify chat.js -o bundle.js를 입력해주어야 함.
여유가 있을 떄 webpack이나 다른 방법을 모색해봐야겠음