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

リニア放送型動画サービスの 
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.