HLS를 이용한 라이브 라디오 방송 웹 앱 개발기 (2)

이미 제대로 처리가 된 .ts파일들과 m3u8파일을 간단하게 뿌려주는 서버를 작성한 뒤, 엣지와 크롬 브라우저로 접속했을 때 크롬 브라우저는 재생이 되지 않고 엣지는 재생이 되었다.

여기까지 진행된 소스코드의 스냅샷 링크는 다음과 같다.

https://github.com/Einstrasse/hls-service/tree/20b3434fa3dcf62fa61e5ea31b685d871a3221ad

이때 소스코드를 다시 확인해보니, hls-server 노드 패키지의 정확한 사용법을 몰라서 직접 그 부분을 nodejs http server단에 구현을 했었다.

HLS 관련 토막글에서 대부분 브라우저에서 호환이 된다고 이야기를 들었던 것 같은데, 결국 그런 문서들은 공식 문서가 아니라서 정확도가 떨어질 수 밖에 없다고 생각하고 직접 확인해보도록 해보았다.

http://html5test.com/

위 링크에서 해당 브라우저의 html5를 얼마나 지원하는지에 대한 정보를 확인할 수 있다.

크롬 브라우저로 확인해보니, HTTP Live Streaming/HLS 지원 여부에 No라고 나왔다. 지원한다는 것은 새빨간 거짓말이었던 것이다. 역시 정확한 정보를 얻기 위해서는 공식 문서를 확인하거나 직접 확인하는 것이 빠르고 정확한 것 같다.

반면 엣지 브라우저로 접속을 하니, HLS를 지원하는 것으로 나타났다. 엣지 브라우저에서만 동작을 해서 내가 혹시 서버 설정을 잘못했는가에 대한 의문도 품어보았었지만, 일단은 아닌것으로 확인되었다.

크롬이 HLS 클라이언트를 브라우저 네이티브로 지원하지는 않지만, 아마 자바스크립트로 라이브러리가 있을 것으로 생각해서 hls client로 구글링을 해 보았다.

바로 뭔가 유명해보이는 깃허브 페이지가 나타났다.

https://github.com/video-dev/hls.js/

커밋 수도 많고, Star 달린 수도 많고 실제로 이 hls.js를 사용하는 서비스도 종류도 많고 유명한 곳도 많았다.

클라이언트 사이드에 이 hls.js를 적용하니 크롬에서도 음악 스트리밍 재생이 잘 되었다. 크롬 개발자 도구의 Network 탭을 보니, 이미 받은 ts파일을 다 재생할 때 쯤 새로운 요청을 보내는 식으로 아주 잘 동작하였다.

이 부분까지 진행한 git 커밋 스냅샷이다.

https://github.com/Einstrasse/hls-service/tree/c7861d0594e86273111f02541e0beccf7cf6d0e0

여기까지 진행된 바로는, 서버에 있는 이미 처리된 정적인 ts파일들과 m3u8파일로 스트리밍 재생이 가능하다는 것을 보였다.

이제 여기에 실시간으로 음성을 제공하는 방송자 입장에서 서버에 마이크로 녹음된 음성 정보들을 보내는 동작을 추가해야 한다.

웹 브라우저 마이크 API에 대해 구글을 해 보니 다음과 같은 글을 확인할 수 있었다.

https://www.html5rocks.com/ko/tutorials/getusermedia/intro/

https://developers.google.com/web/fundamentals/media/recording-audio/?hl=ko

두번째 글에서 도움을 많이 얻었다. 하지만 두번째 글에 있는 코드를 그대로 복사해서 적용할 때에는, 글에 나온대로 실행이 되지 않았다.

따라서 MDN에 있는 MediaRecorder API를 찾아보았다.

https://developer.mozilla.org/ko/docs/Web/API/MediaRecorder

확인해보니 MediaRecorder.start() API에서 인자로 timeslice를 넘겨주면, timeslice마다 ondataavailable 이벤트를 호출하게 된다. timeslice를 넣어주지 않으면 명시적으로 MediaRecorder를 stop해주지 않는 이상 ondataavailable 이벤트가 발생하지 않기 때문에 원하는 대로 실행되지 않았던 것이다.

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start

여기까지는 클라이언트에서 마이크 API 를 통해 녹음한 음성을 가지고 있는 부분까지 구현되었다. 아직 서버에 음성 데이터를 보내거나 받거나 하는 부분은 구현이 되지 않았다.

여기까지 구현된 모습이다.

https://github.com/Einstrasse/hls-service/tree/394c7f3d33d687c91367c58f464e6f799292e40d

HLS를 이용한 라이브 라디오 방송 웹 앱 개발기 (3)