Canvas API를 활용한 동영상 재생바 마커 및 텍스트 남기기

- Canvas api란

Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해서 그래픽을 그리기위한 수단을 제공을 합니다.
무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용이 됩니다.

 

- 개발 내용

- 비디오 및 캔버스 생성

- useEffect를 통한 이벤트 핸들링

 

- 상호작용
캔버스 클릭 시 텍스트를 추가하는 로직을 구현
프롬프트 창을 통해 표시할 텍스트를 입력, 해당 텍스트를 캔버스에 그리고 관련 정보를 상태에 저장

- 재생 제어

- 마커와 진행 상태 바
비디오의 특정 시점을 나타내는 마커를 추가, 마커를 클릭할 경우 해당 시점으로 비디오를 이동시키는 기능을 구현

- 개발 결과물

1. 텍스트 입력 기능

 

2. 마커 클릭 이동 기능