リニア放送型動画サービスの web フロントエンド
Post on 15-Apr-2017
5.021 Views
Preview:
TRANSCRIPT
Web
!
👤
https://abema.tv/
Schedule
Live
https://abema.tv/
Schedule
Live
👤
https://abema.tv/
Schedule
Live
👤
HLSMPEG-DASHRTMPMPEG2-TSH.264 AACPlayReadyWidevineFairPlay
Video
ECMAScript 2015 TypeScriptActionScriptCSS4css-modules
Languages
ReactRxJSImmutableJS
Flux Architecture
Atomic DesignInterface InventoryComponent Driven DevelopmentStyleguide InVisionPixate
Design Workflow
DockerKubernetesNGINXNode.js
Infrastructure
2016/10/20 - http://abematv.connpass.com/event/42692/
2016/11/11 - http://abematv.connpass.com/event/42695/
📄💻
📄
💻
📄 📄📄 📄📄 📄📄
📄
💻
📄 📄📄 📄📄 📄📄
📄
💻
📄 📄📄 📄📄 📄📄
= Live Streaming
📄📄📄📄
☁HTTP
💻
XHR XHR XHR
Play Play💻
💻
💻const xhr = new XMLHttpRequest();xhr.open("GET", “1-00.ts", true);…xhr.send(null);
💻const xhr = new XMLHttpRequest();xhr.open("GET", “1-01.ts", true);…xhr.send(null);
HLS
HLS 📄📄📄📄
☁HTTP
💻
📄 📄 ☁HTTP 💻Playlist Segment
📄 📄 ☁HTTP 💻Playlist Segment
m3u8 ts
📄 📄 ☁HTTP 💻Playlist Segment
mpd mp4
💻
const xhr = new XMLHttpRequest();xhr.open( "GET", "playlist.m3u8", true );…xhr.send(null);
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts 💻
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts 💻
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts 💻
const xhr = new XMLHttpRequest();xhr.open( "GET", "playlist.m3u8", true );…xhr.send(null);
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts 💻
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:2#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts#EXTINF:10,segment6.ts
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts 💻
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:2#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts#EXTINF:10,segment6.ts
MSEor
MSE
MSE
MSE
MSE
Flash HTML5
Flash HTML5
Flash HTML5
Flash HTML5
Flash HTML5
MSE
MSE
<video> MediaSource SourceBuffer
<video id="video"></video>
var sourceBuffer;const video = document.getElementById("video");const mediaSource = new MediaSource();const type = 'video/mp4; codecs="avc1.4d401f, mp4a.40.2"';
mediaSource.addEventListener("sourceopen", () => { sourceBuffer = mediaSource.addSourceBuffer(type);}, false);
video.src = URL.createObjectURL(mediaSource);
const xhr = new XMLHttpRequest();xhr.open("GET", "playlist.m3u8", true);…xhr.send(null);
📄
☁HTTP
💻
Playlist
m3u8
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,segment1.ts#EXTINF:10,segment2.ts#EXTINF:10,segment3.ts#EXTINF:10,segment4.ts#EXTINF:10,segment5.ts
📄m3u8 📄☁HTTP 💻Segments
📄📄📄📄📄📄📄
const xhr = new XMLHttpRequest();xhr.open("GET", "segment1.ts", true);xhr.responseType = "arraybuffer"; xhr.onload = e => { sourceBuffer .appendBuffer(e.target.response);};xhr.send(null);
📄ts 📄ts📄ts 📄ts
📄ts 📄ts📄ts 📄ts
📄ts 📄ts📄ts 📄ts
📄ts 📄ts
📄ts 📄ts
1,493 Mbits 15 Mbits
📄ts 📄ts 📄ts 📄ts📄ts 📄ts
http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
https://developer.jwplayer.com/articles/html5-report/
https://developer.jwplayer.com/articles/html5-report/
AAC or MP3 ?
https://www.winxdvd.com/resource/aac-vs-mp3.htm
MPEG-2 TS
📄ts
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
📄ts
📄#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
📄ts
📄#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
📄📄ts
📄#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad1.ts
📄📄📄ts
📄#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,program1-1.ts#EXTINF:10,ad1.ts#EXTINF:10,program1-2.ts#EXTINF:10,program2-1.ts#EXTINF:10,ad2.ts
📄📄📄📄ts
TS Packet TS Packet TS Packet TS PacketTS Packet
Video Packet Audio Packet Video Packet Audio PacketMeta Packet
Video Packet Audio Packet Video Packet Audio PacketMeta Packet
// hls.jshls.player.on( Hls.Events.FRAG_PARSING_METADATA, (event, data) => { console.log(data.samples); // as Uint8Array };);
https://abema.tv/
Schedule
Live
👤
https://abema.tv/
Schedule
Live
👤
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
RTMP
Encoder Media Server
RTMPCM signal
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
Encoder Media Server
function onChangeNCStatus() { const code: String = e.info.code; if (code === "NetConnection.Connect.Success") { nc.call("insertCM"); // CM }}
var nc = new NetConnection();nc.addEventListener( NetStatusEvent.NET_STATUS, onChangeNCStatus );
RTMPCM signal
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
Encoder Media Server
CM
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
CM
RTMP
Encoder Media Server
CM signal
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
CM
RTMP
Encoder Media Server
CM signal
📹
https://abema.tv/
👤
📄 📄📄
☁HTTPRTMP
Encoder Media Server
CM signal
CM start
📄CM
📄
top related