O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
hls.js
dash.js
shaka-player
hls.js
https://github.com/video-dev/hls.js/#they-use-hlsjs-in-production
hls.js
dash.js
https://developers.naver.com/notice/compliance/
hls.js ?
dash.js ?
?
2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
( …) 1s … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
( …) 30s … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
( …) 1m … 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
( …) 1m 50s… 2GB
(4G ) : 133Mbps
https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
300MB( …) ( …)
300MB( …) ( …)
MPEG MPEG-DASH
Apple HTTP Live Streaming
Adobe HTTP Dynamic Streaming
Microsoft Smooth Streaming
MPEG MPEG-DASH
Apple HTTP Live Streaming
Adobe HTTP Dynamic Streaming
Microsoft Smooth Streaming
https://dashif.org/members/
https://dashif.org/members/
HTTP Live Streaming
Apple HTTP
QuickTime, OSX, iOS, Safari
HLS .
RFC8216 .
• : .mp2ts, .mp4
• : .m3u8
https://developer.ap...
2. (.m3u8)
1. H.264 + AAC 10 

(MPEG-2 TS )
3. HLS
•
•
// 10.5
//
Let’s Do It
https://peach.blender.org/download/
$ brew install ffmpeg
$ ffmpeg 
-i BigBuckBunny_320x180.mp4 `# ` 
-map 0 
-f segment 
-vcodec libx264 `# ` 
-acodec libfdk_a...
$ python -m SimpleHTTPServer
HTTP
!
.
.
video.m3u8
video-low.m3u8
video-low.00.ts
video-mid.m3u8
video-mid.00.ts
video-high.m3u8
video-high.00.ts
ts
• 4K/2160p @60fps : 3840x2160p / 20,000~51,000Kbps
• 4k/2160p @30fps : 3840x2160p / 13,000~34,000Kbps
• 1440p @60fps : 256...
https://docs.peer5.com/guides/production-ready-hls-vod/
?
Adaptive Bitrate
MPEG-DASH HTTP Live Streaming
Adaptive Bitrate Streaming or Adaptive Streaming
https://support.jwplayer.com/articles/adaptive-streaming-reference
HTTP
. ISO (ISO/IEC
23001-6) . HLS .
• :
• : MPD(XML)
MPEG-DASH
$ brew install gpac
$ MP4Box -frag 4000 
-dash 4000 
-rap 
-segment-name sample 
-out ./output.mp4 
./encoded.mp4
gpac(MP4...
$ python -m SimpleHTTPServer
HTTP
?
DASH 

https://caniuse.com/#search=mpeg-dash
https://caniuse.com/#search=hls
https://caniuse.com/#search=media%20source%20extensions
https://www.w3.org/TR/media-source/
dash.js his.js
MSE
MPEG-DASH HLS
Native
?
http://www.flashls.org/
https://help.netflix.com/ko/node/23742
1.
• MSE
2.
•
•
const response = (
await fetch('http://localhost:8000/output.mpd')
);
const mpd = (new window.DOMParser())
.parseFromStrin...
let sourceBuffer;
mediaSource.addEventListener('sourceopen', async () => {
const representation = mpd.getElementsByTagName...
let index = 0;
async function appendMediaSegment() {
index = index + 1;
const segmentURL = mpd.getElementsByTagName('Segme...
• TV : RTMP(Real Time Messaging Protocol) + HLS
◦ http://www.digitaltoday.co.kr/news/articleView.html?idxno=109417

• TV, ...
.
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
스트리밍과 플레이어
Próximos SlideShares
Carregando em…5
×

스트리밍과 플레이어

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

  • Seja o primeiro a comentar

스트리밍과 플레이어

  1. 1. hls.js dash.js shaka-player
  2. 2. hls.js https://github.com/video-dev/hls.js/#they-use-hlsjs-in-production
  3. 3. hls.js dash.js https://developers.naver.com/notice/compliance/
  4. 4. hls.js ? dash.js ? ?
  5. 5. 2GB (4G ) : 133Mbps https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
  6. 6. ( …) 1s … 2GB (4G ) : 133Mbps https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
  7. 7. ( …) 30s … 2GB (4G ) : 133Mbps https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
  8. 8. ( …) 1m … 2GB (4G ) : 133Mbps https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
  9. 9. ( …) 1m 50s… 2GB (4G ) : 133Mbps https://www.zdnet.co.kr/view/?no=20171226122223&re=R_20180215081730
  10. 10. 300MB( …) ( …)
  11. 11. 300MB( …) ( …)
  12. 12. MPEG MPEG-DASH Apple HTTP Live Streaming Adobe HTTP Dynamic Streaming Microsoft Smooth Streaming
  13. 13. MPEG MPEG-DASH Apple HTTP Live Streaming Adobe HTTP Dynamic Streaming Microsoft Smooth Streaming
  14. 14. https://dashif.org/members/
  15. 15. https://dashif.org/members/
  16. 16. 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
  17. 17. 2. (.m3u8) 1. H.264 + AAC 10 
 (MPEG-2 TS ) 3. HLS • •
  18. 18. // 10.5 //
  19. 19. Let’s Do It
  20. 20. https://peach.blender.org/download/
  21. 21. $ 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
  22. 22. $ python -m SimpleHTTPServer HTTP
  23. 23. ! .
  24. 24. .
  25. 25. video.m3u8 video-low.m3u8 video-low.00.ts video-mid.m3u8 video-mid.00.ts video-high.m3u8 video-high.00.ts ts
  26. 26. • 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
  27. 27. https://docs.peer5.com/guides/production-ready-hls-vod/
  28. 28. ? Adaptive Bitrate MPEG-DASH HTTP Live Streaming Adaptive Bitrate Streaming or Adaptive Streaming
  29. 29. https://support.jwplayer.com/articles/adaptive-streaming-reference
  30. 30. HTTP . ISO (ISO/IEC 23001-6) . HLS . • : • : MPD(XML) MPEG-DASH
  31. 31. $ brew install gpac $ MP4Box -frag 4000 -dash 4000 -rap -segment-name sample -out ./output.mp4 ./encoded.mp4 gpac(MP4Box)
  32. 32. $ python -m SimpleHTTPServer HTTP ? DASH 

  33. 33. https://caniuse.com/#search=mpeg-dash
  34. 34. https://caniuse.com/#search=hls
  35. 35. https://caniuse.com/#search=media%20source%20extensions https://www.w3.org/TR/media-source/
  36. 36. dash.js his.js MSE MPEG-DASH HLS Native
  37. 37. ?
  38. 38. http://www.flashls.org/
  39. 39. https://help.netflix.com/ko/node/23742
  40. 40. 1. • MSE 2. • •
  41. 41. 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);
  42. 42. 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);
  43. 43. 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()); } }
  44. 44. • 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
  45. 45. .

×