リニア放送型動画サービスの Web フロントエンド
•
13 likes•9,604 views
How we use web frontend technologies such as Media Source Extensions, HLS, MPEG-DASH, and RTMP to develop AbemaTV.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to リニア放送型動画サービスの Web フロントエンド
Similar to リニア放送型動画サービスの Web フロントエンド (20)
More from Yusuke Goto
More from Yusuke Goto (20)
Recently uploaded
Recently uploaded (20)
リニア放送型動画サービスの Web フロントエンド
- 1. Web
- 27. 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
- 28. 2016/10/20 - http://abematv.connpass.com/event/42692/ 2016/11/11 - http://abematv.connpass.com/event/42695/
- 34. 📄 💻
- 35. 📄 💻 📄 📄📄 📄📄 📄📄
- 36. 📄 💻 📄 📄📄 📄📄 📄📄
- 37. 📄 💻 📄 📄📄 📄📄 📄📄 = Live Streaming
- 38. 📄📄📄📄 ☁HTTP 💻
- 39. XHR XHR XHR Play Play 💻
- 40. 💻
- 41. 💻 const xhr = new XMLHttpRequest(); xhr.open("GET", “1-00.ts", true); … xhr.send(null);
- 42. 💻 const xhr = new XMLHttpRequest(); xhr.open("GET", “1-01.ts", true); … xhr.send(null);
- 44. HLS
- 45. HLS 📄📄📄📄 ☁HTTP 💻
- 46. 📄 📄 ☁HTTP 💻Playlist Segment
- 47. 📄 📄 ☁HTTP 💻Playlist Segment m3u8 ts
- 50. 📄 📄 ☁HTTP 💻Playlist Segment mpd mp4
- 53. 💻 const xhr = new XMLHttpRequest(); xhr.open( "GET", "playlist.m3u8", true ); … xhr.send(null);
- 56. #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);
- 61. MSE or
- 63. MSE
- 64. MSE
- 65. MSE
- 66. MSE
- 67. Flash HTML5
- 68. Flash HTML5
- 69. Flash HTML5
- 70. Flash HTML5
- 71. Flash HTML5
- 72. MSE
- 73. MSE
- 77. <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);
- 78. const xhr = new XMLHttpRequest(); xhr.open("GET", "playlist.m3u8", true); … xhr.send(null); 📄 ☁HTTP 💻 Playlist m3u8
- 79. #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);
- 80. 📄ts 📄ts 📄ts 📄ts
- 81. 📄ts 📄ts 📄ts 📄ts
- 82. 📄ts 📄ts 📄ts 📄ts
- 83. 📄ts 📄ts
- 86. 📄ts 📄ts 1,493 Mbits 15 Mbits
- 95. AAC or MP3 ? https://www.winxdvd.com/resource/aac-vs-mp3.htm
- 97. MPEG-2 TS 📄ts
- 108. TS Packet TS Packet TS Packet TS PacketTS Packet
- 109. Video Packet Audio Packet Video Packet Audio PacketMeta Packet
- 110. 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 }; );
- 121. 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 );
- 125. 📹 https://abema.tv/ 👤 📄 📄📄 ☁HTTP RTMP Encoder Media Server CM signal CM start 📄CM 📄