Skip to content

Instantly share code, notes, and snippets.

@stephenlb
Last active August 31, 2020 21:34
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stephenlb/edd4b0c218a72a34349baa004a80fd7a to your computer and use it in GitHub Desktop.
Save stephenlb/edd4b0c218a72a34349baa004a80fd7a to your computer and use it in GitHub Desktop.
WebRTC on localhost and HTTPS answer for StackOverflow http://stackoverflow.com/a/41969170/524733 - you must run an HTTPS server even on localhost.
<!DOCTYPE html>
<html>
<form id='loginForm'>
<input id='username' placeholder='Pick a username!' />
<input type='submit' value='Log In'>
</form>
<form id='callForm'>
<input id='number' placeholder='Enter user to dial!' />
<input type='submit' value='Call'/>
</form>
<form id='hangupForm'>
<input type='submit' value='Hangup'>
</form>
<div id='vid-box'></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.pubnub.com/pubnub.js'></script>
<script src='https://stephenlb.github.io/webrtc-sdk/js/webrtc.js'></script>
<script>(function(){
let phone = null;
const vidbox = $('#vid-box');
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Form Login
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
$('#loginForm').submit( event => {
if (phone) phone.hangup();
else phone = PHONE({
number : $('#username').val() || 'Anonymous'
, ssl : true
, publish_key : 'pub-c-655853ec-bdb3-434f-9b37-8a2557301b1c'
, subscribe_key : 'sub-c-197667e6-e806-11e6-a5f4-02ee2ddab7fe'
});
phone.debug( info => { console.log(info) } );
phone.unable( error => { alert('unable to connect') } );
phone.ready( session => {
$('#username').css( 'background', '#55ff5b' );
} );
phone.receive(function(session){
session.ended( session => { vidbox.html('') } );
session.connected( session => {
vidbox.append(session.video);
});
});
return false;
} );
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Form Call
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
$('#callForm').submit( event => {
if (!window.phone) alert('Login First!');
else phone.dial($('#number').val());
return false;
} );
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Form Hangup
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
$('#hangupForm').submit( event => {
if (phone) phone.hangup();
return false;
} );
})();</script>
</html>
@stephenlb
Copy link
Author

webrtc-demo

@bergfenix
Copy link

Don't work more :(

@andhicapratama
Copy link

yes, it didn't work. it's alwys show login first, and i've already login

@danylokiz
Copy link

@andhicapratama, I do agree. Why?

@mircobabini
Copy link

line 52, add:

window.phone = phone;

@aakashgupta28
Copy link

This code is not working. please provide alternate solution.
i have already add "window.phone=phone" in line 52, login issue resolved but video calling is not working

@moumen10
Copy link

thank you but i want use this application without internet pleas help me.

@stephenlb
Copy link
Author

internet required for this to work. a STUN server is in use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment