P2P Video Chat with JavaScript / WebRTC
Why Stack Overflow recommends it
Stack Overflow users link it as the tutorial they followed when building WebRTC chat with simple-peer, and then ask about errors they hit while following it.
Recommended by 3 people across 3 different months, 2016 to 2020.
What it is
A short 2015 tutorial by Kyle Robinson Young that builds a simple peer-to-peer audio/video chat app in the browser using plain JavaScript and WebRTC, with the simple-peer library. It walks through getUserMedia, signaling data exchange and connecting two peers, and links to the code on GitHub.
What people said
Recommends Justin Reasoner · 2017-03 · Stack Overflow · on “Mic Input in Laravel”
I've had a run with [LINK] but I've not gotten to integrating it with laravel. It's documentation [LINK] on setting up video/voice was pretty clear to me as a start, but getting beyond that I'm not sure, this video [this video] is what helped me through it. var SimplePeer = require('simple-peer') // get video/voice stream navigator.getUserMedia({ video: true, audio: true }, gotMedia, function () {}) function gotMedia (stream) { var peer1 = new SimplePeer({ initiator: true, stream: stream }) var peer2 = new SimplePeer() peer1.on('signal', function (data) { peer2.signal(data) }) peer2.on('signal', function (data) { peer1.signal(data) }) peer2.on('stream', function (stream) { // got remote video str
Recommends Apal Shah · 2017-08 · Stack Overflow · on “How to send getusermedia recorded stream to server nodejs realtime”
You're using socket.io which uses TCP connection. If you want to make your application real-time something like skype, you must use UDP connection. If one frame lags behind then your application should ignore this but in your case you're using TCP connection so it will always deliver in order. Firewall is also an issue for TCP connection. You said that you tried setting up timeout to 500 ms which is too big for real-time application that's why your video is blinking. If you're willing to give up on TCP connection, I have a small solution for this. I've tried this and it is working fine. [this video] Just one problem is that in this case you cannot send your packets on WAN directly as you can easi
Recommends Arush Gupta · 2020-04 · Stack Overflow · on “Error in executing 'send' on 'RTCDataChannel' simple-peer”
I am trying out webrtc using the library, simple-peer. I am following this tutorial linked here [this video] on opera browser. I am facing this error when sending a small string of 'hello': Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open' at Peer.send ( [LINK] ) at HTMLButtonElement.<anonymous> ( [LINK] ) send @ index.js:241 (anonymous) @ index.js:21 Here is my index.js: var Peer = require('simple-peer') if (Peer.WEBRTC_SUPPORT) { console.log("Support"); peer = new Peer({ initiator: location.hash === '#1', trickle:true }) peer.on('signal', function (data) { document.getElementById('yourId').value = JSON.stringify(data) }) document.getEle
Cites Sébastien · 2016-10 · Stack Overflow · on “Simple-peer, Socket.IO, Laravel 5.3”
I'm trying to create a video conferencing system using Laravel 5.3, Socket.IO and Simple-Peer. I followed this tutorial : [this video] and everything worked, but now I want to automatize this. I want that when two users go to this kind of link : /vide-conference/some_video_conference_id, they get connected, so the video conference can begin. As far as I know, if I want a peer to send data to another one before they are connected, I need a signaling server. I'll use Socket.IO. But can you explain me clearly how can I have everything working with Laravel 5.3 ? I found an example here (not using laravel) : [LINK] , but it's talking about server side an client side code, and I don't understand becaus
Cites Johann Süß · 2020-02 · Stack Overflow · on “Failed to execute 'setRemoteDescription' on 'RTCPeerConnection'”
I am trying to set up a webrtc signaling service using SignalHub [LINK] and SimplePeer [LINK] . But when executing I get the following error: Uncaught (in promise) Error: InvalidStateError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: kStable . Here is the code: navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then((stream) => { const signalhub = require('signalhub') const hub = signalhub('live-video', [ ' [LINK] ' ]) const Peer = require('simple-peer') const peer = new Peer({ initiator: location.hash == '#init', trickle: false, stream: stream }) peer.on('signal', (data) => { let yourID = JSON.string
Cites Bishwa Timilsina · 2020-06 · Stack Overflow · on “Uncaught TypeError: navigator.webkitGetUserMedia is not a function”
I want to build video chatting website using WebRTC. I am using chrome chrome 83.0.4103.97. I have followed [this video] for this. But got the error in my browser. My code and error is below navigator.webkitGetUserMedia({ video: true, audio: false}, function(stream){ // }, function(err){ console.error(err) }) [LINK]
Cites user13751824 · 2020-07 · Stack Overflow · on “at Peer._onConnectionStateChange (index.js:660) at RTCPeerConnection.Peer._pc.onconnectionstatechange (index.js:122)”
I am making a simple peer to peer system from this YouTube video [this video] I have got the following code var Peer = require('simple-peer'); var peer = new Peer({ initiator: location.hash === "#init", trickle: false }) peer.on("signal", function(data){ document.getElementById('yourID').value = JSON.stringify(data); }) document.getElementById('connect').addEventListener("click", function(){ var otherID = JSON.parse(document.getElementById('otherID').value) peer.signal(otherID) }) document.getElementById('send').addEventListener("click", function(){ var yourMessage = document.getElementById('yourMessage').value peer.send(yourMessage); }) peer.on('data', function (data){ document.getElementById('m