반응형
1. 브라우저 보안 정책상 자동 재생이 불가하나 그래도 해야겠다면 mute로 실행되어야 한다.
2. hls.js로 스트림 서버 접속해서 영상을 받아오면 된다.
2. hls.js로 스트림 서버 접속해서 영상을 받아오면 된다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Streams</title>
</head>
<body>
<video id="live-stream" width="640" height="360" controls autoplay></video>
<script>
var video = document.getElementById('live-stream');
if (Hls.isSupported()) {
var hls = new Hls({
lowLatencyMode: true,
liveSyncDurationCount: 1,
liveMaxLatencyDurationCount: 3,
liveDurationInfinity: true,
highBufferWatchdogPeriod: 1,
nudgeMaxRetry: 5,
nudgeOffset: 0.1,
maxFragLookUpTolerance: 0.1,
startFragPrefetch: true
});
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
hls.startLoad(-1); // 가장 최근 세그먼트부터 로드
video.play();
});
hls.on(Hls.Events.ERROR, function(event, data) {
console.log('HLS error:', data);
if (data.fatal) {
hls.destroy();
setTimeout(() => {
hls.loadSource(videoSrc);
hls.attachMedia(video);
}, 1000);
}
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
video.addEventListener('loadedmetadata', function() {
if (video.duration > 15) {
video.currentTime = video.duration - 1; // 가장 최근 시점으로 이동
}
video.play();
});
}
</script>
</body>
</html>
OBS Studio의 설정, node.js 서버설정, 클라이언트에서도 최근 시점으로 이동시키는 설정 등
3위일체가 되었다면 3초는 아니더라도 5초~8초 사이의 딜레이정도만 존재하는 훌륭한 스트리밍 서비스가 가능하다.
다만 아직 못해본건 서버사양과 대역폭 등에 대한 최대 지원 정도는 테스트 해봐야 함.
경우에 따라선 nginx로 분산처리도 고려 대상임.
* 쿠키 *
만약 youtube의 실시간 채널 라이브 방송을 진행하고 이를 웹브라우저에서 보고 싶다면 아래처럼 iframe을 이용하면 확인할 수 있다.
youtube는 3초 정도의 딜레이가 존재한다.
구글이니까
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Streams</title>
</head>
<body>
<iframe id="live-stream" width="640" height="360" src="https://www.youtube.com/embed/******qSuVkrE?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</body>
</html>
반응형
