프로젝트 구조
총 3가지의 주체가 있고
영상 스트리밍을 위한 웹 어플리케이션과
영상 저장시 인코딩작업에서 많은 리소스를 차지하기 때문에
인코딩을 비동기로 처리하기 위한 인코딩 서버
그리고 영상 저장과 응답을 위한 스토리지를 만들어 서비스를 할 것이다.
일단 웹애플리케이션은 프로젝트 마다 다를 것이고,
인코딩과 S3 사용은 비슷한 로직으로 흘러갈 것이기 때문에
인코딩 서버 구축과 S3 스토리지 구축에 대해서 알아가 보겠다.
ffmpeg 시스템 설치
HLS 그리고 DASH 프로토콜 모두 인코딩 툴인 ffmpeg 툴이 필요하다.
초콜레티로 설치 한다. 이게 인코딩 서버에 설치가 되어야 한다.
접속
7.0.1버전이 현재 최신이다. (24년06월)
CMD를 관리자 모드로 열고 설치한다.
이렇게 설치하고 ffmpeg --version을 찍어보자.
이렇게 나오면 정상이고, 명령어가 --version 이 없고 -version으로만 있는 것 같다.
환경변수가 등록이 안되어있다면 시스템 환경변수 설정도 하자. (이건 알아서)
그리고 암호화를 위해서는 Shaka Packager도 설치가 되어야 되는데, 헷갈릴 수 있으므로 여기서는 제외하겠다.
인코딩 서버 의존성 추가
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-mustache'
implementation 'org.springframework.boot:spring-boot-starter-web'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'
// 나중 배포를 위해서 필요
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation 'org.springframework.restdocs:spring-restdocs-mockmvc'
testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
// s3를 위한 의존성
implementation 'software.amazon.awssdk:s3:2.17.96'
// 프로젝트 환경변수 셋업 툴
implementation 'io.github.cdimascio:java-dotenv:5.2.2'
}
Java
복사
이 특이한건 따로 없고, s3의존성과 환경변수 의존성이 있다고만 인지하고 넘어가자
인코딩 서버 yml 설정
server:
servlet:
encoding:
charset: utf-8
force: true
# url rewrite ?? ??
session:
tracking-modes: cookie
// 포트 번호는 마음대로 해도 되지만, 7000번으로 설정해서 사용하자
port: 7000
spring:
// .env를 여기서 import하면 여기 변수를 @Value로 끌어다 쓸 수 있다.
# .env import
config:
import: optional:file:.env[.properties]
datasource:
driver-class-name: org.h2.Driver
url: jdbc:h2:mem:test;MODE=MySQL
username: sa
password:
h2:
console:
enabled: true
sql:
init:
mode: always
data-locations:
- classpath:db/data.sql
jpa:
hibernate:
ddl-auto: create
show-sql: true
properties:
hibernate:
format_sql: true
default_batch_fetch_size: 10
defer-datasource-initialization: true
open-in-view: true
servlet:
multipart:
// 앱 서버에서 넘올때 허용할 파일 용량 설정
max-file-size: 2000MB
max-request-size: 2000MB
JavaScript
복사
프론트 영상 전송 & 서버 엔드포인트 생성
웹 어플리케이션에서 요청을 받을 인코딩 서버의 엔드포인트가 필요하다.
어플리케이션에서는 해당 요청을 비동기로 처리해야지 서버가 뻗지 않는다.
프론트에서 비동기적으로 영상 업로드 요청 (자바스크립트)
function uploadFile(file, uploadBtn) {
var formData = new FormData();
formData.append('file', file);
// 인코딩 서버의 엔드포인트에 Post요청을 한다.
fetch('http://localhost:7000/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.text();
})
.then(data => {
// 영상 업로드가 완료되면 alert창을 띄운다.
alert('영상 업로드가 완료되었습니다.');
console.log(data);
uploadBtn.textContent = '업로드 완료';
uploadBtn.classList.remove('shimmering');
uploadBtn.classList.add('upload-complete');
})
.catch(error => {
alert('File upload failed');
console.error('There was a problem with the fetch operation:', error);
});
}
Java
복사
일단 프론트(웹 어플리케이션) 쪽에서
이렇게 자바스크립트로 비동기로 업로드 요청을 한다.
http://localhost:7000/upload
(인코딩 서버는 7000번 포트를 열어 사용했다. yml설정으로 가능)
일단 간단한 text파일을 날려서 인코딩 서버에서 받아지는 지 테스트 해보자.
아주 작은 mp4파일도 좋다.