WebSocket과 Node.js를 이용한 동시 영상 동기화 데모
Source
Evernote/Technote scraps/Video Sync with WebSocket and Node.md
Summary
2010년 작성된 이 문서는 WebSocket과 Node.js를 사용하여 여러 사용자의 HTML5 비디오 재생을 동기화하는 데모 구현을 다룹니다. 한 사용자가 ‘컨트롤러’가 되어 재생/일시정지/이동 명령을 내리면, WebSocket을 통해 다른 ‘슬레이브’ 클라이언트에게 브로드캐스트되어 동기화됩니다. 서버는 단순 메시지 중계 역할만 하며, 보안 모델은 없습니다. 클라이언트 측 동기화 로직은 매우 단순하여(5초 이상 차이 시 조정) 실제 프로덕션용이 아닌 실험적 데모임을 명시합니다. 또한 당시 HTML5 비디오 API의 스타일링 한계(슬레이브 화면에서 컨트롤러 비활성화 어려움)를 지적합니다.
Key Points
- WebSocket을 통해 실시간 양방향 통신으로 비디오 상태(현재 시간, 일시정지 등)를 브로드캐스트합니다.
- Node.js 서버는 수신된 메시지를 모든 연결된 클라이언트에게 단순 전달하는 중계자 역할만 수행합니다.
- 동기화 로직은 매우 단순하며(5초 이상 지연 시 조정), 보안이나 권한 제어는 없습니다.
- HTML5 비디오 API는 기능적으로 강력하지만, 당시에는 컨트롤 UI의 CSS 스타일링이 제한적이었습니다.
- Chrome과 Safari에서 테스트되었으며, 다중 비디오 동기화는 비디오 ID를 추가하여 확장 가능합니다.