Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-webrtc
Advanced tools
Readme
WebRTC component designed for Vue 3 ... See the DEMO
See this for browser compatibility.
npm install vue-webrtc --save
import Vue from 'vue'
import WebRTC from 'vue-webrtc'
Vue.use(WebRTC)
// or
import { VueWebRTC } from 'vue-webrtc'
Vue.component(VueWebRTC.name, VueWebRTC)
// or
import { VueWebRTC } from 'vue-webrtc';
export default {
name: 'App',
components: {
'vue-webrtc': VueWebRTC
},
...
// template
<vue-webrtc ref="webrtc" width="100%" roomId="sample-room">
</vue-webrtc>
npm run serve
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 |
ioOptions | string | { rejectUnauthorized: false, transports: ['polling', 'websocket'] } | set Socket IO from here https://socket.io/docs/v4/client-options/ |
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 |
---|---|
3.0.1 | Added ioOptions for Socket IO |
3.0.0 | Migrated from Vue 2 to Vue 3 |
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 |
V3 of this component is a migration from Vue 2 to Vue 3. There is no new functionality yet. The older V2 will only be patched as needed and maintained as Vue 2.
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] .
vue create sample
cd sample
yarn install
npm install vue-webrtc --save
Now open the App.vue file and replace the HelloVue component with the code in the Usage section above.
npm run serve
See the /sample folder for a working project
Some 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:
FAQs
WebRTC video component for Vue 3
The npm package vue-webrtc receives a total of 74 weekly downloads. As such, vue-webrtc popularity was classified as not popular.
We found that vue-webrtc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.