I'm trying to build my first WebRTC app by following a PubNub tutorial (https://www.pubnub.com/blog/2015-08-25-webrtc-video-chat-app-in-20-lines-of-javascript/); however, it has failed to work at all. I'm fairly new to programming so any help would be greatly appreciated. Below is my code. Please note that I have created an account and have my own "pub" and "sub", which I have inserted appropriately.
<!DOCTYPE html>
<html>
<div id="vid-box"></div>
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
<input type="text" name="username" id="username" placeholder="Pick a username!" />
<input type="submit" name="login_submit" value="Log In">
</form>
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
<input type="text" name="number" placeholder="Enter user to dial!" />
<input type="submit" value="Call"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script src="js/webrtc.js"></script>
<script type="text/javascript">
var video_out = document.getElementById("vid-box");
function login(form) {
var phone = window.phone = PHONE({
number : form.username.value || "Anonymous", // listen on username line else Anonymous
publish_key : 'MY OWN PUB KEY',
subscribe_key : 'MY OWN SUB KEY',
});
phone.ready(function(){ form.username.style.background="#55ff5b"; });
phone.receive(function(session){
session.connected(function(session) { video_out.appendChild(session.video); });
session.ended(function(session) { video_out.innerHTML=''; });
});
return false; // So the form does not submit.
}
function makeCall(form){
if (!window.phone) alert("Login First!");
else phone.dial(form.number.value);
return false;
}
</script>
</html>
WebRTC running on localhost HTTPS
You are looking to run your WebRTC demo locally on your laptop using localhost. You must use HTTPS. Here is a GIF video of your demo working using a locally secured webserver (included!). We cleaned up your video DOM/jQuery code and also corrected a few errors. You can find the HTML source for WebRTC Source Code on GitHub Gists.
Run WebRTC Demo Locally
These terminal commands will download the html file to your local box, create a PEM key for TLS crypto and run a local HTTPS server using Python.
curl https://gist.githubusercontent.com/stephenlb/edd4b0c218a72a34349baa004a80fd7a/raw/1b28c5e39db0d5eaabc10006cede0a8825b9afd4/webrtc-demo.html > webrtc-demo.html
python <(curl -L https://gist.githubusercontent.com/stephenlb/2e19d98039469b9d0134/raw/5afefc79647e0786097ca3406dbf93c5de919aed/https.py)
Then open and accept the local HTTPS connection (agree to unknown root CA warning).
open https://0.0.0.0:4443/webrtc-demo.html
Run the above command to test the demo.
Reference Links for WebRTC
来源：https://stackoverflow.com/questions/41935178/cannot-get-pubnub-webrtc-tutorial-to-work