matsub/App.vue

## App.vue
<template>
  <ul>
    <li v-for="user in users" :key="user.peerId">
      <p><b>{{ user.peerId }}</b></p>
      <video style="border: solid 1px" v-on:click="assignVideo(user.stream, $event)" autoplay></video>
    </li>
  </ul>
</template>


<script>
import Node from '@/components/node.vue'


export default {
  components: { Node },
  data: function () {
    return { users: [] }
  },
  methods: {
    assignVideo: function (stream, event) {
      console.log(stream)
      event.target.srcObject = stream
    }
  },
  mounted: async function () {
    /* constraints of the stream */
    const constraints = {
      audio: false,
      video: {width: 200, height: 160},
    }

    // add user
    this.$skyway.on('stream', peerStream => {
      this.users.push({
        peerId: peerStream.peerId,
        stream: peerStream
      })
    })

    // remove peer on left
    this.$skyway.on('peerLeave', peerId => {
      for (let idx in this.users) {
        if (this.users[idx].peerId === peerId) {
          this.users.splice(idx, 1)
        }
      }
    })

    // join in the room
    let peer = await this.$skyway.join("sfuRoom", constraints)

    // add self
    this.users.push({
      peerId: peer.peerId,
      stream: peer.stream
    })
  }
}
</script>

## index.html
<!doctype html>
<head>
    <title>vue-videochat.js</title>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/bundle.js"></script>
</body>

## main.js
import Vue from 'vue'

// vue-videochat
import Skyway from '@/plugins/vue-videochat'
Vue.use(Skyway, { APIKey: process.env.SKYWAY_KEY })

import App from '@/components/App.vue'

const app = new Vue({
  el: '#app',
  render: h => h(App)
})

## vue-videochat.js
import Peer from 'skyway-js'


function _open(obj) {
  return new Promise(resolve => {
    obj.on('open', peerId => resolve(peerId))
  })
}


class VueSkyway {
  constructor (APIKey) {
    this.APIKey = APIKey
    this.peer = null
    this._sfuEvents = []
  }

  async join (room, constraints) {
    this.peer = new Peer({key: this.APIKey})

    // wait for connection
    let peerId = await _open(this.peer)
    let stream = await navigator.mediaDevices.getUserMedia(constraints)

    // join in the room
    let sfuRoom = this.peer.joinRoom(room, {
      mode: 'sfu',
      stream
    })
    for (let { event, resolve } of this._sfuEvents) {
      sfuRoom.on(event, resolve)
    }

    this.stream = stream
    this.sfuRoom = sfuRoom

    return { peerId, stream }
  }

  disconnect () {
    for (let track of this.stream.getTracks()) {
      track.stop()
    }
    this.sfuRoom.close()
  }

  on (event, resolve) {
    this._sfuEvents.push({ event, resolve })
  }

  emitted (event) {
    return new Promise(resolve => {
      this.sfuRoom.on(event, resolve)
    })
  }

  send (payload) {
    return this.sfuRoom.send(payload)
  }
}


export default function install(Vue, options) {
  let APIKey = options.APIKey
  Vue.prototype.$skyway = new VueSkyway(APIKey)
}
	<template>
	<ul>
	<li v-for="user in users" :key="user.peerId">
	<p><b>{{ user.peerId }}</b></p>
	<video style="border: solid 1px" v-on:click="assignVideo(user.stream, $event)" autoplay></video>
	</li>
	</ul>
	</template>


	<script>
	import Node from '@/components/node.vue'


	export default {
	components: { Node },
	data: function () {
	return { users: [] }
	},
	methods: {
	assignVideo: function (stream, event) {
	console.log(stream)
	event.target.srcObject = stream
	}
	},
	mounted: async function () {
	/* constraints of the stream */
	const constraints = {
	audio: false,
	video: {width: 200, height: 160},
	}

	// add user
	this.$skyway.on('stream', peerStream => {
	this.users.push({
	peerId: peerStream.peerId,
	stream: peerStream
	})
	})

	// remove peer on left
	this.$skyway.on('peerLeave', peerId => {
	for (let idx in this.users) {
	if (this.users[idx].peerId === peerId) {
	this.users.splice(idx, 1)
	}
	}
	})

	// join in the room
	let peer = await this.$skyway.join("sfuRoom", constraints)

	// add self
	this.users.push({
	peerId: peer.peerId,
	stream: peer.stream
	})
	}
	}
	</script>
	<!doctype html>
	<head>
	<title>vue-videochat.js</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="/dist/bundle.js"></script>
	</body>
	import Vue from 'vue'

	// vue-videochat
	import Skyway from '@/plugins/vue-videochat'
	Vue.use(Skyway, { APIKey: process.env.SKYWAY_KEY })

	import App from '@/components/App.vue'

	const app = new Vue({
	el: '#app',
	render: h => h(App)
	})
	import Peer from 'skyway-js'


	function _open(obj) {
	return new Promise(resolve => {
	obj.on('open', peerId => resolve(peerId))
	})
	}


	class VueSkyway {
	constructor (APIKey) {
	this.APIKey = APIKey
	this.peer = null
	this._sfuEvents = []
	}

	async join (room, constraints) {
	this.peer = new Peer({key: this.APIKey})

	// wait for connection
	let peerId = await _open(this.peer)
	let stream = await navigator.mediaDevices.getUserMedia(constraints)

	// join in the room
	let sfuRoom = this.peer.joinRoom(room, {
	mode: 'sfu',
	stream
	})
	for (let { event, resolve } of this._sfuEvents) {
	sfuRoom.on(event, resolve)
	}

	this.stream = stream
	this.sfuRoom = sfuRoom

	return { peerId, stream }
	}

	disconnect () {
	for (let track of this.stream.getTracks()) {
	track.stop()
	}
	this.sfuRoom.close()
	}

	on (event, resolve) {
	this._sfuEvents.push({ event, resolve })
	}

	emitted (event) {
	return new Promise(resolve => {
	this.sfuRoom.on(event, resolve)
	})
	}

	send (payload) {
	return this.sfuRoom.send(payload)
	}
	}


	export default function install(Vue, options) {
	let APIKey = options.APIKey
	Vue.prototype.$skyway = new VueSkyway(APIKey)
	}