代码拉取完成，页面将自动刷新
WebRTC component designed for Vue.js ... See the DEMO
See this for browser compatibility.
V2 of this component is mostly compatible with V1 but it completely replaces the internals with a new signaling server and a new SimplePeer client. Due to this, you will need to set the [socketUrl] to a new instance of the included .\vue-webrtc-lobby socket server. There is a default instance that you are welcome to use but you should run your own. If you are using STUN and TURN settings, you will now need to set those in [peerOptions] .
npm install vue-webrtc --save
yarn 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
<vue-webrtc width="100%" roomId="roomId">
</vue-webrtc>
npm run dev
npm run demo
| prop | type | default | notes |
|---|---|---|---|
| roomId | string | 'public-room' | id of the room to join |
| socketURL | string | 'https://weston-vue-webrtc-lobby.azurewebsites.net' | URL of the signaling server, use this default or run your own, see .\vue-webrtc-lobby |
| 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 |
| deviceId | string | null | set video device id to a camera from navigator.mediaDevices.enumerateDevices() |
| peerOptions | string | { } | set SimplePeer options such as STUN and TURN from here https://github.com/feross/simple-peer |
| 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 |
|---|---|
| 2.0.0 | Replaced signaling server and webrtc library with SimplePeer |
| 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 serve
See the /sample folder
V2 was a major internal ugrade, some other features that we would like to see added are:
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 Vue.js work was based on this camera component:
@vinceg vue-web-cam
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手