React(리액트)에서 janus 모듈 사용하기 (WebRTC)

WebRTC로 화상회의 서비스를 구현해보기 위해 미디어 서버로 janus-gateway를 택하게 되었습니다.

리액트 프로젝트에서 이를 적용해보기 위해 진행한 과정입니다.

​

먼저 create-react-app으로 리액트 프로젝트를 만들어줬습니다.

$ npx create-react-app my-app
$ cd my-app

프로젝트 폴더로 이동합니다.

 

 

{
  "dependencies": {
    "janus-gateway": "git://github.com/meetecho/janus-gateway.git"
  }
}

packages.json에 위와 같은 dependency를 추가해서 설치해줍니다.

 

$ npm install webrtc-adapter

webrtc-adapter도 설치해줍니다.

​

​

처음에는 config파일들이 보이지 않습니다.

웹팩 파일을 수정하기 위해서 다음 명령어를 실행합니다.

$ npm run eject

config 디렉토리가 생성되고, webpack.config.js로 이동합니다.

만약 npm run eject가 untracked~~ 뜨면서 수행이되지 않는다면 git add . 해주시거나 .git을 삭제해주시면 됩니다.

 

 

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({ adapter: ['webrtc-adapter', 'default'] }),
    ...
  ]
}

plugins를 찾아서 다음 코드를 넣어줍니다.

 

 

$ npm install exports-loader --save-dev

exports-loader를 설치해줍니다.

2.0.0 버전에서 위와 같은 에러가 계속 떴었는데, 호환이 안되나봅니다..

저는 1.1.1 버전으로 다시 설치해줬습니다.

 

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('janus-gateway'),
        loader: 'exports-loader',
         options: {
           exports: 'Janus',
         },
      },
      ...
    ]
  }
}

 

webpack.config.js에서 rules를 찾아서 위 코드를 넣어줍니다.

 

import {Janus} from 'janus-gateway';

function App() {
  console.log(Janus);
  return (
    <div>
         테스트
    </div>
  );
}

export default App;

잘 불러와지는지 import해서 콘솔에 찍어봤습니다.

​

잘 불러와졌습니다.

​

 

* 2021년 2월 기준으로 작성된 내용이므로, 읽고 있는 시기에는 다르게 동작할 수 있습니다.