westonsoftware / vue-webrtc Goto Github PK
View Code? Open in Web Editor NEWWebRTC video component for Vue.js
License: MIT License
WebRTC video component for Vue.js
License: MIT License
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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
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!
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:
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...
Desktop (please complete the following information):
Smartphone (please complete the following information):
Hi @westonsoftware please help, tried using the package with laravel and vue. Seems the component is registered but nothing appears
Hi.
What do I need to do for vue-webrtc to work on Vue 3?
Thanks!
Mauricio
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.
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:
Expected behavior
They shoud see each other
Desktop (please complete the following information):
Smartphone (please complete the following information):
could you add custome options for io like {path:'/subdir/socket.io'} and etc
this.socket = io(this.socketURL, { -------custome options------- });
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.
How to use vue-webrtc only for audio multiple connections.
Such like that ..
https://rtcmulticonnection.herokuapp.com/demos/audio-conferencing.html
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
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!!
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.
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.
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.
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.
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
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:
cd ~
mkdir vue
cd vue
git clone https://github.com/westonsoftware/vue-webrtc.git
mv vue-webrtc vue-webrtc_proj
cd vue-webrtc_proj
gedit package.json
Then replace the second line with the line below:
"name": "vue-webrtc_proj",
npm install vue-webrtc --save
npm run-script builddemo
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:
Thank you.
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!
Would this package work with nuxt 2 or nuxt 3?
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.
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...?
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
Great work! Easy to use. I will be using it in my website.
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
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.
I see this in the code base, but I want to host a socket server myself.
Describe the bug
Chrome not load second connection
To Reproduce
Steps to reproduce the behavior:
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):
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:
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):
Smartphone (please complete the following information):
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.
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:
App.vue
add @left-room="logEvent"
to vue-webrtc
dom element.@click="leaveRoom"
methods: {
leaveRoom: function () {
this.$refs.webrtc.leave();
},
logEvent: function (event) {
console.log(`Event: ${event}`);
},
},
alternatively,
webRTCID
for the user was not clearedExpected 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):
Additional context
Add any other context about the problem here.
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!
Propose adding an options property that matches the underlying RTCMultiConnection settings.
https://www.rtcmulticonnection.org/docs/iceServers/
For some reason even after your fix, the 2.00 version still does not work on vue2
thanks
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
I don't know where this should be placed in my vue application
i want use desktop sharing ...
but i forced to use webcam!
i disconnect my webcam, can not joined room
Will the new version (after the fix) work in vue2 as well?
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.
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!
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.