Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Mm sys 2013-demo
Mm sys 2013-demo
Loading in …3
×

Check these out next

1 of 129 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

More from Yusuke Goto (20)

Advertisement

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

×