WebRTC video component for Vue.js
WebRTC component designed for Vue.js ... See the DEMO
See this for browser compatibility.
npm install vue-webrtc --saveyarn add vue-webrtc
import Vue from 'vue' import WebRTC from 'vue-webrtc'Vue.use(WebRTC) // or import {WebRTC} from 'vue-webrtc' Vue.component(WebRTC.name, WebRTC)
// template
npm run dev npm run demo
| prop | type | default | notes | | ---------------- | ------- | ------------ | ------------------------- | | roomId | string | 'public-room' | id of the room to join | | socketURL | string | '' | URL of the signaling server | | cameraHeight | number | 160 | height of video element | | autoplay | boolean | true | autoplay attribute | | screenshotFormat | string | 'image/jpeg' | format of screenshot | | enableAudio | boolean | true | enables audio on join | | enableVideo | boolean | true | enables video on join | | enableLogs | boolean | false | enables webrtc console logs | | stunServer | string | null | set STUN server url to 'stun:yourSTUN.com:port' | | turnServer | string | null | set TURN server url to '[email protected]%turn:yourTURN.com:port' |
| name | param | notes | | -------------- | -------- | ------------------------------------------------------------- | | opened-room | roomid | emitted when the first user opens the room | | joined-room | video | emitted when anyone joins the room | | left-room | video.id | emitted when anyone leaves the room | | share-started | video.id | emitted when a local screen share stream starts | | share-stopped | video.id | emitted when a local screen share stream stops |
| name | param | notes | | -------------- | -------- | ----------------------------------------------------------------------- | | join | void | Join a room, opening it if needed | | leave | void | Leave a room | | capture | void | Capture the current image through the webcam as base64 encoded string | | shareScreen | void | Share your screen or an app as video |
.video-list
.video-item
| Version | Notes | | -------------- | ----------------------------------------------------------------------- | | 1.2.2 | Added stunServer and turnServer properties | | 1.2.1 | Added Vue CLI sample, npm audit fixes | | 1.2.0 | Added the Screen Share button |
vue create sample cd sample yarn install npm install vue-webrtc --save
Now open the App.vue file and add the code in the Usage section above.
npm run serveSee the /sample folder
There are many more features provided by the RTCMultiConnection library that we'd like to support, including: - Camera selection (we currently use the default camera) - Audio selection - WebRTC data events
Let us know what you'd like to see next and vote for a feature.
MIT
Author: @AndyWeston on GitHub at vue-webrtc
This project is based off of the excellent work found at WebRTC Experiments: https://www.rtcmulticonnection.org/
The Vue.js work is based on this camera component:
@vinceg vue-web-cam