Merge video and audio (with MediaRecorder)

목표

Video tag 영상과 TTS api 결과물을 하나로 합친다. (비디오 파일(.mp4)과 오디오 리턴값(.wav)을 하나로 묶는다.)

결과물을 파일로 저장한다.

 

---

문제1 - 방법 검색

방법 검색에 시간이 상당히 소요되었다. (다른 일도 있었지만, 이틀이나 걸렸다.)

 

먼저 Video tag + Audio tag 형식으로 자료조사를 했는데, 암만 찾아도 방법을 못 찾았다. 방법에 대한 확신이 크지 않았는데도 키워드를 너무 뚜렷하게 잡았었다.

 

해결

이후 영상 + 오디오 형식의 넓은 키워드에서 찾다가 방법을 발견했다.

발견한 방법은 목표로 삼았던 상황과 차이가 있었는데, Video tag 대신 Canvas 요소를 사용하는 방법이었다.

 

또한 캔버스에서 영상을 재생하는 방법도 추가적으로 검색 한 후 테스트를 실행했다.

 

캔버스 영상과 오디오 병합 과정

0. 필요 html 요소: Video A,B, Audio D, Canvas E

1. 영상 준비
  VideoA 영상을 캔버스E로 실행

 

2. 영상과 오디오  병합
  Audio D, Canvas E 사용하는 각 스트림 생성 후 영상 스트림에 오디오 트랙 추가

 

3. 녹화

  MediaRecorder 생성 후 청크 데이터 저장.

 

4. 데이터 저장

  청크에서 Blob을 거쳐 최종적으로 URL 객체가 되면 href 속성에 할당.

 

참고자료: https://stackoverflow.com/questions/39302814/mediastream-capture-canvas-and-audio-simultaneously

 

결론

정보검색할 때 좀더 시야를 넓게 갖자.

 

---

​

문제2 - 테스트 케이스

테스트 케이스에 꼼꼼함이 부족했다.

 

녹화 기능 반복 실행 테스트를 공유기능과 함께 진행했다. 그래서 해당 테스트에서 문제가 발생하지는 않았었다.

하지만 이후 영상 파일을 다운 받을 때 문제가 발생했다. 녹화가 2회 이상 실행되면 다운받은 영상 파일에 문제가 발생했었다. 직접적인 이유는 녹화 종료 시 데이터 초기화 부분에서의 청크 데이터 누락이었다.

 

녹화 기능 반복 실행 테스트 케이스에 다운로드 경우도 포함했으면 바로 알았을 오류인데, 시간이 지나고서야 발견했다는 점이 안타까웠다.

 

해결

코드 수정 시 연관 항목들을 더욱 꼼꼼히 테스트해야겠다.

그리고 프로퍼티명에 '임시'가 붙으면 초기화 부분도 반드시 확인해야겠다.