Skybeje LiveHTMLWebRTCでP2P配信する動的Webサイト

はじめに

この資料は

Skybeje LiveHTMLの使用方法と仕組みについて説明

※基本的な機能については以下の資料を参照

　Skybejeについて

Skybeje LiveHTMLの概要

WebRTC(SkyWay)を使用した

ブラウザ間でのP2Pデータ通信にて

配信元からHTMLデータを送信し、視聴先に表示

既存のWebサービスを表示したり

配信や通話機能の組込みが可能

ただし利用にはHTMLの知識が必要

LiveHTMLで設定するHTMLについて

全体的なHTMLではなく部分的なHTMLを設定

（ブログに、外部サイトを埋め込むイメージのHTML）

複数レイヤに対してHTMLの設定が可能

また、配信中に表示HTMLページの切替が可能

LiveHTMLの使用方法（１）

まずはじめにページを作成

LiveHTMLの使用方法（２）

プレビュー画面

HTMLを記述レイヤについては後で説明

LiveHTMLの使用方法（３）

ページ一覧に表示されるので「配信先に表示」を押す

LiveHTMLの使用方法（４）

配信可能状態になるので「配信開始」を押す

LiveHTMLの使用方法（５）

LiveHTMLが配信状態

Skybejeチャットから起動した場合は自動的にチャット側に表示される

単独起動した場合はここから視聴ページの起動 / URLのコピーが可能

LiveHTMLの使用方法（６）

視聴ページを開くと設定した内容が表示される

Skybeje LiveHTML 技術資料レイヤについてとHTMLの設定例

レイヤについて

以下の順にレイヤに設定したHTMLが重ねて表示される

① 背景レイヤ１

② 背景レイヤ２

③ カーソルレイヤ（チャットのアイコン）

④ 字幕レイヤ（チャットの文章）

⑤ アクティブレイヤ

⑥ コントロールレイヤ

各レイヤの表示例

　①②

③

④

⑤

⑥

設定画面と視聴ページのHTML配置イメージ

③

④

①

②

⑤

⑥全レイヤ position: absolute

①② 背景レイヤについて

以下のようなオブジェクト配置が可能

・画像 (外部サイトの画像 / Dropbox上の画像 )

・ミュート状態の動画 / ライブ配信

・スクリーンシェア

背景レイヤに配置したHTMLは

基本的にユーザーがクリックができないので注意

③ カーソルレイヤについて（１）

　

Skybejeチャットから起動した場合「ユーザーアイコン／字幕表示を許可」というオプションが表示される

ONにしておく事で、チャットのアイコンを配信画面上でカーソルのように表示可能

③ カーソルレイヤについて（２）

　

プロフィールのアイコンの設定で「配信画面の高さに対する表示比率」の値を変更する事でサイズ変更可能

※デフォルトでは小さく表示される

④ 字幕レイヤについて

　

プロフィールの「配信連動設定」「配信側で（略）字幕で表示する」がONの場合、チャットの発言内容が字幕として表示される

⑤ アクティブレイヤについて

以下のようなオブジェクトの配置が可能

・通常のWebサイト

・外部Webサービスの埋込HTML

・Googleの各種サービス(共有スプレッドシート)等

アクティブレイヤは

ユーザーの操作が可能(クリック可能)

⑥ コントロールレイヤについて

以下のようなオブジェクトの配置が可能

・音声 / 楽曲ファイル

・グループ通話機能

下部に表示される帯状のエリアで

非表示にする事も可能

HTMLの設定例（１）

画像の表示例

DropBoxの共有リンク

dl=1 にする

styleはHTMLで設定可能ですがskybeje側で準備したclassも利用可

HTMLの設定例（２）

動画の設置例 DropBoxの共有リンク

dl=1 にする

loop : ループ再生muted : ミュート状態autoplay：自動再生

ブラウザや端末によっては動作しないので注意※この設定だとiOSで動作せず

通常のWebサイトの表示

HTMLの設定例（３）

iframeを使用して表示

HTMLの設定例（４）

外部Webサービスの設置

SlideShareの埋込HTML

不用な部分は除去styleは適意に書換サイズや位置は「%」指定

配信／画面共有の設置例

HTMLの設定例（５）

Skybeje配信を単独で起動しリンクURLを貼付

音声／楽曲ファイルの設置

HTMLの設定例（６）

DropBoxの共有リンク

dl=1 にする

Audioコントロールが表示される

グループ通話機能の設置

HTMLの設定例（７）

ここで上記HTMLが表示される

SFUの利用はsfu=1 にする

グループ通話機能が表示される

「表示エリアのアスペクト比率を固定」しない場合

それぞれの視聴ページの最大領域でHTMLを描画

ブラウザの表示サイズによって見え方が大きく変わる

「表示エリアのアスペクト比率を固定」する場合

指定した比率で最大表示可能な領域でHTMLを描画

ブラウザの表示サイズに関わらず同じ形に見えやすい

※表示するサイトによっては、ずれるケースあり

アスペクト比率の設定（１）

アスペクト比率を固定しない場合

アスペクト比率の設定（２）

アスペクト比率を固定した場合

アスペクト比率の設定（３）

以下のような使い分けを想定

通常サイトやスプレッドシートを表示する場合は

「表示エリアのアスペクト比率を固定」しない

複数レイヤを使用して表示を重ねたい場合は

「表示エリアのアスペクト比率を固定」する

アスペクト比率の設定（４）

配信中のページ設定を更新した場合や

複数ページ登録し、表示ページを切替えた場合

視聴側のページの表示も切替ります

表示ページの切替え（１）

ここで切替え

表示ページ切替えが発生した場合

各レイヤに設定したHTMLが

切替え前のHTMLと完全一致している場合

DOMの書き変えはされない

グループ通話や動画／配信の再生がリセットされずに

他レイヤの表示切替えが可能

表示ページの切替え（２）

通常のWebページの表示も可能だが

セキュリティ対策（クリックジャッキング対策）が

実施されているサイトは表示できない

※以下のエラーが発生

表示できないWebサイトについて

さいごに

Skybejeはオープンソースとして開発中

GitHub : https://github.com/iwatendo/skybeje

Blog：http://iwatendo.hateblo.jp/

ご意見や質問、バグ報告等を歓迎します