はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。
今回の目的
ビデオ通話が簡単に実装できるということで、クイックスタートで学んでいきます！
使用したものや事前準備
・Macbook Pro
・Visual Studio Code
・SkyWay
・Github pages
主に参考にさせていただいた記事
一個ずつセットアップしてみる
コピペで終わらせると一つ詰まっただけで挫折してしまいそうなので、一個ずつある程度理解してから進みたいと思います。
SkyWay
ドキュメントが日本語でだいぶやりやすいです。
アカウント登録ができればすぐにプロジェクトも作成できます。
カメラに繋いで映像通信ができるようにやってみます。
SDKはJavaScriptを選びました。
事前準備
環境構築 は[NPM]の方を選びました。
npm init
いろいろ聞かれたのでとりあえずこの形になりました。
npm i @skyway-sdk/room
複数人で通信をするアプリケーションを作るための ライブラリを入れてます。
npm i -D parcel
ホットリロードができる状態にしてくれます。
※補足
・npm i
npm installの短縮系
・-D
--save-dev の短縮形で開発時のみ必要なパッケージとしてインストールします。
package.jsonでは「devDependencies」に入れられます。
ソースファイル作成
各ファイルが何やっているか整理します。
⚫︎index.html
ビデオ通話のテンプレート
<video id="local-video" width="400px" muted playsinline></video>
muted
ミュートにする。今回の場合だと自分のビデオを消音にする。
playsinline
要素内で再生する。（iPhpneだとこれがないと再生しないらいしい
<div id="button-area"></div>
追加機能を置くところ
<div id="remote-media-area"></div>
相手のビデオを配置するところ
⚫︎main.js
const token = new SkyWayAuthToken({
}).encode('ここにシークレットキーをペーストしてください');
トークン生成（この時点ではまだ使ってない）
サーバーサイド認証
今回はクイックスタートなのでクライアントサイドで認証を通しますが、情報の書き換えも可能になってしまうため基本的にNG。
サーバーサイドで認証できるようにする必要があります。認証情報を渡して、ルーム情報を返すことになりそう。
下記のサンプルは認証情報を返すところまで書いてありました。
(async () => {
const localVideo = document.getElementById('local-video');
const { audio, video } = await SkyWayStreamFactory.createMicrophoneAudioAndCameraStream();
video.attach(localVideo);
await localVideo.play();
})();
SkyWayStreamFactory.createMicrophoneAudioAndCameraStream() 関数を呼び出して、デバイスのマイクとカメラからオーディオとビデオのストリームを生成しビデオをアタッチして再生しています。
video.attach(localVideo)の読み方は覚えておきたいです。
今回は「videoストリームをlocalVideo要素にアタッチする」という意味です。
また、localVideo.play()をやっている通り、タグはVideoである必要があります。
ここに修正したビデオを差し込めるという意味だとも思っています。
const context = await SkyWayContext.Create(token);
SkyWay Auth Tokenで生成した乱数のようなトークンからアプリケーションの設定を行なっています。SkyWay Auth Tokenはサーバーサイドでも取得できるのでそちらが推奨されている。
const room = await SkyWayRoom.FindOrCreate(context, {
type: 'p2p',
name: roomNameInput.value,
});
const me = await room.join();
p2pで通信し、入力した値で部屋を作って参加しています。room.join()の引数にはname(一意）とmetadataの設定が可能。
await me.publish(audio);
await me.publish(video);
ストリームをroom内で公開しています。
room.publications.forEach(subscribeAndAttach);
room.onStreamPublished.add((e) => subscribeAndAttach(e.publication));
publicationsは現在公開しているストリームを要素として生成し、onStreamPublishedに新しい公開ストリームがあれば追加するイベントがあれば、公開ストリームを引数に渡して要素を生成します。
switch (stream.track.kind) {
~
}
生成部分です。videoタグやaudioタグにストリームを入れて表現しています。
github pagesにデプロイし実際に動かしてみた
リモートリポジトリにプッシュ
リモートリポジトリ（[ユーザー名].github.io）を作成しましょう。
ローカルで作成したファイルをPUSHします。
下記の点を修正しましょう。
・.gitignodeを作成し、node_modulesをコミット対象外にする
・dist/index.htmlの「/index.~.js」を相対パスにします。先頭へドットをつけましょう。
アクセス
下記の画像のようになったら「Visit site」にアクセスし、URL末尾にdistを追加しましょう。
例：〜.github.io/dist
アクセスできたら PCやスマホ端末で別々の画面を表示できることを確認してください。
最後に
クイックスタートの意味一つひとつ辿るだけでもかなり勉強になりました。こういうところからできることを模索していく必要があると思いましたので継続していきます！