흐름
이전에 Spring boot가 이용된 서버에서 HLS를 ffmpeg 외부 라이브러리를 가져와 변환하는 프로젝트가 있었다.
그런데 스프링 서버에서 담당하기에는 아무래도 애매한 느낌이 있다.
외부 라이브러리를 가져오는 것과, 변환 시간이 걸리기 때문이다.
그래서 Node.js 공부를 겸하여 다른 서버를 하나 더 열어서 HLS 분리 작업을 하는 것을 생각하였다. Node.js는 HLS 관련 패키지가 잘 준비되어있다.
Node.js - HLS
npm install express
npm install fluent-ffmpeg @ffmpeg-installer/ffmpeghls-server 패키지는 필요없다. 확인을 스프링 서버에서 하기 때문이다.
.m3u8, .ts 변환
핵심 로직이다. ffmpeg를 이용하여 .mp4 -> .m3u8, .ts 변환을 하는 과정이다.
const ffmpeg = require('fluent-ffmpeg');
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg');
ffmpeg.setFfmpegPath(ffmpegInstaller.path);
ffmpeg('변환할 파일 상대경로/절대경로.mp4').addOption([
'-profile:v baseline',
'-level 3.0',
'-start_number 0',
'-hls_time 10',
'-hls_list_size 0',
'-f hls'
]).output('변환된 파일 상대경로/절대경로.m3u8').on('end', () => {
console.log('end');
}).run();hls_time : 몇초 단위로 (.ts 파일로)분할할것이냐. 영상이 60초이고 hls_time이 10으로 설정되면 .ts파일이 6개 생성되는 느낌이다.
-f : 포맷이다. hls로 포맷.
참고로 이 옵션들은 자바 스프링에서도 똑같이 적용하면 잘 작동한다(당연한 이야기이긴하다).
해당 .js를 실행하면 위와 같이 변환된 파일이 생성되는 것을 확인할 수 있다.
확인
먼저 이 .m3u8 파일과 .ts 파일이 잘 생성된 건가? 확인하기위해 AWS S3, AWS CloudFront 를 이용했다.
S3와 CloudeFront 생성 및 연결에 대한 과정이 중요한것은 아니므로
생략한다.
S3
CloudFront
확인 방법(수동 확인)
이와 관련해 업로드한 영상을 바로 확인해보는 방법도 있다.
HLS Native Player 에서 크롬 추가 프로그램에 추가한 후에 CloudFront에서 현재 .m3u8파일이 있는 경로로 이동하면
요렇게 실행되는 것을 확인할 수 있다.
확인 방법(스프링 서버)
현재 이 방법은
Chrome에서는 실행이 안된다.CORS정책으로 인한 문제로 나오는데,S3,CloudFront에 관련 정책을 설정해도 영상이 나오지 않는다.내 생각으로는
CloudFront는https이여서http->https때문에 안되는 것인가 하는 생각이 들긴하지만, 아직 확실히 알지 못한다.그래서
Safari에서 시도하였고,Safari에서는 정상작동을 하는 것을 확인하엿다.
Video.html
스프링 서버에서 호출할 .html이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
</head>
<body>
<video id="video" class="video-js" controls="controls" width="400" autoplay="autoplay"></video>
<script th:inline="javascript">
let options = {
playbackRates: [.5, .75, 1, 1.25, 1.5],
controls: true,
preload: "auto",
controlBar: {
playToggle: true,
pictureInPictureToggle: false,
remainingTimeDisplay: true,
progressControl: true,
qualitySelector: true,
},
};
var vplay1 = videojs("video", options);
vplay1.src([
{
src : "CloudFront경로의 파일 위치.m3u8",
type: "application/x-mpegurl"
}
]);
</script>
</body>
</html>Controller
@GetMapping("/showVideo")
public String showVideo() {
return "Video";
}간단하게 html 호출이다.
이 부분은 협업으로 하게 된다면 프론트가 처리하여 더욱 편리하게 관리가 가능하다
Safari에서 잘 실행하는 것을 확인하였다.
