自宅PCだけでSkywayを使って1：多の動画配信を比較的簡単にできるか？
である
このWebを参考にした
まず確認したいのは、
自宅PCをサーバーとして使用し、これにLocalhostで接続して、配信側のクライアントになれるか？である
これはよく考えてみると試したことがない
なので、SkywayのLocalhostでのAPIキーを生成するWebで、IPアドレスを自宅のグローバルIPアドレスに変更して、再度登録し、実験してみる
Skyway roomをsfuに設定して確認した
このスクショは自宅PCのLocalhostのクライアント画面である
左のFEEが自宅PCでの再生動画、中央が自宅PCに外部から接続したPCのカメラ画像である
これはすなわち、自宅PC1台で、サーバーを設定し、Localhost接続でクライアントも作れるということを示している
次に配信側と受信側をどうやって分けるかである
暫定的にIndex.htmlをコピーして、talk.htmlというファイルを作成
同様にscript.jsをコピーして、script_talk.jsというファイルを作成
紐づけは、
index.html - script.js
talk.html - script_talk.js
として、talk.htmlの以下のremote-streamsをコメントアウトしてみた
<div class="remote-streams" id="js-remote-streams"></div>
左側がtalk.html、右側がindex.htmlである
つまり、このhtmlとjava scriptを別ファイルにしても、きちんと動作するということがわかった
あとは
sfuでしか使わないので、defaultでsfuになる設定
room名も変えないつもりなので、同様にdefaultで設定
index.html側（つまり外部クライアント側）を配信受信のみで設定
あたりが動画配信の課題となる
四苦八苦を続けて、だいぶ雰囲気ができてきた
javascriptがよくわからない中で当たりをつけてちょっといじって確認して、
また戻して確認して…という連続で、亀のような歩みで進んでいる
Talk側は基本的に htmlでのremote-stream表示をやめただけ
Client側（Room側）はlocal stream系をコメントアウト
const room = peer.joinRoom(roomId.value, {
mode: getRoomModeByHash(),
//stream: localStream, //Hideo
}); // Render local stream
/*localVideo.muted = true;
localVideo.srcObject = localStream;
localVideo.playsInline = true;
await localVideo.play().catch(console.error);*/js-local-streamもコメントアウト
//const localVideo = document.getElementById('js-local-stream');htmlはjs-local-streamをコメントアウト、remote-streamの位置を左に移動
<div class="room">
<div class="remote-streams" id="js-remote-streams"></div>
<div>
<!--<video id="js-local-stream"></video>-->
<span id="js-room-mode"></span>:
<input type="text" placeholder="Room Name" id="js-room-id">
<button id="js-join-trigger">Join</button>
<button id="js-leave-trigger">Leave</button>
</div>
<!--<div class="remote-streams" id="js-remote-streams"></div>-->あとは、cssとhtmlで体裁を整えていけばなんとかなるだろう
ここまでくればゴールは近い
Comentarios