1. n0bisuke

    Posted

    n0bisuke
Changes in title
+1時間でビデオチャットを作ってみる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,85 @@
+
+Nuxt.js使っておけば今っぽい雰囲気は出ると思う。
+SkyWayを使うとビデオチャットがらくーに作れます。
+
+![スクリーンショット 2018-12-05 0.00.49.png](https://qiita-image-store.s3.amazonaws.com/0/35387/c080f33e-7a24-36fc-b2eb-d1fa61d83bab.png "スクリーンショット 2018-12-05 0.00.49.png")
+
+執筆間に合ってないのでWIPですw
+
+## 開発環境など
+
+* Node.js v11.0.0
+* Nuxt.js v2.3.4
+* SkyWay
+
+## Nuxt.jsでWebページの雛形を作成
+
+[Create Nuxt App](https://github.com/nuxt/create-nuxt-app)で作成します。
+
+```
+$ npx create-nuxt-app nuxt-skyway
+npx: 402個のパッケージを28.845秒でインストールしました。
+> Generating Nuxt.js project in /Users/n0bisuke/dotstudio/playground/nuxt-skyway/nuxt-skyway
+
+? Project name nuxt-skyway
+? Project description My cat's meow Nuxt.js project
+? Use a custom server framework none
+? Use a custom UI framework bootstrap
+? Choose rendering mode Single Page App
+? Use axios module yes
+? Use eslint no
+? Use prettier no
+? Author name のびすけ
+? Choose a package manager npm
+```
+
+RTAみたいですけど、`Use eslint no`,`Use prettier no`はここ(スピード勝負)においては大事な気がする。
+> ちゃんとやるときはyesにしましょう。
+
+![](https://i.gyazo.com/bc629f48b87b21172fbcfc4be0331816.png)
+
+```
+$ cd nuxt-skyway
+```
+
+以下でサーバーを起動します。
+
+```
+$ npm run dev
+```
+
+localhost:3000にアクセスすると雛形が作成されていることがわかります。
+
+<img src="https://i.gyazo.com/5459a95510336c4b56927c649fb7de3e.png" width="300">
+
+
+## SkyWayでアプリケーションを作成
+
+https://webrtc.ecl.ntt.com/ にアクセスして登録します。
+無料で使える、コミュニティエディションって方を選びます。
+
+<img src="https://i.gyazo.com/17746f132778ec274b0680f1eb52f21c.png" width="400">
+
+> キャプチャのテキストミスですlocahost->localhost
+
+ここのアプリケーション作成で利用可能ドメインを指定します。
+
+とりあえずlocalhostで試したいのと、GitHub Pagesにあげようかなと思っているのでn0bisuke.github.ioを指定しました。
+
+## SkyWayのJavaScript SDKを導入
+
+[JavaScript SDK](https://webrtc.ecl.ntt.com/js-sdk.html)のページをを参考にします。
+
+とりあえずインストールから。
+
+```
+$ npm install skyway-js
+```
+
+## まとめ
+
+SkyWayのサンプルというかWebRTCの実装サンプルはけっこうjQueryで書かれているものが多くてそこのリプレイスは参考実装になるんじゃないかなぁというモチベもありました。
+
+けっこうコードスッキリかけますね。
+
+ではでは!