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

HLS를 이용한 라이브 라디오 방송 웹 앱 개발기 (2) 를 작성한지 꽤 오랜 시간만에 3편을 작성해본다.

 

나중에 써야지 써야지 하다가 귀찮아서 작성하지 않고 있었는데, 더이상 까먹기 전에 이어서 작성을 해보려고 한다.

 

2편까지에서는 브라우저단에서 마이크 API를 이용해서 음성 파일을 저장하는 것 까지 했었다.

 

이제 이 음성 데이터를 서버로 전송을 시켜야 한다.

 

 

일단 파일형태로 전송을 하는 것을 생각을 했는데, 웹에서 파일 업로드시 많이 사용하는 방식이 POST 메소드로 form으로 데이터를 날리는 방식이다.

 

이때 인코딩 타입은 multipart/form 형식으로 보낸다. 바이너리 값 그대로 HTTP 패킷에 담아서 보내는 방식이다.

 

Nodejs에서 multipart/form-data를 받는 부분을 작성을 하려고 했는데 Nodejs에서 해당 데이터를 받는 것은

 

Express.js 프레임워크에서 Multer라는 미들웨어를 사용하는 방식밖에는 잘 몰랐다.

 

하지만 나는 가볍게 만들어볼 생각에 Express.js 프레임워크는 사용하고 싶지 않았던 탓에, multer말고 multipart/form 을 파싱할 수 있는 nodejs package를 찾아야 했다.

 

 

그래서 가장 간단한 방법 중 하나인, multer의 코드를 까 보았다..!

 

https://github.com/expressjs/multer/blob/master/doc/README-ko.md

expressjs/multer

 

지금 위 링크로 가 보니, 내부적으로 busboy를 사용한다고 대놓고 나와있다. 작년에 프로젝트 작업을 할 때에는 코드를 까서 알아냈었는데...

 

어쨋든 busboy란 녀석을 multer가 내부적으로 사용한다는 것을 알 수 있다.

 

https://github.com/mscdex/busboy

mscdex/busboy

 

busboy 문서를 보면 html form data를 파싱할 수 있다는 것을 알 수 있다.

 

어쨋든 이녀석을 이용해서 서버단을 작성해준다.

 

 

그리고 클라이언트 단에서 multipart/form-data 인코딩 방식으로 된 form data를 서버로 보내는 것도 해 주어야 하는데,

 

요녀석은 XHR(XMLHttpRequest)를 이용해서 간단하게 작성해 보았다.

 

처음에는 이녀석을 jQuery 라이브러리를 통해서 접했는데, Low하게는 브라우저단에 구현된 XHR 객체에서 서버와의 동적 비동기 통신이 가능하다는 것을 나중에 알게 되었다.

 

여기까지 작성해본 코드 스냅샷 링크이다.

 

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