好的，我正在做webRTC的教程，我一直在使用以下两个教程来帮助我。
Sitepoint tutorial和Scotch tutorial
首先要注意的是，对于第一个教程，即使是从github克隆的源代码：
https://github.com/sitepoint-editors/simplewebrtc-messenger.git
当我在Now.sh上部署应用程序时，它可以正常工作，但我无法加入不同的用户。
TLDR;
这是My Deployed App。当我尝试加入远程连接时，我收到此错误
未捕获的DOMException：无法构建＆＃39; RTCPeerConnection＆＃39;：＆＃39; stun.l.google.com＆＃39;不是支持的网址方案之一＆＃st;＆＃39;，＆＃39;转＆＃39;或者＆＃39;转身＆＃39;。
这是[源代码
<?php
namespace App\Http\Controllers;
use App\User;
use App\Address;
use Illuminate\Http\Request;
use App\Http\Requests;
use Auth;
class UserController extends Controller
{
public function deleteAddress(Request $request) {
$address_id = $request->input('address_id');
$address = Address::find($address_id);
if(!empty($address) && $address->user_id === Auth::user()->id){
// for security- to make sure the delete request is valid and coming from the owner of the address.
$address->delete();
}
return redirect()->back();
}
}
// Code goes here
let username, roomname;
// Determine whether or not we have a querystring.
function hasQueryString() {
console.log(location.href.indexOf("?"))
return location.href.indexOf("?") !== -1;
}
const formEl = $('.form');
// Enable video on the page.
function enableVideo() {
document.getElementById("url").style.display = "block";
document.getElementById("remotes").style.visibility = "visible";
loadSimpleWebRTC();
}
if (hasQueryString()) {
console.log("Query string!");
enableVideo();
if (formEl) {
formEl.hide();
}
} else if (formEl) {
formEl.show();
}
// Handle form submission
console.log("Form loaded!")
$("#join-btn").click(function (event) {
const formEl = $('.form');
var usernameInput = formEl.find('#inputUsername');
var roomnameInput = formEl.find('#inputRoomname');
if (usernameInput.length > 0 && !usernameInput[0].value) {
alert("Invalid username!")
} else if (roomnameInput.length > 0 && !roomnameInput[0].value) {
alert("Please enter a roomname");
} else if (roomnameInput.length > 0 && roomnameInput[0].value.length < 6) {
alert("Roomname must be longer than 5 characters!");
} else {
username = usernameInput[0].value;
roomname = roomnameInput[0].value.toLowerCase();
window.location = getRoomURL();
enableVideo();
}
return false;
})
// Determine the room name and public URL for this chat session.
function getRoom() {
if (roomname) {
return roomname;
} else {
var query = location.search && location.search.split("?")[1];
console.log(query);
if (query) {
console.log("roomname is:");
console.log((location.search && decodeURIComponent(query.split("=")[1]).toLowerCase()));
roomname = location.search && decodeURIComponent(query.split("=")[1]).toLowerCase();
return roomname;
}
}
roomname = "room" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
return roomname;
}
function getUser() {
if (username) {
return username;
} else return "User" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
// Retrieve the absolute room URL.
function getRoomURL() {
return location.protocol + "//" + location.host + (location.path || "") + "?room=" + getRoom();
}
// Dynamically load the simplewebrtc script so that we can
// kickstart the video call.
function loadSimpleWebRTC() {
var script = document.createElement("script");
script.src = "https://simplewebrtc.com/latest-v3.js";
document.head.appendChild(script);
script.onload = function () {
var webrtc = new SimpleWebRTC({
localVideoEl: "selfVideo",
// the id/element dom element that will hold remote videos
remoteVideosEl: "",
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false
});
// Set the publicly available room URL.
document.getElementById("roomUrl").innerText = getRoomURL();
// Immediately join room when loaded.
webrtc.on("readyToCall", function () {
webrtc.joinRoom(getRoom());
});
function showVolume(el, volume) {
if (!el) return;
if (volume < -45) volume = -45; // -45 to -20 is
if (volume > -20) volume = -20; // a good range
el.value = volume;
}
// Display the volume meter.
webrtc.on("localStream", function (stream) {
var button = document.querySelector("form>button");
if (button) button.removeAttribute("disabled");
document.getElementById("localVolume").style.display = "block";
});
// If we didn't get access to the camera, raise an error.
webrtc.on("localMediaError", function (err) {
alert("This service only works if you allow camera access.Please grant access and refresh the page.");
});
// When another person joins the chat room, we'll display their video.
webrtc.on("videoAdded", function (video, peer) {
console.log("user added to chat", peer);
var remotes = document.getElementById("remotes");
if (remotes) {
var outerContainer = document.createElement("div");
outerContainer.className = "col-md-6";
var container = document.createElement("div");
container.className = "videoContainer";
container.id = "container_" + webrtc.getDomId(peer);
container.appendChild(video);
// Suppress right-clicks on the video.
video.oncontextmenu = function () { return false; };
// Show the volume meter.
var vol = document.createElement("meter");
vol.id = "volume_" + peer.id;
vol.className = "volume";
vol.min = -45;
vol.max = -20;
vol.low = -40;
vol.high = -25;
container.appendChild(vol);
// Show the connection state.
if (peer && peer.pc) {
var connstate = document.createElement("div");
connstate.className = "connectionstate";
container.appendChild(connstate);
peer.pc.on("iceConnectionStateChange", function (event) {
switch (peer.pc.iceConnectionState) {
case "checking":
connstate.innerText = "connecting to peer...";
break;
case "connected":
case "completed": // on caller side
vol.style.display = "block";
connstate.innerText = "connection established";
break;
case "disconnected":
connstate.innerText = "disconnected";
break;
case "failed":
connstate.innerText = "connection failed";
break;
case "closed":
connstate.innerText = "connection closed";
break;
}
});
}
outerContainer.appendChild(container);
remotes.appendChild(outerContainer);
// If we're adding a new video we need to modify bootstrap so we
// only get two videos per row.
var remoteVideos = document.getElementById("remotes").getElementsByTagName("video").length;
if (!(remoteVideos % 2)) {
var spacer = document.createElement("div");
spacer.className = "w-100";
remotes.appendChild(spacer);
}
}
});
// If a user disconnects from chat, we need to remove their video feed.
webrtc.on("videoRemoved", function (video, peer) {
console.log("user removed from chat", peer);
var remotes = document.getElementById("remotes");
var el = document.getElementById("container_" + webrtc.getDomId(peer));
if (remotes && el) {
remotes.removeChild(el.parentElement);
}
});
// If our volume has changed, update the meter.
webrtc.on("volumeChange", function (volume, treshold) {
showVolume(document.getElementById("localVolume"), volume);
});
// If a remote user's volume has changed, update the meter.
webrtc.on("remoteVolumeChange", function (peer, volume) {
showVolume(document.getElementById("volume_" + peer.id), volume);
});
// If there is a P2P failure, we need to error out.
webrtc.on("iceFailed", function (peer) {
var connstate = document.querySelector("#container_" + webrtc.getDomId(peer) + " .connectionstate");
console.log("local fail", connstate);
if (connstate) {
connstate.innerText = "connection failed";
fileinput.disabled = "disabled";
}
});
// remote p2p/ice failure
webrtc.on("connectivityError", function (peer) {
var connstate = document.querySelector("#container_" + webrtc.getDomId(peer) + " .connectionstate");
console.log("remote fail", connstate);
if (connstate) {
connstate.innerText = "connection failed";
fileinput.disabled = "disabled";
}
});
}
}body {
font-family: 'Raleway', sans-serif;
}
footer {
text-align: center;
margin-top: 2em;
}
h2 {
font-style: italic;
}
header {
text-align: center;
margin: 4em;
}
header h1, header h2 {
display: inline;
}
header h1 a, header h2 a, header h1 a:hover, header h2 a:hover {
color: inherit;
text-decoration: none;
}
header h2 {
font-size: 24px;
padding-left: .5em;
}
#remotes {
visibility: hidden;
}
#url {
text-align: center;
display: none;
}
#login {
display: none;
}
#roomIntro {
font-weight: bold;
}
.videoContainer {
object-fit: cover;
margin: 0 auto;
padding: 0;
}
.videoContainer video {
width: 100%;
height: 100%;
border-radius: 10px;
border: 5px double #f2f2f2;
}
.volume {
position: absolute;
left: 15%;
width: 70%;
bottom: 20px;
height: 10px;
display: none;
}
.connectionstate {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
color: #fff
}
.col-md-6 {
margin-bottom: 1em;
}
关于我做错什么的任何想法??
答案 0 :(得分：0)
使用：
stun:stun.l.google.com:19302
服务器URL中应该有stun并指示端口号。
答案 1 :(得分：0)
好的，显然整周都有一些问题与simpleWebRTC的Sandbox signalling server有关，他们也建议您使用自己的信令服务器。
所以我找到了XirSys xsdk platform并按照他们的simpleWebRtc示例和BOOM！它有效。