1. P. 1P. 1
HTML5 Conference 2018
組み込みブラウザとメディアの仕様あれこれ

2. P. 2P. 2
自己紹介
名前：梅田雅士
所属：株式会社 ACCESS IoT事業本部 ブラウザ開発チーム の 課長
NetFront Browserの開発
React.js, Vue.jsを使ったウェブサービスの開発
NetFront NX/BEチームのマネージャー
お客様へのブラウザの提案等

3. P. 3P. 3
ACCESSって？
高度BSやTVのブラウザ、Nintendo Switch™にブ
ラウザエンジンを提供

4. P. 4P. 4
ACCESSって？
電子書籍において出版社
様向けに電子コミックスト
ア向けトータルソリュー
ションを適用

5. P. 5P. 5
ElixirのWebAppフレー
ムワーク(OSSで公開)
Beacon, Iotサービス

6. P. 6P. 6
組込ブラウザ

7. P. 7P. 7
組込ブラウザとは？
PC/スマホブラウザ
- オープンインターネットの閲覧
- Web サービスの利用
組込ブラウザ
- デバイス とその 市場に特化した機能
- TV 向けサービス、車向けサービス
- linux から ITRON まで色々な環境
車TV ゲーム

8. P. 8P. 8
組み込みブラウザが求められる理由
• 特定の専用機器でもウェブサービスと連携させたい
• 表示のための国際標準仕様がある
• コンテンツ開発者が多い

9. P. 9P. 9
組込ブラウザをやっている主な企業
自社開発でWebKit or Chromiumを利用している企業もある
ACCESS 日本 車載、TV、
ゲーム
Chromium,
WebKit, 独自
Obigo 韓国 車載 Chromium
Espial カナダ TV WebKit
Vewd ノルウェイ
（旧Opera）
TV Chromium

10. P. 10P. 10
組み込みブラウザのここが大変
• 省ROM/省RAMが求められる
– Chromeはデフォルトで下記は必要となるのでカスタマイ
ズが必要
• ROM: 200M~
• RAM: 180M~(コンテンツに依存ではあるが)
• PC/スマホと比べるとチープな環境での動作
– メディア再生ではHWとのつなぎ込みが不可欠

11. P. 11P. 11
テレビ の ブラウザ

12. P. 12P. 12
テレビ の ブラウザ dデータボタン から ブラウザを起動
TVの映像
天気予報の情報とか
TVの内容を補足
する情報とか
映像以外の部分をブラウザで表示

13. P. 13P. 13
メニューから呼び出すアプリもHTMLアプリで実現

14. P. 14P. 14
番組表 を HTML アプリで実現

15. P. 15P. 15
• リモコンでの快適な操作を目指しての十字キーでのフォーカスハンドラ
– 一般サイトだとマウスやタッチ前提
• テレビ向け仕様への対応
– JLab拡張 API（日本）
– hbbTV拡張 API（欧州）
• 大画面向け対応とメモリや速度のパフォーマンスチューニング
– 数Kb単位で節約する要望も受ける
• TTML(Timed Text Style Guide)を利用した字幕対応
– Netflixでも採用されている字幕の仕様
– W3Cで規定されている
TV向けブラウザの開発

16. P. 16P. 16
テレビ とWebサービス（国内）

17. P. 17P. 17
高度BS（高度広帯域衛星デジタル放送）
放送衛星を用いて4K/8Kの超高精細度映像を放送する国内の放送サービス
映像・伝送技術の向上により、
• 映像の高精細化
• フレームスピードの向上 (Max 120fps)
• 多階調表現 (RGB 8bit → 10bit)
• 表現可能色域の拡大・HDR (より人間の視覚に近い色表現が可能)
が実現
また高度BS放送に合わせてインターネットとの連携が本格化する
2016/08/01 試験放送 2018/12/01 本放送開始

18. P. 18P. 18
高度BSでのブラウザユースケース
高度BS放送ではインターネット動画サービスやIPTVコンテンツの配信を実施
ブラウザはこれらのコンテンツのUIを提供する他、
ストリーミングコンテンツの再生に必要となる機能をサポート
ナビゲーション
画
像
画
像
<div id=”navi”>....</div>
<img src=”...” />
放送時のコンテンツ表示
<object id=“broadcast
type=“video/x-arib2-broadcast”/>

19. P. 19P. 19
テレビ とWebサービス（海外）

20. P. 20P. 20
HbbTV
(Hybrid Broadcast Broadband Television)
ハイビジョンTVと広帯域通信を一体化した海外の放送規格
様々なサービス（VOD、広告、インターネット投票等）に対応
最新の仕様はHbbTV 2.02
放送
事業者
放送コンテンツ
リニアコンテンツ ノンリニアコンテンツ
放送コンテンツ
放送波
サーバー
Internet
双方向通信信号
ブロードバンド

21. P. 21P. 21
HbbTVの導入状況
ヨーロッパを中心に35ヶ国で導入
およそ300のHbbTV対応アプリケーション
およそ4400万台のHbbTV対応受信機(TVやセットトップボックス)
引用: https://www.hbbtv.org/deployments/

22. P. 22P. 22
HbbTVでのブラウザユースケース
App内のコンテンツや
インターフェイスの表示
インターネットブラウジング
コンテンツ
サーバ
コンテンツ伝送プラットフォーム
Data

23. P. 23P. 23
テレビ放送で利用されるWeb技術

24. P. 24P. 24
メディアストリーミング
現在音楽や映画、ドラマ等のメディアストリーミング市場が拡大
（Netfilx, Hulu, Prime Video, dTV等）
Web上のメディアストリーミングは必要不可欠な技術
現在はTVでもVOD等のサービスでストリーミングが行われている
コンテンツの再生には次の2つが必要
• 分割されたメディアファイル（セグメント）と制御ファイル（マニフェスト）への対応
• DRMで暗号化されたメディアファイルの復号

25. P. 25P. 25
EMEとMSEの活用
MSE
セグメントから
ストリーム生成
EME
暗号化された
メディアの復号
Data Stream
Encrypted Segment
init.m4s
1.m4s
2.m4s
3.m4s
Playlist
DRMを用いるストリーミングにおいては必要不可欠なExtension

26. P. 26P. 26
MPEG-DASH
DASHはDynamic Adaptive Streaming over HTTPの略
HTTPを使ってビデオストリーミングを行う技術。YouTubeでも使われている。
類似の技術（AppleのHTTP Live Streaming）とかは独自規格なので標準規格として策定さ
れた
特徴: ユーザーの視聴環境に応じて自動的に最適な帯域の動画データにスムーズに切り替
えることができる。見ている最中に解像度が下がったりするアレ。
仕様策定元のDash Industry Forumでdash.jsが公開されている

27. P. 27P. 27
DRM (Digital Rights Management)
暗号化によってコンテンツの再生や複製を制限し保護する仕組み
Web関係では主に映画や音楽のストリーミングで用いられる
主にWebコンテンツで用いられるDRMシステムは以下
• Microsoft PlayReady
– Microsoft製のDRMシステム
• Google WideVine
– ChromeやFirefox、Playstation等の多数デバイスで使用
– NetflixやHulu、amazon Prime Video等で利用
• Apple Fairplay

28. P. 28P. 28
EME (Encrypted Media Extensions)
暗号化された音声・映像の再生に用いるCDMへアクセスするAPIを提供
ファイル再生の為の複雑な実装やプラグインの導入が不要
CDMやKey System等の外部コンポーネントを利用して実装
EMEはCDMはDRMによって中身が違うが全部同じように扱うことができる
CDM (Content Decryption Module):
暗号化されたメディアを再生可能するモジュール

29. P. 29P. 29
https://www.w3.org/TR/encrypted-media/#introduction
ポイント
1. Keyのリクエスト
2. 復号化

30. P. 30P. 30
EMEの働き
CDM A CDM B CDM C
DRM A
Encrypted
Media
DRM CDRM B
Encrypted
Media
復号不可
DRMに対応したCDMでなければ
暗号化された動画を復号できない
CDM A CDM B CDM C
DRM A DRM C
EME EME EME
DRM B
Encrypted
Media
Encrypted
Media
EMEが対応しているDRMなら
EMEに対応するCDMで復号可能

31. P. 31P. 31
MSE (Media Source Extension)
HLSやMPEG-DASH等のストリーミングメディア再生に利用するJavascript API
音声・映像セグメントとプレイリストから再生可能なストリームを生成
Segment
init.m4s
1.m4s
2.m4s
3.m4s
Playlist
Media Source
Extension
Data Stream
Player

32. P. 32P. 32
EMEの論争
以前のHTML5とウェブ上の暗号化された映像
=> PluginでDRM対応を行われてきた
EMEは特定のCDM実装を一切強制しないので、仕様自体はオープンソースおよびフ
リーソフトウェアプロジェクトで実装できる
オープンソースの実装が多いブラウザで、著作権を保護するDRM技術をサポートする
事が是か非か論争となった
現在インターネットトラフィックの過半数が映像視聴が占めておりブラウザが保護された
コンテンツの配信をサポートすることは重要

33. P. 33P. 33
TTMLとWebVTT
字幕にはW3Cで定義された２つの仕様がある
TTML
WebVTT

34. P. 34P. 34
TTML (Timed Text Mark-up Language)
テキストの表示タイミングと表示位置を指定できるマークアップ言語
コンテンツの字幕表示に活用
XML形式で記述
2010年10月にVersion1.0が勧告
2018年11月現在 TTMLv1(3rd Edition)とTTMLv2が勧告
現在Netflixで採用されている他、BBCではTTMLのサブセットを採用

35. P. 35P. 35
<tt xml:lang="" xmlns="http://www.w3.org/ns/ttml">
<head>
<metadata/>
<styling/>
<layout/>
</head>
<body/>
</tt>
<metadata>
タイトルや説明、コピーライトを記述
<styling>
文字色やフォント、テキストの揃え位置を指定
<layout>
字幕の表示位置や余白、背景色の指定
<body>
字幕本文やその表示タイミングを指定
TTMLサンプル
引用:Timed Text Markup Language 2 (TTML2) W3C Recommendation

36. P. 36P. 36
<styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
<!-- s1 specifies default color, font, and text alignment -->
<style xml:id="s1"
tts:color="white"
tts:fontFamily="proportionalSansSerif"
tts:fontSize="22px"
tts:textAlign="center"
/>
<!-- alternative using yellow text but otherwise the same as style s1 -->
<style xml:id="s2" style="s1" tts:color="yellow"/>
<!-- a style based on s1 but justified to the right -->
<style xml:id="s1Right" style="s1" tts:textAlign="end" />
<!-- a style based on s2 but justified to the left -->
<style xml:id="s2Left" style="s2" tts:textAlign="start" />
</styling>
<style>内でスタイルを設定し idを
バインドする
TTMLサンプル <styling>
引用:Timed Text Markup Language 2 (TTML2) W3C Recommendation
既存のスタイルを継承し
一部のパラメータを変更可

37. P. 37P. 37
<layout xmlns:tts="http://www.w3.org/ns/ttml#styling">
<region xml:id="subtitleArea"
style="s1"
tts:extent="560px 62px"
tts:padding="5px 3px"
tts:backgroundColor="black"
tts:displayAlign="after"
/>
</layout>
<layout>内の<region>で表示位置等を
設定しidをバインド
TTMLサンプル <layout>
引用:Timed Text Markup Language 2 (TTML2) W3C Recommendation

38. P. 38P. 38
<body region="subtitleArea">
<div>
<p xml:id="subtitle1" begin="0.76s" end="3.45s">
It seems a paradox, does it not,
</p>
<p xml:id="subtitle2" begin="5.0s" end="10.0s">
that the image formed on<br/>
the Retina should be inverted?
</p>
<p xml:id="subtitle3" begin="10.0s" end="16.0s" style="s2">
It is puzzling, why is it<br/>
we do not see things upside-down?
</p>
bodyタグ内 region:
<layout>内で設定した領域の idを指定
pタグ内 style:
<styling>内で設定したスタイルの idを指定
TTMLサンプル <body>
引用:Timed Text Markup Language 2 (TTML2) W3C Recommendation

39. P. 39P. 39
<body region="subtitleArea">
<div>
<p xml:id="subtitle1" begin="0.76s" end="3.45s">
It seems a paradox, does it not,
</p>
<p xml:id="subtitle2" begin="5.0s" end="10.0s">
that the image formed on<br/>
the Retina should be inverted?
</p>
<p xml:id="subtitle3" begin="10.0s" end="16.0s" style="s2">
It is puzzling, why is it<br/>
we do not see things upside-down?
</p>
...
TTML 表示例
引用:Timed Text Markup Language 2 (TTML2) W3C Recommendation
It seems a paradox, does it not,
that the image formed on
the Retina should be invented?
It is puzzling, why is it
we do not see things upside-down?
字幕のイメージ

40. P. 40P. 40
WebVTT (Web Video Text Tracks)
テキストの表示タイミングと表示位置を指定
Web動画の字幕表示に活用
‘WEBVTT’ から始まるtext形式で記述
TTMLと比べて記述がシンプル
位置指定とスタイル指定が可能
多くのブラウザで対応
Youtubeの字幕等に採用
WEBVTT
1
00:00:03.000 --> 00:00:05.000
<v Alice>こんにちは。</v>
2
00:00:08.000 --> 00:00:11.000
<v Bob>こんにちは、Alice。</v>
3
00:00:14.000 --> 00:00:16.000
<v Alice>今日はお出かけ？</v>
4
00:00:18.000 --> 00:00:21.000
<v Bob>買い物に行くんだ。</v>

41. P. 41P. 41
組込ブラウザが創る未来

42. P. 42P. 42
WebRTC (Web Real-Time-Communication)
Webブラウザ間での音声・ビデオチャットやファイル共有を可能にしたAPI
(完全なサーバレスではないが)P2P方式の通信に対応
WebRTC活用例
• Skype on Web、DISCORD、Chatwork等のチャットアプリケーション
• ECCやZ会等のオンライン教室
• Web上でのカスタマーサポート(Amazon)
STUNサーバ等
P2P

43. P. 43P. 43
© 2017 ACCESS CO., LTD. All rights reserved. l Confidential
Hybridcast Connect とは
放送局
付加サービス
自宅
サービス提供
視聴者
受信機画面
Hybridcast
1
3
サービス管理
サーバー
2
URL
4
放送連動
5
外部サービス連動
Hybridcast Connect 画面
NHKが推進している放送-通信の連携サービス
通信部の仕様としてHTML5を使用

44. P. 44P. 44
今後のW3Cの注力ポイント
引用:
https://www.w3.org/blog/2018/11/looking-back-at-tpac-2018-public-release-of-w3c-strat
egic-highlights/

45. P. 45P. 45
組込ブラウザが創る未来
• デバイス特化のプラットフォームからオープンなプラットフォー
ムへの変化
• いろんなデバイスの上で動かせるチャンスがくる
• HTML5の開発者が活躍できる場が増えていく

46. P. 46P. 46
まとめ
ブラウザを組込み向けにつくるということは
PC/スマホで動いていたサービスを新しい環境へ
新しい環境で新しいサービスが生まれる可能性をつくること

47. P. 47P. 47

48. P. 48P. 48
採用のお問い合わせはこちらまで

49. P. 49P. 49
Appendix

50. P. 50P. 50
ブラウザの移り変わり
2000年初頭
PC: IE, FireFox, Opera
組込: NFB(独自エンジン), Opera(独自エンジン), OpenWeve(WAPブラウザ)
2005年 WebKit OSS化
2007年 初代IPhone発売
2008年 Chromeリリース
2011年 NetFrontNX(WebKit)リリース
2011年 HTML5 LastDraft
2013年 WebKitとBlinkの分離, OperaのChromium利用
2014年 NetFrontBE(Chromium)リリース

51. P. 51P. 51
組込の世界でのアプリ開発の変化
PluginからHTML5+Device APIへ

52. P. 52P. 52
W3Cでの活動
ACCESSはMedia and Entertainment Interest Groupの一員として活動
Media and Entertainment Interest Group
• Web and TV Interest Groupを引き継ぐ形で2017年に設立
• TVやストリーミングメディアの放送に関わる要件定義等を議論
ACCESSの活動
• Interest Group / Working Groupへの参加
• TPACへの参加

53. P. 53P. 53
YoutubeTV専用アプリ (google開発)
TVで動かすためにChormiumから置き換わって開発された

54. P. 54P. 54
Cobaltでサポートしている要素
https://cobalt.foo/development/reference/supported-features.html
かなり割りきって最低限の
もののみをサポート

55. P. 55P. 55
EMEが対応する外部コンポーネント
CDM (Content Decryption Module):
暗号化されたメディアを再生可能するモジュール
EMEはWebコンテンツがCDMへアクセスできるAPIを提供
EMEはCDM自体を定義しない
Key System:
コンテンツ保護システムの総称でDRM(WideVine, Playready等)が該当
EME自体はKey Systemを定義しない
EMEはCDMとKey Systemを定義せず、DRMやCDMの違いを吸収
様々なオープンソース・フリーソフトウェアで実装可能な仕組みに

56. P. 56P. 56
Hybridcastでのメディアストリーミング
Hybridcastで提供するメディアストリーミングには MSE+MPEG-DASH を採用
• MSE
– セグメントファイルからストリームを生成
• MPEG-DASH
– HTTPを使ったMPEGビデオストリーミング技術
– 端末・通信環境の差を吸収可能
ストリーミング対応のポイントは3つ
1. H264 | H265 と MPEG-4 AAC のコーデック対応
2. MPEG-DASHのマニフェストファイル(MPD)対応
3. JavaScriptプレイヤー