问题

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>

回答1:

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

WebRTC Source Code on GitHub Gists
Python HTTPS localhost Server on 127.0.0.1/0
WebRTC SDK Documentation

来源：https://stackoverflow.com/questions/41935178/cannot-get-pubnub-webrtc-tutorial-to-work

标签

javascript

html

webrtc

pubnub

Cannot get PubNub WebRTC tutorial to work

问题

回答1:

WebRTC running on localhost HTTPS

Run WebRTC Demo Locally

Reference Links for WebRTC