화면 녹화 웹사이트 공유 - onvid.net

홍보라고 생각하면, 맞다. 내가 만든 웹사이트다.

 

WebRTC와 ffmpeg.wasm과 한 2주간 씨름을 하며 만든 서비스다. 사실은 아직도 안정적이라고 할 수는 없다. 간단하게 짧은 영상을 녹화하는데 적합할 것이다.

 

내가 밑바닥부터 전부 만든 사이트기도 한데, 배경이나 로고도 전부 직접 디자인했다. 글래스모피즘이라는게 맘에 들어서 써봤는데 잘 된건지는 모르겠다.

onvid.net

라이브러리는 리액트를 활용했다. 백엔드는 없고, 모든 것이 프론트에서 처리된다. 호스팅은 Netlify에서 제공하는 무료 요금제를 이용했다. 어차피 그 트래픽 다 쓸 정도로 사용자가 많지도 않아서 상관없다.

 

이용 방식은 간단하다. 저기서 본인이 원하는 옵션을 선택해서 Record Now 누르면 녹화된다. 웹캠도 넣어놓긴 했는데, 쓸 사람은 없을 것 같다.

 

장시간 녹화에는 비추한다. 한 5분 내외의 짧은 영상을 녹화하는 데에 적극 추천한다. 기본적으로 화질이 그리 좋은 편이 아니고 나중에는 메모리 문제로 인해 데이터가 날아가는 불상사가 생길 수 있다.

 

기존에도 온라인에서 녹화를 해주는 서비스는 몇 있지만 이 서비스가 그것들과 다른 점이라면 영상 포맷이다. 브라우저에서는 기본적으로 H.264와 AAC를 지원하지 않는다. 브라우저 내장 MediaRecorder API가 webm 컨테이너에 VP8/VP9, Opus 코덱이 기본이라 대중적인 포맷인 mp4 컨테이너에 H.264, AAC를 이용할 수가 없어서 ffmpeg.wasm을 통해 즉시 영상을 인코딩해준다.

 

이걸로 녹화한 영상이 아래 글에 있는 영상이다.

https://pagedown.tistory.com/27

자바스크립트 MERN 스택으로 만든 게시판

 

어떻게 구현했는지 보고 싶다면 아래 레포지토리를 참고하면 된다. 저 프로젝트가 그대로 올라간건 아니고 리액트 없이 일반 JS로 구현한 프로토타입 비스무리한 물건이다.

https://github.com/dlcjsdltlq/onvid.net

GitHub - dlcjsdltlq/onvid.net