무딘붓의 코딩기록

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.  실시간 화이트보드 공유 서비스를 운영하며 생긴 지연 문제의 해결 과정을 정리한 글입니다.해당 서비스를 처음 구현한 과정은 이전 개발 일지에 정리했습니다. 💭 0. 문제 상황  화이트보드에 쓴 글씨가 많아지면 참여자 페이지에서 느리게 보이는 문제가 발생했습니다. 이러한 문제점이 생기는 원인은 아래와 같이 세 가지를 추정해 봤습니다.강의자 페이지에서 화이트보드 정보를 저장하는 시간이 오래 걸린다.강의자가 보내는 화이트보드 데이터의 용량이 커서 서버를 통한 전송이 오래 걸린다.참여자 클라이언트에서 처리해야 할 데이터..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   실시간 화이트보드 공유 서비스를 구현하기까지의 과정을 정리한 글입니다.Fabric.js로 화이트보드를 구현하는 과정은 이전 게시글에 정리했습니다.💭 1. 강의자 canvas의 내용을 어떻게 참여자에게 전달해서 표시해야 하는가? 실시간으로 강의자의 화이트보드(canvas) 내용을 참여자들에게 전달하는 것을 목표로 프로젝트를 시작했습니다. 강의자의 화이트보드는 Fabric.js 라이브러리를 이용해서 구현을 마쳤고,음성 브로드캐스팅은 WebRTC를 사용한 미디어 서버를 통해 완성한 상황이었습니다. 프로젝트 발표까지..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다.게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다.   웹 페이지에서 마이크를 통해 음성을 입력받고, 볼륨을 시각화 하는 과정을 정리합니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다.https://codepen.io/vchgekmq-the-flexboxer/pen/MWLVJeO?editors=1111🎤 1. 마이크를 통해 사용자의 음성을 입력 받기navigator.mediaDevices .getUserMedia({ audio: true }) // 마이크 권한을 요청 .then((stream) => { ..