westonsoftware / vue-webrtc

WebRTC video component for Vue.js

vue-webrtc

WebRTC component designed for Vue 3 ... See the DEMO

See this for browser compatibility.

Installation

npm install vue-webrtc --save

Usage

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>

Testing & Dev

npm run serve

Props

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/

Events

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

Methods

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

Styles

.video-list

.video-item

History

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

Upgrading from V2 to V3

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.

Upgrading from V1 to V2

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] .

Quick Start with Vue CLI

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

Roadmap

Some features that we would like to see added are:

• Chat component
• Audio selection
• WebRTC data events

Let us know what you'd like to see next and vote for a feature.

License

MIT

Credits

Author: @AndyWeston on GitHub at vue-webrtc

This project is based off of:

SimplePeer

SimpleSignal

vue-webrtc's Issues

can't join room, joined-room event not firing

My apologies if I'm just missing something here, but when I set up the Vue project you outline on the project's github page, I am unable to join a room and the joined-room event does not fire. I am not seeing any console errors coming from the join method. I've even copied and pasted in the code from your demo page (which does work) and it still isn't working.

I first noticed the issue while going through this LinkedIn Learning course, which includes your vue-webrtc component. If I pull down webrtc's demos, I can run them just fine.

You can see a live, unstyled version of the demo I've recreated here. I've dug through the component code a bit but I'm not familiar with a lot of this functionality, so I thought I'd leave it to the pros! Thanks!

Mac OS 11.2.3
Chrome v90/Safari 14

TURN server error

Describe the bug

i have TURN server but it does not work ...
every one just only see him/her self...
DEMO is here

error while second person join to room...

To Reproduce
Steps to reproduce the behavior:
if 3 person exists in the room, i should see 3 video stream...

Screenshots

Desktop (please complete the following information):

• OS: win 10
• Browser Chrome
• Version 92

Smartphone (please complete the following information):

• Device: IPHONE11
• OS: IOS 14.6
• Browser Chrome

Uncaught Reference Errors Breaking App

Describe the bug
The application breaks and reverts to blank white page when adding vue-webrtc to project, the console gives back
Uncaught ReferenceError: global is not defined
at vue-webrtc.esm.js:837:18

Which is just this line
var globalThis = global;

To Reproduce
Steps to reproduce the behavior:

1. create new vue/ts project with npm init vite@latest
2. cd to new project and install vue-webrtc via npm i 'vue-webrtc', also install rest of deps with npm i
3. edit main.ts with VueWebRTC import and add component to app
4. run project with npm run dev
5. See error, check console to see global not defined error

Expected behavior
A working App. To see the Vue+Vite default page

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 114.0.5735.134 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
I can remedy the global issue by including a tag in the head of project that includes var global = window.global. But then I get hit with the same error but for Buffer is not defined.

does not load when clicking join

I am following the demo but it does not work.

desktop sharing without webcam

i want use desktop sharing ...
but i forced to use webcam!
i disconnect my webcam, can not joined room

MediaStreamError

I use docker image for signaling server from leejoneshane/webrtc running by
docker run -p 9001:9001 leejoneshane/webrtc
In my Vue template:

          <vue-webrtc ref="webrtc"
                      width="100%"
                      roomId="roomId"
                      socket-u-r-l="http://localhost:9001/"
                      @error="onError" />

After call join room i see this in browser console:

socket.io is connected at:  http://localhost:9001/ RTCMultiConnection.js:58:16
socket.io connection is opened. RTCMultiConnection.js:317:16
MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraint: "", stack: "" }

If i use default server - i see same error.

error "Requested device not found"

First of all, Thank you for the Great work!

I have installed it on my project and added it at Two Places. At One Place it's working fine, but in Other Place, it's giving me the "Requested device not found" error, even if I have the same network, same browser,

Please help here.

Thank you!

For some reason even after your fix, the 2.00 version still does not work on vue2

For some reason even after your fix, the 2.00 version still does not work on vue2
thanks

problem library - you only see yourself without the participation of your partner who also opened a camera

Hi, there's a problem with the library.
I have been using it for a year and it worked great but suddenly a problem started-
For some reason when you open the camera, you only see yourself without the participation of your partner who also opened a camera.

"ReferenceError: Can't find variable: global" on latest version of vue3

Hey there, im experiencing a bug on the latest version on vue.
Here the call stack.

Steps to reproduce the behavior:
I just created a simple app:
main.js

import { createApp } from 'vue'
import { VueWebRTC } from 'vue-webrtc'
import App from './App.vue'

createApp(App).component(VueWebRTC.name, VueWebRTC).mount('#app')

App.vue

<script setup>
  import Demo from "./components/Demo.vue";
</script>

<template>
  <Demo></Demo>
</template>

<style>
</style>

components/Demo.vue

<script setup>
</script>

<template>
    <vue-webrtc ref="webrtc" width="100%" roomId="sample-room"></vue-webrtc>
</template>

<script>
export default {
}
</script>

<style>
</style>

I go npm run dev
and I got a crash stating : ReferenceError: Can't find variable: global

Using:

• macos
• safari
• Version 15.4 (17613.1.17.1.13)

Error join

Hi, I am using vue2 and I have the error when clicking join.

how record video and audio to media file and save it in storage

how can I record video and audio for all peers and save it as mp4 file to upload it to cloud service such as GCP or AWS

Feature request: Screen sharing and audio only mode

Great work! Easy to use. I will be using it in my website.

1. Camera selection for screen sharing
2. Audio only option for voice call

not play remote video

`left-room` event is not being emitted or triggered on leave

Describe the bug
Attaching a method to <vue-webrtc v-on="myMethod", "myMethod" method never gets called. v-on:joined-room works correctly.

I was doing your (incorrectly assumed you were the author of the linkedin video "Building a Video Chat App with Vue.js and Firebase" so I apologize for that, but i am still having the issue) linkedin/learning tutorial on making a video-chat app with vue and firebase, and I've been trying to figure out why my leave button click doesn't complete all the way. The video exits but the webRTCID never gets cleared. I believe that I have narrowed it down to the left-room event just not happening.

The joined-room event works correctly and is fired, for example after calling this.$refs.webrtc.join(). But after calling this.$refs.webrtc.leave() the video goes away but there's never a left-room event raised.

Additionally, when adding :enableLogs="true" to vue-webrtc, logs show for joining a room, but nothing shows when trying to leave a room

To Reproduce
Steps to reproduce the behavior:

1. Isolate the sample project here
2. in App.vue add @left-room="logEvent" to vue-webrtc dom element.
3. add button to dom with @click="leaveRoom"
4. add to app:

methods: {
    leaveRoom: function () {
      this.$refs.webrtc.leave();
    },
    logEvent: function (event) {
      console.log(`Event: ${event}`);
    },
  },

3. click leave button
4. See video exits, see no event in console.log

alternatively,

1. get the finished video-chat code as provided by the linked.in/learning video
2. run the server
3. create / login user
4. create room / click join
5. click leave
6. see that the podcast glyph is still green, indicating that webRTCID for the user was not cleared

Expected behavior
I expected that left-room to be raised so that I could use it clean up the user on the client's side

Screenshots


on joining, both the joining webrtc and got join event can both be seen in the console.
however, on leaving only the leaving webrtc can be seen

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox / Chrome
• Version 82.02 / 86.0.4240.111
• vue-webrtc 1.2.2

Additional context
Add any other context about the problem here.

Help

Hi @westonsoftware please help, tried using the package with laravel and vue. Seems the component is registered but nothing appears

error "io" is not defined

This dependency issue is causing compile errors ...
https://github.com/muaz-khan/RTCMultiConnection/issues/620

As a workaround, try adding this until we get it fixed:

import * as io from 'socket.io-client'
window.io = io

How to use vue-webrtc only for audio

How to use vue-webrtc only for audio multiple connections.
Such like that ..
https://rtcmulticonnection.herokuapp.com/demos/audio-conferencing.html

How to ban (make a specific user to leave from the room) a user...?

First of all, I always appreciate for your great works.

I have a question that...

Is there any method which makes a user (not me) to leave from the connection...?

Something like...

this.$refs.webrtc.leave( [ videoList.key ] )

I've tried to analyse this.$refs.webrtc, but I couldn't find the way.

Server error? cannot connect to peer

Describe the bug
I'm using the demo site:
https://westonsoftware.github.io/vue-webrtc/

but when I joined with two different divice into same room in same time, both can't see the other

To Reproduce
Steps to reproduce the behavior:

1. Go to 'DEMO' with two different divice into same room in same time
2. Click on 'JOIN'
3. See error

Expected behavior
They shoud see each other

Desktop (please complete the following information):

• OS: MacOS Ventura 13.0.1
• Browser chrome
• Version 108.0.5359.124

Smartphone (please complete the following information):

• Device: iphone 8
• OS: iOS 16.2
• Browser: safari

Nuxt

Would this package work with nuxt 2 or nuxt 3?

Allow the component to use STUN and TURN servers.

Propose adding an options property that matches the underlying RTCMultiConnection settings.
https://www.rtcmulticonnection.org/docs/iceServers/

Add in a livechat feature that uses RTCMultipleConnection

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Uncaught ReferenceError: global is not defined

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Sample only works on localhost, not on "my-local-ip"

Hi!

Steps:
$ git clone https://github.com/westonsoftware/vue-webrtc
$ cd vue-webrtc/sample/
$ yarn install
$ yarn serve

http://localhost:8080/ -> shows webcam image

http://192.168.0.43:8080/ -> only shows the Vue logo and, on webconsole: "Uncaught TypeError: navigator.getUserMedia is not a function"

Thanks!
Mauricio

Chrome loading

Describe the bug
Chrome not load second connection

To Reproduce
Steps to reproduce the behavior:

1. Join to public room
2. Then join with another mobile on the same channel

Expected behavior
It should shows 2 camera but show the first

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Working good
Smartphone (please complete the following information):

• Device: [samsung]
• OS: [android]
• Browser [chrome ]
• Version 83.0.4

Where do I put the Import import Vue from 'vue' import WebRTC from 'vue-webrtc'

I don't know where this should be placed in my vue application

add option for io

could you add custome options for io like {path:'/subdir/socket.io'} and etc

this.socket = io(this.socketURL, { -------custome options------- });

turn on video after joined room with video off

When i enter the room with the param enableVideo = false, and need to active video, nothing happens.

Also i can do the opposite, when i enter the room with enableVideo = true, i can turn off by accessing the DOM stream and disable/enable the track. But i like to enter the room with video off.

Vue3 Support

Recently I have been working on a Vue 3 web interface using Quasar framework and came across this project. Unfortunately it seems specific to Vue 2 only (unless I am missing something, I am very new to this).

Support for Vue 3 would be amazing.

I have attempted porting the code into a Vue 3 project but it's like peeling an onion and am currently stuck on creating the SimpleSignalClient (not a constructor TypeError). If I am mistaken and this should work in Vue 3 I'd very much appreciate an assist.

Thanks!

Vue 3

Hi.

What do I need to do for vue-webrtc to work on Vue 3?

Thanks!
Mauricio

I can't get it to work on my project

First, thanks for the nice work i installed npm and imported all this code in main.js

import Vue from 'vue'
import WebRTC from 'vue-webrtc'
Vue.use(WebRTC)

and inserted  
<vue-webrtc width="100%" roomId="roomId">
</vue-webrtc> in my page

but nothing happens, do not load the plugin

Template not displaying

Hi i have installed library in vue js. Its installed successfully. I have added the code of template.

But nothing is displayed on page and also no error. Kindly help me I have followed all steps,installed library,added in template like explained but page is not showing any thing

turn off video or mute microphone in a live call

How can turn off the video and mute the microphone in a live call, if I change enableAudio , enableVideo dynamically in live call it doesn't work.

index.js:9493 Uncaught (in promise) DOMException: Requested device not found

when i click "join" not work and the following error message appears in the picture, help me, thank you .

what backend socket server do I need for this?

I see this in the code base, but I want to host a socket server myself.

https://rtcmulticonnection.herokuapp.com:443/

Will the new version (after the fix) work in vue2 as well?

Will the new version (after the fix) work in vue2 as well?

How to build demo?

This project is a great job for me to learn WebRTC, when I use demo I found I do not know how to build demo. Thank for your help!

Steps to move from localhost to https://www.something.com

Hi All,

If anyone tried the demo using https instead of localhost, please kindly write down the procedures for the others, thank you.

This is what I've done in my ubuntu 18.04:

1. Go to Home directory

cd ~

2. Create a directory called 'vue'

mkdir vue
cd vue

3. Clone the vue-webrtc project

git clone https://github.com/westonsoftware/vue-webrtc.git

4. change the name of the directory

mv vue-webrtc vue-webrtc_proj
cd vue-webrtc_proj

5. modify the name of the project in package.json, from vue-webrtc to vue-webrtc_proj
   Use gedit or other text editor:

gedit package.json

Then replace the second line with the line below:

  "name": "vue-webrtc_proj",

6. Install the vue-webrtc: (You can't install vue-webrtc if you don't rename your project directory)

npm install vue-webrtc --save

7. Build the Demo

npm run-script builddemo

8. Run the Demo

npm run-script demo

Then a browser will be opened automatically, the url is http://localhost:8080 and the demo page will be shown.

And my problem is, say I have a domain name, e.g. www.abc.com, and already got certificates from letsencrypt, what should I do in order to run the demo using url:

https://www.abc.com

Thank you.

Code examples

Hi there! Would you be able to provide a few code examples? Also, would you interested in collaborating for a startup? We are building something pretty cool! Thanks!

I can't use WebRTC!

Now I'm using vue3

I wanted to use WebRTC and installed version 3.0.1. but it doesn't fit my project. what could be the error

Limit Video chat to one Broadcaster

Is your feature request related to a problem? Please describe.
Hi @westonsoftware plus one on this package and I am so much liking it. I have this feature which I want only one user to be able to broadcast and the others join in but their cameras are not turned on. I wish to have a one on many video chat like say one host and many users connecting to it say to listen the host show. I wish to know how to go about this feature thanks

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
I tried destroying the divs of streams created by the for loop but this doesn't solve the issue as the Camera of other users are still on

Additional context
Add any other context or screenshots about the feature request here.

width adjusting doesn't work

Describe the bug
Width of component does not adjust using attributes or styles.

To Reproduce
Set 'width' attribute to '100%'

Expected behavior
width of video component is changed

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 81

I wish you could help me with vue3 and thislibrary

thanks for all.
I started a new project in Vue3 and than - installed vue-webrtc.
I tried to run but for some reason I get an error that I have been trying to fix for a week and do not know how.
Maybe you know how to help?
This is the error:

ERROR in ./node_modules/vue-webrtc/dist/vue-webrtc.esm.js 7:0-42
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\rimir\WebstormProjects\tryingAgain\node_modules\vue-webrtc\dist'
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??

ERROR in ./node_modules/vue-webrtc/dist/vue-webrtc.esm.js 6:0-24
Module not found: Error: Can't resolve 'url' in 'C:\Users\rimir\WebstormProjects\tryingAgain\node_modules\vue-webrtc\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

thanks!!

Does it need to be in the same network...?

Thank you for your great code sharing, and I have a short question.
As I've tested the demo, it is working with the devices on the same network.
To make it to connect devices in efferent networks, what should I do more...?
Thank you very much for reading my question.

---

Just right after my question, I've slightly realized STUN, TURN, ICE & Signalling.
So, it seems I need to use TURN servers for the NAT issue.
BTW, what if there is already set TRUN server, how can I connect the server to my code...?

404 not found

Hello, I have a question. When I use the real IP address, I click "share screen" and 404 errors appear. Can you help me
? Thank you very much

Help

Hello, I'm starting with vue. Could you please provide a more detailed example of how to get started?
I did the installation, put the component but nothing appears on the screen.

In safari it isn't working. Tested on ios and os x.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

error "ERR_CONNECTION_TIMEOUT"

First of all, Thank you for the Great work!

But I am facing a weird issue here, I have installed it on my project and added it at Two Places. At One Place it's working fine., but in Other Place, it's giving me the "ERR_CONNECTION_TIMEOUT" error, even if I have the same network, same browser.

Is it related to Network Connection or something else?

Please help me here.

a very noise to play a audio conference

I want to use your component only for audio conference. I set video to false, but it seemed vuey noise under this condiction. I do not why! can you give me some help? Thanks!