Last active
May 25, 2018 03:53
-
-
Save matsub/2ceed5226964c574afac7750e58429d3 to your computer and use it in GitHub Desktop.
skyway w/ Vue.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <title>vue-videochat.js</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="/dist/bundle.js"></script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment