リニア放送型動画サービスの Web フロントエンド

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

📄