0
Help us understand the problem. What are the problem?

posted at

爆速でするNuxtとSkywayの連携

こんにちは!関西の大学に通うキンジョウです!もう春ですね。桜がとても楽しみです!!

今回は、NuxtとSkywayを連携をやっていきたいと思います。

成果物

こんな感じで通信できることがゴールです!

Nuxtのセットアップ

$ yarn create nuxt-app skyway-nuxt
$ cd skyway-nuxt

サーバーを起動する!

$ yarn dev

にアクセスできたら大丈夫です!

SkyWayのセットアップ

スクリーンショット 2022-04-01 9.39.14.png

Commuity Edition(無料版)で登録してください!
スクリーンショット 2022-04-01 9.45.50.png

注意
ここに登録してない場合は正常に動いてくれないので、忘れずに登録してください。

できたら、次はJavaScript SDKを読み込んでいきます

$ yarn add skyway-js
index.vue
import Peer from 'skyway-js'; //追加する

script部分のコードです

pages/index.vue
<script>
import Peer from 'skyway-js'
export default {
  data() {
    return {
      localStream: '',
      APIKey: '',// ここには自分のAPIキーを入れてください。
      peer: '',
      peerId: '',
      theirId:'',
      theirVideo;'',
      myVideo:''
    }
  },
  methods: {
    makeCall() {
      const mediaConnection = this.peer.call(this.theirId, this.localStream)
      this.setEventListener(mediaConnection)
    },
    setEventListener(mediaConnection) {
      mediaConnection.on('stream', (stream) => {
        const videoElm = this.theirVideo
        videoElm.srcObject = stream
        videoElm.play()
      })
    },
  },
  mounted() {
    this.peer = new Peer({
      key: this.APIKey,
      debug: 3,
    })
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then((stream) => {
        const videoElm = this.myVideo
        videoElm.srcObject = stream
        videoElm.play()
        this.localStream = stream
      })
      .catch((error) => {
        console.error('mediaDevice.getUserMedia() error:', error)
      })
    this.peer.on('open', () => {
      this.peerId = this.peer.id
    })
    this.peer.on('call', (mediaConnection) => {
      mediaConnection.answer(this.localStream)
      this.setEventListener(mediaConnection)
    })
  },
}
</script>

HTMLのコードです

pages/index.vue
<template>
  <div>
    <video v-bind="myVideo" width="400px" autoplay muted playsinline></video>
    <p>{{ peerId }}</p>
    <input  v-bind="theirId" />
    <button @click="makeCall()">発信</button>
    <video v-bind="theirVideo" width="400px" autoplay muted playsinline></video>
  </div>
</template>

試し方

  • 二つタブを開いて、両方に表示されるpeerIdを、表示されたpeerIdを表示されなかったタブにinputに入力する。
  • 発信ボタンを押す

最後に

簡単にビデオ通信ができるので、おすすめです!!
ここまで読んでくださり、ありがとうございました!!

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?