Introduce (adaptive) streaming protocol. See : https://www.youtube.com/watch?v=6t6Si0BWCOo

2. hls.js
dash.js
shaka-player

3. hls.js
https://github.com/video-dev/hls.js/#they-use-hlsjs-in-production

4. hls.js
dash.js
https://developers.naver.com/notice/compliance/

5. hls.js ?
dash.js ?
?

7. 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730

8. ( …) 1s … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730

9. ( …) 30s … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730

10. ( …) 1m … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730

11. ( …) 1m 50s… 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730

13. 300MB( …) ( …)

14. 300MB( …) ( …)

18. MPEG MPEG-DASH
Apple HTTP Live Streaming
Adobe HTTP Dynamic Streaming
Microsoft Smooth Streaming

19. MPEG MPEG-DASH
Apple HTTP Live Streaming
Adobe HTTP Dynamic Streaming
Microsoft Smooth Streaming

20. https://dashif.org/members/

21. https://dashif.org/members/

22. HTTP Live Streaming
Apple HTTP
QuickTime, OSX, iOS, Safari
HLS .
RFC8216 .
• : .mp2ts, .mp4
• : .m3u8
https://developer.apple.com/streaming/
https://tools.ietf.org/html/rfc8216

23. 2. (.m3u8)
1. H.264 + AAC 10
(MPEG-2 TS )
3. HLS
•
•

26. // 10.5
//

27. Let’s Do It

28. https://peach.blender.org/download/

29. $ brew install ffmpeg
$ ffmpeg
-i BigBuckBunny_320x180.mp4 `# `
-map 0
-f segment
-vcodec libx264 `# `
-acodec libfdk_aac `# `
-segment_list video/playlist.m3u8 `# `
-segment_time 5 `# 5 `
video/segment-%03d.ts `# .ts segment-000.ts segment-999.ts `
ffmpeg
https://h2k.co/8s

31. $ python -m SimpleHTTPServer
HTTP

32. !
.

33. .

34. video.m3u8
video-low.m3u8
video-low.00.ts
video-mid.m3u8
video-mid.00.ts
video-high.m3u8
video-high.00.ts
ts

35. • 4K/2160p @60fps : 3840x2160p / 20,000~51,000Kbps
• 4k/2160p @30fps : 3840x2160p / 13,000~34,000Kbps
• 1440p @60fps : 2560x1440 / 9,000~18,000Kbps
• 1440p @30fps : 2560x1440 / 6,000~13,000Kbps
• 1080p @60fps : 1920x1080 / 4,500~9,000Kbps
• 1080p : 1920x1080/ 3,000~6,000Kbps
• 720p @60fps : 1280x720 / 2,250~6,000Kbps
• 720p : 1280x720 / 1,500~4,000Kbps
• 480p : 854x480 / 500~2,000Kbps
• 360p : 640x360 / 400~1,000Kbps
• 240p : 426x240 / 300~700Kbps
https://support.google.com/youtube/answer/2853702?hl=ko

36. https://docs.peer5.com/guides/production-ready-hls-vod/

39. ?
Adaptive Bitrate
MPEG-DASH HTTP Live Streaming
Adaptive Bitrate Streaming or Adaptive Streaming

40. https://support.jwplayer.com/articles/adaptive-streaming-reference

41. HTTP
. ISO (ISO/IEC
23001-6) . HLS .
• :
• : MPD(XML)
MPEG-DASH

42. $ brew install gpac
$ MP4Box -frag 4000
-dash 4000
-rap
-segment-name sample
-out ./output.mp4
./encoded.mp4
gpac(MP4Box)

43. $ python -m SimpleHTTPServer
HTTP
?
DASH

44. https://caniuse.com/#search=mpeg-dash

45. https://caniuse.com/#search=hls

47. https://caniuse.com/#search=media%20source%20extensions
https://www.w3.org/TR/media-source/

48. dash.js his.js
MSE
MPEG-DASH HLS
Native

49. ?

50. http://www.flashls.org/

51. https://help.netflix.com/ko/node/23742

52. 1.
• MSE
2.
•
•

53. const response = (
await fetch('http://localhost:8000/output.mpd')
);
const mpd = (new window.DOMParser())
.parseFromString(await response.text(), 'text/xml');
MPD
const video = document.getElementById('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

54. let sourceBuffer;
mediaSource.addEventListener('sourceopen', async () => {
const representation = mpd.getElementsByTagName('Representation');
const mimeType = representation[0].getAttribute('mimeType');
const codecs = representation[0].getAttribute('codecs');
sourceBuffer = mediaSource.addSourceBuffer(
`${mimeType}; codecs=“${codecs}"`
);
sourceBuffer.addEventListener('updateend', appendMediaSegment,
false);
const initialization = mpd.getElementsByTagName('Initialization');
const url = initialization[0].getAttribute('sourceURL');
const response = await fetch(`http://localhost:8000/${url}`, {
headers: { 'Content-Type': 'arraybuffer' }
});
sourceBuffer.appendBuffer(await response.arrayBuffer());
}, false);

55. let index = 0;
async function appendMediaSegment() {
index = index + 1;
const segmentURL = mpd.getElementsByTagName('SegmentURL')[index];
if (segmentURL) {
await new Promise(r => setTimeout(r, 500));
const url = segmentURL.getAttribute('media');
const response = await fetch(`http://localhost:8000/${url}`, {
headers: { 'Content-Type': 'arraybuffer' }
});
sourceBuffer.appendBuffer(await response.arrayBuffer());
}
}

57. • TV : RTMP(Real Time Messaging Protocol) + HLS
◦ http://www.digitaltoday.co.kr/news/articleView.html?idxno=109417
• TV, V LIVE : HLS, DASH
• : HLS(before RTMP)
◦ https://blog.twitch.tv/live-video-transmuxing-transcoding-ffmpeg-vs-
twitchtranscoder-part-i-489c1c125f28
• : MPEG-DASH
◦ https://bitmovin.com/status-mpeg-dash-today-youtube-netflix-use-
html5-beyond/
• Netflix : MPEG-DASH
◦ https://www.moritzsteiner.de/papers/netflix-hulu.pdf
• : HLS
◦ http://clavius-voyage.blogspot.com/2013/06/mpeg-dash-vs-hls.html
• AbemaTV : HLS + DASH

58. .