Last active
December 3, 2019 02:07
-
-
Save 1000ch/8054185 to your computer and use it in GitHub Desktop.
WebRTC video chat with PeerJS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(global) { | |
| // Compatibility | |
| navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; | |
| var peerClient; | |
| var currentPeerConnection; | |
| var localMediaStream; | |
| $(function() { | |
| var $myselfId = $('#js-myself-id'); | |
| var $peerId = $('#js-peer-id'); | |
| var $partnerId = $('#js-partner-id'); | |
| var $open = $('#js-open'); | |
| var $connect = $('#js-connect'); | |
| var videoMyself = document.querySelector('#js-video-myself'); | |
| var videoPartner = document.querySelector('#js-video-partner'); | |
| navigator.getUserMedia({video: true, audio: true}, function(stream) { | |
| videoMyself.src = URL.createObjectURL(stream); | |
| videoMyself.play(); | |
| localMediaStream = stream; | |
| }); | |
| $open.on('click', function(e) { | |
| // create peer object | |
| var myselfId = $myselfId.val(); | |
| peerClient = new Peer(myselfId, { | |
| key: '0c3244yhqia4i' | |
| }); | |
| // if peer connection is opened | |
| peerClient.on('open', function() { | |
| $peerId.html(peerClient.id); | |
| }); | |
| peerClient.on('call', function(call) { | |
| // answer with my media stream | |
| call.answer(localMediaStream); | |
| // close current connection if exists | |
| if (currentPeerConnection) { | |
| currentPeerConnection.close(); | |
| } | |
| // keep call as currentPeerConnection | |
| currentPeerConnection = call; | |
| // wait for partner's stream | |
| call.on('stream', function(stream) { | |
| videoPartner.src = URL.createObjectURL(stream); | |
| videoPartner.play(); | |
| }); | |
| // if connection is closed | |
| call.on('close', function() { | |
| console.log('Connection is closed.'); | |
| }); | |
| }); | |
| // disable id input | |
| $myselfId.attr('disabled', 'disabled'); | |
| // enable partner id input | |
| $partnerId.removeAttr('disabled'); | |
| // enable connect button | |
| $connect.removeAttr('disabled'); | |
| }); | |
| $connect.on('click', function(e) { | |
| // if peerClient is not initialized | |
| if (!peerClient) { | |
| return; | |
| } | |
| // connect to partner | |
| var partnerId = $partnerId.val(); | |
| var call = peerClient.call(partnerId, localMediaStream); | |
| // close current connection if exists | |
| if (currentPeerConnection) { | |
| currentPeerConnection.close(); | |
| } | |
| // keep call as currentPeerConnection | |
| currentPeerConnection = call; | |
| // wait for partner's stream | |
| call.on('stream', function(stream) { | |
| videoPartner.src = URL.createObjectURL(stream); | |
| videoPartner.play(); | |
| }); | |
| // if connection is closed | |
| call.on('close', function() { | |
| console.log('Connection is closed.'); | |
| }); | |
| }); | |
| }); | |
| })(this); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta chatset='utf-8'> | |
| <title>WebRTC Video Chat</title> | |
| </head> | |
| <body> | |
| <div> | |
| <input type='text' id='js-myself-id' placeholder='Input your ID'> | |
| <span id='js-peer-id'></span> | |
| <button id='js-open'>Open</button> | |
| <input disabled type='text' id='js-partner-id' placeholder='Input partner ID'> | |
| <button disabled id='js-connect'>Connect</button> | |
| </div> | |
| <div> | |
| <video id='js-video-myself'></video> | |
| </div> | |
| <div> | |
| <video id='js-video-partner'></video> | |
| </div> | |
| <script src='lib/jquery.min.js'></script> | |
| <script src='lib/peer.js'></script> | |
| <script src='app.js'></script> | |
| </body> | |
| </html> |
i tried these two files on codepen and on my site, and not working. thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks for that but you haven't a complet project