Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.




Web








👤
https://abema.tv/
Schedule
Live
https://abema.tv/
Schedule
Live
👤
https://abema.tv/
Schedule
Live
👤
HLS
MPEG-DASH
RTMP

MPEG2-TS
H.264

AAC
PlayReady
Widevine
FairPlay
Video
ECMAScript 2015

TypeScript

ActionScript
CSS4
c...
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
...
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
segment1.ts
#EXTINF:10,
segment2.ts
...
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
segment1.ts
#EXTINF:10,
segment2.ts
...
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
segment1.ts
#EXTINF:10,
segment2.ts
...
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
segment1.ts
#EXTINF:10,
segment2.ts
...




MSE
or






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 Medi...
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
...


📄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...




#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
program1-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
#EX...
📄
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
program1-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
#...
📄
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
program1-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
#...
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.js
hls.player.on(
Hls.Events.FRAG_PARSING_METADATA,
...




https://abema.tv/
Schedule
Live
👤
https://abema.tv/
Schedule
Live
👤






📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
RTMP
Encoder Media Server
RTMP
CM signal
📹
https://abema.tv/
👤
📄📄📄📄
☁HTTP
Encoder Media Server
function onChangeNCStatus() {
const code: String = e....
RTMP
CM 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/
👤
📄 📄📄
☁HTTP
RTMP
Encoder Media Server
CM signal
CM start
📄CM
📄






リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
リニア放送型動画サービスの 
Web フロントエンド
Upcoming SlideShare
Loading in …5
×

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

6,860 views

Published on

How we use web frontend technologies such as Media Source Extensions, HLS, MPEG-DASH, and RTMP to develop AbemaTV.

Published in: Engineering
  • Be the first to comment

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

  1. 1. 
 
 Web
  2. 2. 
 

  3. 3.
  4. 4.
  5. 5. 👤 https://abema.tv/ Schedule Live
  6. 6. https://abema.tv/ Schedule Live 👤
  7. 7. https://abema.tv/ Schedule Live 👤
  8. 8. HLS MPEG-DASH RTMP
 MPEG2-TS H.264
 AAC PlayReady Widevine FairPlay Video ECMAScript 2015
 TypeScript
 ActionScript CSS4 css-modules Languages React
 RxJS ImmutableJS Flux Architecture Atomic Design Interface Inventory
 Component Driven Development Styleguide
 InVision Pixate Design Workflow Docker Kubernetes NGINX Node.js Infrastructure
  9. 9. 2016/10/20 - http://abematv.connpass.com/event/42692/ 2016/11/11 - http://abematv.connpass.com/event/42695/
  10. 10.
  11. 11. 
 
 
 
 

  12. 12. 📄 💻 

  13. 13. 📄 💻 📄 📄📄 📄📄 📄📄
  14. 14. 📄 💻 📄 📄📄 📄📄 📄📄 

  15. 15. 📄 💻 📄 📄📄 📄📄 📄📄 = Live Streaming
  16. 16. 📄📄📄📄 ☁HTTP 💻
  17. 17. 
 XHR XHR XHR Play Play 💻
  18. 18. 
 💻
  19. 19. 💻 const xhr = new XMLHttpRequest(); xhr.open("GET", “1-00.ts", true); …
 xhr.send(null);
  20. 20. 💻 const xhr = new XMLHttpRequest(); xhr.open("GET", “1-01.ts", true); …
 xhr.send(null);
  21. 21. 
 

  22. 22. HLS
  23. 23. HLS 📄📄📄📄 ☁HTTP 💻
  24. 24. 📄 📄 ☁HTTP 💻Playlist Segment
  25. 25. 📄 📄 ☁HTTP 💻Playlist Segment m3u8 ts
  26. 26. 📄 📄 ☁HTTP 💻Playlist Segment mpd mp4
  27. 27. 💻 const xhr =
 new XMLHttpRequest(); xhr.open(
 "GET",
 "playlist.m3u8",
 true
 ); …
 xhr.send(null);
  28. 28. #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 💻
  29. 29. #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 💻
  30. 30. #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);
  31. 31. #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
  32. 32. #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
  33. 33. 
 

  34. 34. MSE or
  35. 35. 
 

  36. 36. 
 MSE
  37. 37. MSE
  38. 38. MSE
  39. 39. MSE
  40. 40. Flash HTML5
  41. 41. Flash HTML5
  42. 42. Flash HTML5
  43. 43. Flash HTML5
  44. 44. Flash HTML5
  45. 45. MSE
  46. 46. MSE
  47. 47. 
 <video> MediaSource SourceBuffer
  48. 48. <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);
  49. 49. const xhr = new XMLHttpRequest(); xhr.open("GET", "playlist.m3u8", true); …
 xhr.send(null); 📄 ☁HTTP 💻 Playlist m3u8
  50. 50. #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);
  51. 51. 
 📄ts 📄ts 📄ts 📄ts
  52. 52. 
 📄ts 📄ts 📄ts 📄ts
  53. 53. 
 📄ts 📄ts 📄ts 📄ts
  54. 54. 📄ts 📄ts
  55. 55.
  56. 56. 📄ts 📄ts 1,493 Mbits 15 Mbits
  57. 57. 
 📄ts 📄ts 📄ts 📄ts📄ts 📄ts
  58. 58. http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
  59. 59. http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
  60. 60. http://blogs.yahoo.co.jp/linear_pcm0153/32280752.html
  61. 61.
  62. 62. https://developer.jwplayer.com/articles/html5-report/
  63. 63. https://developer.jwplayer.com/articles/html5-report/
  64. 64. AAC or MP3 ? https://www.winxdvd.com/resource/aac-vs-mp3.htm 

  65. 65. 
 
 MPEG-2 TS 📄ts
  66. 66. 
 
 #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
  67. 67. 
 
 #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
  68. 68. #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
  69. 69. 📄 #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
  70. 70. 📄 #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
  71. 71. 📄 #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
  72. 72. 📄 #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
  73. 73. TS Packet TS Packet TS Packet TS PacketTS Packet
  74. 74. Video Packet Audio Packet Video Packet Audio PacketMeta Packet
  75. 75. Video Packet Audio Packet Video Packet Audio PacketMeta Packet // hls.js hls.player.on( Hls.Events.FRAG_PARSING_METADATA, (event, data) => { console.log(data.samples); // as Uint8Array }; ); 

  76. 76. 
 

  77. 77. https://abema.tv/ Schedule Live 👤
  78. 78. https://abema.tv/ Schedule Live 👤
  79. 79.
  80. 80. 
 

  81. 81. 📹 https://abema.tv/ 👤 📄📄📄📄 ☁HTTP RTMP Encoder Media Server
  82. 82. RTMP CM 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
 );
  83. 83. RTMP CM signal 📹 https://abema.tv/ 👤 📄📄📄📄 ☁HTTP Encoder Media Server CM
  84. 84. 📹 https://abema.tv/ 👤 📄📄📄📄 ☁HTTP CM RTMP Encoder Media Server CM signal
  85. 85. 📹 https://abema.tv/ 👤 📄📄📄📄 ☁HTTP CM RTMP Encoder Media Server CM signal
  86. 86. 📹 https://abema.tv/ 👤 📄 📄📄 ☁HTTP RTMP Encoder Media Server CM signal CM start 📄CM 📄
  87. 87. 
 

  88. 88.

×