Recording Video Download개발/Front-end2024. 11. 21. 15:40
Table of Contents
1. Stop Button
- 기다리지 않고 버튼 누르면 녹화가 중단되게 살짝 변경
- 정지버튼을 누르고 콘솔을 보면 영상을 얻게 됨
- createObjectURL은 브라우저 메모리에서만 가능한 url을 만들고 앞에 있는 URL은 파일을 가리킴
- 해당 url로 가보면 우리 서버상에 없는데, 이 url은 브라우저에 의해 만들어졌고 접근할 수 있는 파일을 가리킴
- 즉 파일은 메모리에 있음
- 파일을 가지고 뭔가를 하고 싶다면 파일을 url에 집어넣어서 접근할 수 있도록 해야함
- 테스트 해보기 위해 미리보기 부분을 제거하고 녹화한 영상으로 대체 해보겠음
- 그러기 위해선 기존에 만들었떤 srcObject 제거
- 지금은 윈도우를 사용하는 피시로 하다보니 영상을 확인할 순 없지만 해당 url로 가보면 녹음된 목소리가 잘 출력됨
2. Download File
- 정지버튼을 누르고 우클릭해서 받을 수 있지만 사용자가 직접하지 않도록 만들어 볼거임
- 가짜 링크를 걸어 유저가 클릭하는 것처럼 만들거임
- 그렇게 하기 위해선 영상 파일을 공유해야 함
- handleStart에 있는 videoFile이 handleDownload에서도 가능해야 함
- 녹화를 중지하고 다운 버튼을 누르면 바로 받아짐
- https://github.com/Daniel-Jeon/wetube-loaded/commit/e3cd31ef96222eddf57c6e96d77823fa73078e33
'개발 > Front-end' 카테고리의 다른 글
React (1) (0) | 2024.12.04 |
---|---|
Transcode Video (0) | 2024.11.22 |
Video Recorder (0) | 2024.11.20 |
Event Timeout (0) | 2024.11.18 |
Timeline Fullscreen (0) | 2024.11.18 |