首页 > 编程语言> > javascript-无法使PubNub WebRTC教程正常工作

javascript-无法使PubNub WebRTC教程正常工作

2019-10-14 01:40:47 作者：互联网

我正在尝试通过遵循PubNub教程(https://www.pubnub.com/blog/2015-08-25-webrtc-video-chat-app-in-20-lines-of-javascript/)来构建我的第一个WebRTC应用程序；但是,它根本无法工作.我是编程的新手,所以将不胜感激.下面是我的代码.请注意,我已经创建了一个帐户,并拥有自己的“ pub”和“ sub”,并已在其中适当插入.

<!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>

解决方法:

在本地HTTPS上运行的WebRTC

您希望使用本地主机在笔记本电脑上本地运行WebRTC演示.您必须使用HTTPS.这是您的演示的GIF视频,演示使用本地安全的Web服务器(包含！).我们清理了您的视频DOM / jQuery代码,并更正了一些错误.您可以找到WebRTC Source Code on GitHub Gists的HTML源.

在本地运行WebRTC演示

这些终端命令将html文件下载到本地框中,为TLS加密创建PEM密钥,并使用Python运行本地HTTPS服务器.

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)

然后打开并接受本地HTTPS连接(同意未知的根CA警告).

open https://0.0.0.0:4443/webrtc-demo.html

运行以上命令以测试演示.

WebRTC的参考链接

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

标签：html,pubnub,javascript,webrtc
来源： https://codeday.me/bug/20191014/1911807.html