无法使用 PubNub WebRTC 教程 [英] Cannot get PubNub WebRTC tutorial to work
问题描述
我正在尝试按照 PubNub 教程(
上运行在本地运行 WebRTC 演示
这些终端命令会将 html 文件下载到您的本地框，为 TLS 加密创建 PEM 密钥并使用 Python 运行本地 HTTPS 服务器.
curl https://gist.githubusercontent.com/stephenlb/edd4b0c218a72a34349baa004a80fd7a/raw/1b28c5e39db0d5eaabc10006cede0a8825b9afd4/webrtc-dewebrtc-demo.htmlpython <(curl -L https://gist.githubusercontent.com/stephenlb/2e19d98039469b9d0134/raw/5afefc79647e0786097ca3406dbf93c5de919aed/https.py)然后打开并接受本地 HTTPS 连接(同意未知根 CA 警告).
打开 https://0.0.0.0:4443/webrtc-demo.html运行上面的命令来测试演示.
WebRTC 参考链接
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
- WebRTC Source Code on GitHub Gists
- Python HTTPS localhost Server on 127.0.0.1/0
- WebRTC SDK Documentation
这篇关于无法使用 PubNub WebRTC 教程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
