Soumettre la recherche
Mettre en ligne
스트리밍과 플레이어
•
3 j'aime
•
1,129 vues
우영 주
Suivre
Introduce (adaptive) streaming protocol. See : https://www.youtube.com/watch?v=6t6Si0BWCOo
Lire moins
Lire la suite
Technologie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 58
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리
우영 주
Puppet Camp Berlin 2014 Closing Keynote: Next steps for doing more awesome th...
Puppet Camp Berlin 2014 Closing Keynote: Next steps for doing more awesome th...
Puppet
Михаил Зеленков: Внедрение ipv6 в Яндекс.Поиске
Михаил Зеленков: Внедрение ipv6 в Яндекс.Поиске
Yandex
Containers for sysadmins
Containers for sysadmins
Carlos de Alfonso Laguna
links java
links java
Amit Ku Rathore
20190516 web security-basic
20190516 web security-basic
MksYi
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot
Michael Ewins
Avtex Lync 2013 Event - Fargo
Avtex Lync 2013 Event - Fargo
Avtex
Recommandé
스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리
우영 주
Puppet Camp Berlin 2014 Closing Keynote: Next steps for doing more awesome th...
Puppet Camp Berlin 2014 Closing Keynote: Next steps for doing more awesome th...
Puppet
Михаил Зеленков: Внедрение ipv6 в Яндекс.Поиске
Михаил Зеленков: Внедрение ipv6 в Яндекс.Поиске
Yandex
Containers for sysadmins
Containers for sysadmins
Carlos de Alfonso Laguna
links java
links java
Amit Ku Rathore
20190516 web security-basic
20190516 web security-basic
MksYi
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot
Michael Ewins
Avtex Lync 2013 Event - Fargo
Avtex Lync 2013 Event - Fargo
Avtex
5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games
Michael Ewins
New text document (2)
New text document (2)
Furqaan Aan
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
NAVER D2
Swift: One Language To Rule Them All
Swift: One Language To Rule Them All
Jonathan Guthrie
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
Barbara Bermes
4 Sessions
4 Sessions
Marian Marinov
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Fwdays
Introduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and Processes
PrestoCentre
Video Transcoding at Scale for ABC iview (NDC Sydney)
Video Transcoding at Scale for ABC iview (NDC Sydney)
Daphne Chong
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Danny Jessee
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Danny Jessee
Web performance optimization
Web performance optimization
Kaliop-slide
Backups
Backups
Svet Ivantchev
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
44CON
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Jim Clausing
Capistrano and SystemD
Capistrano and SystemD
Amoniac OÜ
Capistrano && SystemD
Capistrano && SystemD
Aleksandr Simonov
mmsys2019 live streaming at scale
mmsys2019 live streaming at scale
Jordi Cenzano
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Databricks
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Steve Hoffman
프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음
우영 주
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
우영 주
Contenu connexe
Similaire à 스트리밍과 플레이어
5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games
Michael Ewins
New text document (2)
New text document (2)
Furqaan Aan
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
NAVER D2
Swift: One Language To Rule Them All
Swift: One Language To Rule Them All
Jonathan Guthrie
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
Barbara Bermes
4 Sessions
4 Sessions
Marian Marinov
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Fwdays
Introduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and Processes
PrestoCentre
Video Transcoding at Scale for ABC iview (NDC Sydney)
Video Transcoding at Scale for ABC iview (NDC Sydney)
Daphne Chong
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Danny Jessee
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Danny Jessee
Web performance optimization
Web performance optimization
Kaliop-slide
Backups
Backups
Svet Ivantchev
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
44CON
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Jim Clausing
Capistrano and SystemD
Capistrano and SystemD
Amoniac OÜ
Capistrano && SystemD
Capistrano && SystemD
Aleksandr Simonov
mmsys2019 live streaming at scale
mmsys2019 live streaming at scale
Jordi Cenzano
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Databricks
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Steve Hoffman
Similaire à 스트리밍과 플레이어
(20)
5 Steps to Faster Web Sites and HTML5 Games
5 Steps to Faster Web Sites and HTML5 Games
New text document (2)
New text document (2)
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
Swift: One Language To Rule Them All
Swift: One Language To Rule Them All
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
4 Sessions
4 Sessions
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Alexander Mostovenko "'Devide at impera' with GraphQL and SSR"
Introduction to Transcoding: Tools and Processes
Introduction to Transcoding: Tools and Processes
Video Transcoding at Scale for ABC iview (NDC Sydney)
Video Transcoding at Scale for ABC iview (NDC Sydney)
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Get Started with Apps for SharePoint 2013!
Web performance optimization
Web performance optimization
Backups
Backups
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
44CON 2014 - Stupid PCIe Tricks, Joe Fitzpatrick
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Building an Automated Behavioral Malware Analysis Environment using Free and ...
Capistrano and SystemD
Capistrano and SystemD
Capistrano && SystemD
Capistrano && SystemD
mmsys2019 live streaming at scale
mmsys2019 live streaming at scale
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Monitoring of GPU Usage with Tensorflow Models Using Prometheus
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Enabling Microservice @ Orbitz - GOTO Chicago 2016
Plus de 우영 주
프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음
우영 주
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
우영 주
아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법
우영 주
Introduce Guetzli
Introduce Guetzli
우영 주
스코프와 실행문맥
스코프와 실행문맥
우영 주
좋은 기능을 만드는 방법
좋은 기능을 만드는 방법
우영 주
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법
우영 주
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
우영 주
BEM을 깨우치다.
BEM을 깨우치다.
우영 주
JavaScript Promises
JavaScript Promises
우영 주
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI
우영 주
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
우영 주
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
우영 주
Javascript Test Double Sinon.js
Javascript Test Double Sinon.js
우영 주
LESS와 EMMET
LESS와 EMMET
우영 주
HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.
우영 주
이클립스로 GIT 사용하기
이클립스로 GIT 사용하기
우영 주
Plus de 우영 주
(18)
프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법
Introduce Guetzli
Introduce Guetzli
스코프와 실행문맥
스코프와 실행문맥
좋은 기능을 만드는 방법
좋은 기능을 만드는 방법
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
BEM을 깨우치다.
BEM을 깨우치다.
JavaScript Promises
JavaScript Promises
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
Javascript Test Double Sinon.js
Javascript Test Double Sinon.js
LESS와 EMMET
LESS와 EMMET
HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.
이클립스로 GIT 사용하기
이클립스로 GIT 사용하기
Dernier
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Dernier
(20)
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
스트리밍과 플레이어
1.
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 ? ?
6.
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
12.
13.
300MB( …) (
…)
14.
300MB( …) (
…)
15.
16.
17.
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 • •
24.
25.
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
30.
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/
37.
38.
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
46.
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()); } }
56.
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.
.
Télécharger maintenant