動画の録画・配信まわりの技術仕様

これは何？

toruca のキャプチャ録画および配信に採用している技術の仕様についてまとめます。

前提となる技術たち

以下のような技術がキーワードとなります。

Webm：MP4 のような、コンテナ形式の1つを指す
- Matroska (マトリョーシカ)：Webm コンテナのベースとなっている仕様のこと
- EBML (Extensible Binary Meta Language)：マトリョーシカの基礎となっている、仕様のこと
Media Source Extensions API：ストリーミング配信を実現するために、フロント側で利用される Web API (JavaScript API) のこと
MPEG-DASH：ストリーミング配信を実現するためのプロトコルの1つを指す

参考サイト

動画ストリーミング技術
- フロントエンドエンジニアのための動画ストリーミング技術基礎 | ygoto3.com
- 音声と動画の配信 - 開発者ガイド | MDN
Webm
Matroska
- Matroska Element Specification
EBML
- node-ebml/node-ebml: EBML parser
MPEG-DASH
その他
- MediaRecorder API で録画した動画の seek に時間がかかる問題 - Qiita
  - MediaRecorder で録画すると、seek 情報が入らないというバグがある
- javascript - Seeking is not working in recorded video with MediaRecorder API - Stack Overflow
  This is a well known bug in Chrome. Basically, the duration of the recorded media isn't added to the headers of the final file.

動画ストリーミングとは

動画データを全てダウンロードしてから再生するのではなく、ダウンロードしたデータで再生できる部分から再生を始め、同時に残りのデータをダウンロードしていく方式を、ストリーミング再生といいます。
フロントエンドエンジニアのための動画ストリーミング技術基礎

有名どころだと、以下の2つの方式がある。

HLS (HTTP Live Streaming)
- HLS を配信するのに必要なファイルは、MPEG-2 TS 形式のファイルに分割したセグメントファイル（.ts）、それらをどの順番で再生するかを記したプレイリスト（.m3u8 ）だけである
- （執筆時点では）Safari 以外のブラウザでサポートされていないので、Media Source API を使用して、JavaScript で追加実装する必要がある
MPEG-DASH
- セグメントファイルは fragmented mp4 (.m4s) または ts 形式、プレイリストは MPD (Media Presentation Description) と呼ばれる XML で記述されたファイルを利用する

MPEG-DASH で利用される mpd ファイルは以下のような形式となっている。

xml

<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.6.1-revrelease  at 2016-09-29T12:57:43.136Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT0H9M56.466S" maxSegmentDuration="PT0H0M4.000S" profiles="urn:mpeg:dash:profile:full:2011">
 <ProgramInformation moreInformationURL="http://gpac.sourceforge.net">
  <Title>./output.mpd generated by GPAC</Title>
 </ProgramInformation>
 <Period duration="PT0H9M56.466S">
  <AdaptationSet segmentAlignment="true" maxWidth="320" maxHeight="180" maxFrameRate="30" par="16:9" lang="und">
   <ContentComponent id="1" contentType="video" />
   <ContentComponent id="2" contentType="audio" />
   <Representation id="1" mimeType="video/mp4" codecs="avc3.640014,mp4a.40.2" width="320" height="180" frameRate="30" sar="1:1" audioSamplingRate="48000" startWithSAP="1" bandwidth="631708">
    <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
    <SegmentList timescale="1000" duration="4000">
     <Initialization sourceURL="outputinit.mp4"/>
     <SegmentURL media="output1.m4s"/>
     <SegmentURL media="output2.m4s"/>
     <SegmentURL media="output3.m4s"/>
     ...略
     <SegmentURL media="output149.m4s"/>
     <SegmentURL media="output150.m4s"/>
    </SegmentList>
   </Representation>
  </AdaptationSet>
 </Period>
</MPD>

Media Source Extensions (MSE)

MSE は W3C によって標準化されている HTTP ダウンロードを利用してストリーミング再生するために作られた JavaScript API です。
MSE で扱うメディアデータは、W3C で定められている仕様に従って、短い時間で区切ったデータ構造にセグメント化されている必要があります。MSE では、セグメントを 2 種類に分けて扱います。
初期化に必要なヘッダ情報である初期化セグメント
短い時間で区切られたメディアデータ本体が含まれるメディアセグメント
MSE は最初に初期化セグメント、その後にメディアセグメントを順番にソース・バッファに渡すと、そのメディアセグメントの順番で再生していきます。
フロントエンドエンジニアのための動画ストリーミング技術基礎

MPEG-DASH

MPEG-DASH はストリーミング配信を実現するためのプロトコルの1つであり、 mpd ファイルを作成して、それをクライアント側に読み込ませることで、逐次的にデータを読み込むことができる。

Webm・Matroska・EBML

Webm は動画と音声の情報を含むコンテナのフォーマットの1つである。mp4 みたいなもの。

Webm は Matroska とよばれる仕様を採用しておりファイル構造が策定されている。

Webm の実体はバイナリファイルであり、エディターで表示すると以下のようになっている。toruca や Loom も同じようなフォーマットになっていることが確認できた。

Chrome 拡張から動画を S3 に保存するにあたって、Webm ファイルをパースして EBMLヘッダを読み取る必要があったため、以下のライブラリを利用している。

node-ebml/node-ebml: EBML parser

動画の録画・配信まわりの技術仕様 ​

これは何？ ​

前提となる技術たち ​

参考サイト ​

動画ストリーミングとは ​

Media Source Extensions (MSE) ​

MPEG-DASH ​

Webm・Matroska・EBML ​