Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

組み込みブラウザとメディアﰀ仕様あれこれ

24 views

Published on

HTML5 Conference 2018公開用
13:20 - 14:00ルームC

Published in: Devices & Hardware
  • Be the first to comment

組み込みブラウザとメディアﰀ仕様あれこれ

  1. 1. P. 1P. 1 HTML5 Conference 2018 組み込みブラウザとメディアの仕様あれこれ
  2. 2. P. 2P. 2 自己紹介 名前:梅田雅士 所属:株式会社 ACCESS IoT事業本部 ブラウザ開発チーム の 課長 NetFront Browserの開発 React.js, Vue.jsを使ったウェブサービスの開発 NetFront NX/BEチームのマネージャー お客様へのブラウザの提案等
  3. 3. P. 3P. 3 ACCESSって? 高度BSやTVのブラウザ、Nintendo Switch™にブ ラウザエンジンを提供
  4. 4. P. 4P. 4 ACCESSって? 電子書籍において出版社 様向けに電子コミックスト ア向けトータルソリュー ションを適用
  5. 5. P. 5P. 5 ElixirのWebAppフレー ムワーク(OSSで公開) Beacon, Iotサービス
  6. 6. P. 6P. 6 組込ブラウザ
  7. 7. P. 7P. 7 組込ブラウザとは? PC/スマホブラウザ - オープンインターネットの閲覧 - Web サービスの利用 組込ブラウザ - デバイス とその 市場に特化した機能 - TV 向けサービス、車向けサービス - linux から ITRON まで色々な環境 車TV ゲーム
  8. 8. P. 8P. 8 組み込みブラウザが求められる理由 • 特定の専用機器でもウェブサービスと連携させたい • 表示のための国際標準仕様がある • コンテンツ開発者が多い
  9. 9. P. 9P. 9 組込ブラウザをやっている主な企業 自社開発でWebKit or Chromiumを利用している企業もある ACCESS 日本 車載、TV、 ゲーム Chromium, WebKit, 独自 Obigo 韓国 車載 Chromium Espial カナダ TV WebKit Vewd ノルウェイ (旧Opera) TV Chromium
  10. 10. P. 10P. 10 組み込みブラウザのここが大変 • 省ROM/省RAMが求められる – Chromeはデフォルトで下記は必要となるのでカスタマイ ズが必要 • ROM: 200M~ • RAM: 180M~(コンテンツに依存ではあるが) • PC/スマホと比べるとチープな環境での動作 – メディア再生ではHWとのつなぎ込みが不可欠
  11. 11. P. 11P. 11 テレビ の ブラウザ
  12. 12. P. 12P. 12 テレビ の ブラウザ dデータボタン から ブラウザを起動 TVの映像 天気予報の情報とか TVの内容を補足 する情報とか 映像以外の部分をブラウザで表示
  13. 13. P. 13P. 13 メニューから呼び出すアプリもHTMLアプリで実現
  14. 14. P. 14P. 14 番組表 を HTML アプリで実現
  15. 15. P. 15P. 15 • リモコンでの快適な操作を目指しての十字キーでのフォーカスハンドラ – 一般サイトだとマウスやタッチ前提 • テレビ向け仕様への対応 – JLab拡張 API(日本) – hbbTV拡張 API(欧州) • 大画面向け対応とメモリや速度のパフォーマンスチューニング – 数Kb単位で節約する要望も受ける • TTML(Timed Text Style Guide)を利用した字幕対応 – Netflixでも採用されている字幕の仕様 – W3Cで規定されている TV向けブラウザの開発
  16. 16. P. 16P. 16 テレビ とWebサービス(国内)
  17. 17. P. 17P. 17 高度BS(高度広帯域衛星デジタル放送) 放送衛星を用いて4K/8Kの超高精細度映像を放送する国内の放送サービス 映像・伝送技術の向上により、 • 映像の高精細化 • フレームスピードの向上 (Max 120fps) • 多階調表現 (RGB 8bit → 10bit) • 表現可能色域の拡大・HDR (より人間の視覚に近い色表現が可能) が実現 また高度BS放送に合わせてインターネットとの連携が本格化する 2016/08/01 試験放送 2018/12/01 本放送開始
  18. 18. P. 18P. 18 高度BSでのブラウザユースケース 高度BS放送ではインターネット動画サービスやIPTVコンテンツの配信を実施 ブラウザはこれらのコンテンツのUIを提供する他、 ストリーミングコンテンツの再生に必要となる機能をサポート ナビゲーション 画 像 画 像 <div id=”navi”>....</div> <img src=”...” /> 放送時のコンテンツ表示 <object id=“broadcast type=“video/x-arib2-broadcast”/>
  19. 19. P. 19P. 19 テレビ とWebサービス(海外)
  20. 20. P. 20P. 20 HbbTV (Hybrid Broadcast Broadband Television) ハイビジョンTVと広帯域通信を一体化した海外の放送規格 様々なサービス(VOD、広告、インターネット投票等)に対応 最新の仕様はHbbTV 2.02 放送 事業者 放送コンテンツ リニアコンテンツ ノンリニアコンテンツ 放送コンテンツ 放送波 サーバー Internet 双方向通信信号 ブロードバンド
  21. 21. P. 21P. 21 HbbTVの導入状況 ヨーロッパを中心に35ヶ国で導入 およそ300のHbbTV対応アプリケーション およそ4400万台のHbbTV対応受信機(TVやセットトップボックス) 引用: https://www.hbbtv.org/deployments/
  22. 22. P. 22P. 22 HbbTVでのブラウザユースケース App内のコンテンツや インターフェイスの表示 インターネットブラウジング コンテンツ サーバ コンテンツ伝送プラットフォーム Data
  23. 23. P. 23P. 23 テレビ放送で利用されるWeb技術
  24. 24. P. 24P. 24 メディアストリーミング 現在音楽や映画、ドラマ等のメディアストリーミング市場が拡大 (Netfilx, Hulu, Prime Video, dTV等) Web上のメディアストリーミングは必要不可欠な技術 現在はTVでもVOD等のサービスでストリーミングが行われている コンテンツの再生には次の2つが必要 • 分割されたメディアファイル(セグメント)と制御ファイル(マニフェスト)への対応 • DRMで暗号化されたメディアファイルの復号
  25. 25. P. 25P. 25 EMEとMSEの活用 MSE セグメントから ストリーム生成 EME 暗号化された メディアの復号 Data Stream Encrypted Segment init.m4s 1.m4s 2.m4s 3.m4s Playlist DRMを用いるストリーミングにおいては必要不可欠なExtension
  26. 26. P. 26P. 26 MPEG-DASH DASHはDynamic Adaptive Streaming over HTTPの略 HTTPを使ってビデオストリーミングを行う技術。YouTubeでも使われている。 類似の技術(AppleのHTTP Live Streaming)とかは独自規格なので標準規格として策定さ れた 特徴: ユーザーの視聴環境に応じて自動的に最適な帯域の動画データにスムーズに切り替 えることができる。見ている最中に解像度が下がったりするアレ。 仕様策定元のDash Industry Forumでdash.jsが公開されている
  27. 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. 28. P. 28P. 28 EME (Encrypted Media Extensions) 暗号化された音声・映像の再生に用いるCDMへアクセスするAPIを提供 ファイル再生の為の複雑な実装やプラグインの導入が不要 CDMやKey System等の外部コンポーネントを利用して実装 EMEはCDMはDRMによって中身が違うが全部同じように扱うことができる CDM (Content Decryption Module): 暗号化されたメディアを再生可能するモジュール
  29. 29. P. 29P. 29 https://www.w3.org/TR/encrypted-media/#introduction ポイント 1. Keyのリクエスト 2. 復号化
  30. 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. 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. 32. P. 32P. 32 EMEの論争 以前のHTML5とウェブ上の暗号化された映像 => PluginでDRM対応を行われてきた EMEは特定のCDM実装を一切強制しないので、仕様自体はオープンソースおよびフ リーソフトウェアプロジェクトで実装できる オープンソースの実装が多いブラウザで、著作権を保護するDRM技術をサポートする 事が是か非か論争となった 現在インターネットトラフィックの過半数が映像視聴が占めておりブラウザが保護された コンテンツの配信をサポートすることは重要
  33. 33. P. 33P. 33 TTMLとWebVTT 字幕にはW3Cで定義された2つの仕様がある TTML WebVTT
  34. 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. 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. 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. 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. 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. 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. 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. 41. P. 41P. 41 組込ブラウザが創る未来
  42. 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. 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. 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. 45. P. 45P. 45 組込ブラウザが創る未来 • デバイス特化のプラットフォームからオープンなプラットフォー ムへの変化 • いろんなデバイスの上で動かせるチャンスがくる • HTML5の開発者が活躍できる場が増えていく
  46. 46. P. 46P. 46 まとめ ブラウザを組込み向けにつくるということは PC/スマホで動いていたサービスを新しい環境へ 新しい環境で新しいサービスが生まれる可能性をつくること
  47. 47. P. 47P. 47
  48. 48. P. 48P. 48 採用のお問い合わせはこちらまで
  49. 49. P. 49P. 49 Appendix
  50. 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. 51. P. 51P. 51 組込の世界でのアプリ開発の変化 PluginからHTML5+Device APIへ
  52. 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. 53. P. 53P. 53 YoutubeTV専用アプリ (google開発) TVで動かすためにChormiumから置き換わって開発された
  54. 54. P. 54P. 54 Cobaltでサポートしている要素 https://cobalt.foo/development/reference/supported-features.html かなり割りきって最低限の もののみをサポート
  55. 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. 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プレイヤー

×