skybeje livehtml · 2020. 4. 11. · skybeje livehtmlの概要 webrtc(skyway)を使用した...
TRANSCRIPT
![Page 1: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/1.jpg)
Skybeje LiveHTMLWebRTCでP2P配信する動的Webサイト
![Page 2: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/2.jpg)
はじめに
この資料は
Skybeje LiveHTMLの使用方法と仕組みについて説明
※基本的な機能については以下の資料を参照
Skybejeについて
![Page 3: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/3.jpg)
Skybeje LiveHTMLの概要
WebRTC(SkyWay)を使用した
ブラウザ間でのP2Pデータ通信にて
配信元からHTMLデータを送信し、視聴先に表示
既存のWebサービスを表示したり
配信や通話機能の組込みが可能
ただし利用にはHTMLの知識が必要
![Page 4: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/4.jpg)
LiveHTMLで設定するHTMLについて
全体的なHTMLではなく部分的なHTMLを設定
(ブログに、外部サイトを埋め込むイメージのHTML)
複数レイヤに対してHTMLの設定が可能
また、配信中に表示HTMLページの切替が可能
![Page 5: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/5.jpg)
LiveHTMLの使用方法(1)
まずはじめにページを作成
![Page 6: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/6.jpg)
LiveHTMLの使用方法(2)
プレビュー画面
HTMLを記述レイヤについては後で説明
![Page 7: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/7.jpg)
LiveHTMLの使用方法(3)
ページ一覧に表示されるので「配信先に表示」を押す
![Page 8: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/8.jpg)
LiveHTMLの使用方法(4)
配信可能状態になるので「配信開始」を押す
![Page 9: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/9.jpg)
LiveHTMLの使用方法(5)
LiveHTMLが配信状態
Skybejeチャットから起動した場合は自動的にチャット側に表示される
単独起動した場合はここから視聴ページの起動 / URLのコピーが可能
![Page 10: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/10.jpg)
LiveHTMLの使用方法(6)
視聴ページを開くと設定した内容が表示される
![Page 11: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/11.jpg)
Skybeje LiveHTML 技術資料レイヤについてとHTMLの設定例
![Page 12: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/12.jpg)
レイヤについて
以下の順にレイヤに設定したHTMLが重ねて表示される
① 背景レイヤ1
② 背景レイヤ2
③ カーソルレイヤ(チャットのアイコン)
④ 字幕レイヤ(チャットの文章)
⑤ アクティブレイヤ
⑥ コントロールレイヤ
![Page 13: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/13.jpg)
各レイヤの表示例
①②
③
④
⑤
⑥
![Page 14: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/14.jpg)
設定画面と視聴ページのHTML配置イメージ
③
④
①
②
⑤
⑥全レイヤ position: absolute
![Page 15: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/15.jpg)
①② 背景レイヤについて
以下のようなオブジェクト配置が可能
・画像 (外部サイトの画像 / Dropbox上の画像 )
・ミュート状態の動画 / ライブ配信
・スクリーンシェア
背景レイヤに配置したHTMLは
基本的にユーザーがクリックができないので注意
![Page 16: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/16.jpg)
③ カーソルレイヤについて(1)
Skybejeチャットから起動した場合「ユーザーアイコン/字幕表示を許可」というオプションが表示される
ONにしておく事で、チャットのアイコンを配信画面上でカーソルのように表示可能
![Page 17: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/17.jpg)
③ カーソルレイヤについて(2)
プロフィールのアイコンの設定で「配信画面の高さに対する表示比率」の値を変更する事でサイズ変更可能
※デフォルトでは小さく表示される
![Page 18: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/18.jpg)
④ 字幕レイヤについて
プロフィールの「配信連動設定」「配信側で(略)字幕で表示する」がONの場合、チャットの発言内容が字幕として表示される
![Page 19: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/19.jpg)
⑤ アクティブレイヤについて
以下のようなオブジェクトの配置が可能
・通常のWebサイト
・外部Webサービスの埋込HTML
・Googleの各種サービス(共有スプレッドシート)等
アクティブレイヤは
ユーザーの操作が可能(クリック可能)
![Page 20: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/20.jpg)
⑥ コントロールレイヤについて
以下のようなオブジェクトの配置が可能
・音声 / 楽曲ファイル
・グループ通話機能
下部に表示される帯状のエリアで
非表示にする事も可能
![Page 21: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/21.jpg)
HTMLの設定例(1)
画像の表示例
DropBoxの共有リンク
dl=1 にする
styleはHTMLで設定可能ですがskybeje側で準備したclassも利用可
![Page 22: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/22.jpg)
HTMLの設定例(2)
動画の設置例 DropBoxの共有リンク
dl=1 にする
loop : ループ再生muted : ミュート状態autoplay:自動再生
ブラウザや端末によっては動作しないので注意※この設定だとiOSで動作せず
![Page 23: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/23.jpg)
通常のWebサイトの表示
HTMLの設定例(3)
iframeを使用して表示
![Page 24: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/24.jpg)
HTMLの設定例(4)
外部Webサービスの設置
SlideShareの埋込HTML
不用な部分は除去styleは適意に書換サイズや位置は「%」指定
![Page 25: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/25.jpg)
配信/画面共有の設置例
HTMLの設定例(5)
Skybeje配信を単独で起動しリンクURLを貼付
![Page 26: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/26.jpg)
音声/楽曲ファイルの設置
HTMLの設定例(6)
DropBoxの共有リンク
dl=1 にする
Audioコントロールが表示される
![Page 27: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/27.jpg)
グループ通話機能の設置
HTMLの設定例(7)
ここで上記HTMLが表示される
SFUの利用はsfu=1 にする
グループ通話機能が表示される
![Page 28: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/28.jpg)
「表示エリアのアスペクト比率を固定」しない場合
それぞれの視聴ページの最大領域でHTMLを描画
ブラウザの表示サイズによって見え方が大きく変わる
「表示エリアのアスペクト比率を固定」する場合
指定した比率で最大表示可能な領域でHTMLを描画
ブラウザの表示サイズに関わらず同じ形に見えやすい
※表示するサイトによっては、ずれるケースあり
アスペクト比率の設定(1)
![Page 29: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/29.jpg)
アスペクト比率を固定しない場合
アスペクト比率の設定(2)
![Page 30: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/30.jpg)
アスペクト比率を固定した場合
アスペクト比率の設定(3)
![Page 31: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/31.jpg)
以下のような使い分けを想定
通常サイトやスプレッドシートを表示する場合は
「表示エリアのアスペクト比率を固定」しない
複数レイヤを使用して表示を重ねたい場合は
「表示エリアのアスペクト比率を固定」する
アスペクト比率の設定(4)
![Page 32: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/32.jpg)
配信中のページ設定を更新した場合や
複数ページ登録し、表示ページを切替えた場合
視聴側のページの表示も切替ります
表示ページの切替え(1)
ここで切替え
![Page 33: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/33.jpg)
表示ページ切替えが発生した場合
各レイヤに設定したHTMLが
切替え前のHTMLと完全一致している場合
DOMの書き変えはされない
グループ通話や動画/配信の再生がリセットされずに
他レイヤの表示切替えが可能
表示ページの切替え(2)
![Page 34: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/34.jpg)
通常のWebページの表示も可能だが
セキュリティ対策(クリックジャッキング対策)が
実施されているサイトは表示できない
※以下のエラーが発生
表示できないWebサイトについて
![Page 35: Skybeje LiveHTML · 2020. 4. 11. · Skybeje LiveHTMLの概要 WebRTC(SkyWay)を使用した ブラウザ間でのP2Pデータ通信にて 配信元からHTMLデータを送信し、視聴先に表示](https://reader034.vdocument.in/reader034/viewer/2022052002/6014d3c67a2a384d425b5093/html5/thumbnails/35.jpg)
さいごに
Skybejeはオープンソースとして開発中
GitHub : https://github.com/iwatendo/skybeje
Blog:http://iwatendo.hateblo.jp/
ご意見や質問、バグ報告等を歓迎します