我用 rtcmulticonnection 建立了一个 webrtc 屏幕共享系统。
我将 ICE 服务器定义为：
信令服务器 - rtcmulticonnection
Stun - 谷歌 stun 服务器：stun.l.google.com:19302
转-我自己配置
connection.iceServers.push({ urls: 'turn:185.231.59.67:7878', credential: 'comcom12', username: 'amir' });
移动互联网系统无法接收或发送视频到其他网络，但移动网络和对称 nat 用户无法发送或接收他们的屏幕。
我应该实施什么解决方案，问题是什么？感恩的
我把我的代码放在下面
<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<div id="parent">
<div id='local'>
<div class='column'>
<h id="sta">Video:</h>
</div>
<div class='column' id="stac">
</div>
</div>
<div id="vid">
</div>
</div>
<style>
@font-face {
font-family: bnaz;
src: url("BNaznnBd.ttf");
}
video {
display: block;
width: 100%;
height: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
body {
direction: ltr;
background-color: #ffffff;
}
#vid {
direction: ltr;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}
</style>
<script>
var isrunning = false;
var isrunningVid = false;
function getUrlParam(param) {
param = param.replace(/([\[\](){}*?+^$.\\|])/g, "\\$1");
var regex = new RegExp("[?&]" + param + "=([^&#]*)");
var url = decodeURIComponent(window.location.href);
var match = regex.exec(url);
return match ? match[1] : "";
}
name = getUrlParam('name');
type = getUrlParam('type');
Id = getUrlParam('id');
isowner = getUrlParam('owner');
var password = getUrlParam('pass');
var connection = new RTCMultiConnection();
connection.autoCloseEntireSession = true;
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
connection.password = password;
connection.session = {
screen: true
};
connection.mediaConstraints = {
audio: true,
video: {
mandatory: {
minFrameRate: 30,
maxFrameRate: 30
},
optional: []
}
};
connection.iceServers = [];
// second step, set STUN url
connection.iceServers.push({
urls: 'stun.l.google.com:19302'
});
// last step, set TURN url (recommended)
connection.iceServers.push({
urls: 'turn:185.231.59.67:7878',
credential: 'comcom12',
username: 'amir'
});
connection.candidates = {
turn: true,
stun: false,
host: false,
};
connection.iceTransportPolicy = 'relay';
connection.sdpConstraints.mandatory = {
OfferToReceiveVideo: true
};
connection.extra = {
fullName: name,
type: type,
owner: isowner
};
var vid = document.getElementById('vid');
var div = document.getElementById('parent');
connection.onunmute = function (e) {
e.mediaElement.removeAttribute('poster');
}
connection.onmute = function (e) {
if (e.userid == connection.userid) {
return;
}
e.mediaElement.setAttribute('poster', 'ban.png');
}
connection.onleave = function (event) {
if (event.extra.owner == 'true') {
var remoteUserId = event.userid;
var div = document.getElementById(remoteUserId);
div.remove();
var bid = "b-local";
var blob = document.getElementById(bid);
blob.remove();
var sta = document.getElementById("sta");
sta.setAttribute('style', "color:red");
sta.innerHTML = "Screen: Disconnected due to end of class";
var blob = document.createElement('div');
blob.setAttribute('class', 'Rblob');
blob.setAttribute('id', 'b-local');
var stac = document.getElementById("stac");
stac.appendChild(blob);
return;
}
var remoteUserId = event.userid;
var div = document.getElementById(remoteUserId);
div.remove();
};
connection.onstream = function (event) {
if (event.userid !== connection.userid) {
var remoteUserId = event.userid;
var remoteUserExtra = event.extra;
var hisFullName = remoteUserExtra.fullName;
var hisEmail = remoteUserExtra.type;
}
// if (event.type === 'remote') {
// console.log('its here');
// var h1 = document.createElement('H');
// h1.innerHTML = "User : " + hisFullName + "|" + hisEmail;
// div.appendChild(h1);
// vid.appendChild(event.mediaElement);
// var list = document.getElementById("vid").firstElementChild;
// list.removeAttribute('controls');
// var hr = document.createElement('HR');
// div.appendChild(hr);
// }
if (event.type === 'remote') {
var audiom = event.mediaElement;
audiom.id = event.streamid;
var div = document.createElement('div');
var video = document.createElement('div');
div.setAttribute("id", remoteUserId);
vid.appendChild(div);
var h1 = document.createElement('H');
h1.innerHTML = "User : " + hisFullName + "|" + hisEmail;
var hr = document.createElement('HR');
div.appendChild(hr);
div.appendChild(h1);
div.appendChild(video);
video.appendChild(audiom);
var audio = document.getElementById(event.streamid);
audio.removeAttribute('controls');
}
return;
}
function Open() {
//check if room is empty
connection.checkPresence(Id, function (isRoomExist, roomid, error) {
if (isRoomExist == false) {
connection.open(Id);
var sta = document.getElementById("sta");
sta.innerHTML = "Screen: Connected";
var blob = document.createElement('div');
blob.setAttribute('class', 'blob');
blob.setAttribute('id', 'b-local');
var stac = document.getElementById("stac");
stac.appendChild(blob);
isrunning = true;
isrunningVid = true;
}
else {
console.log(error);
var sta = document.getElementById("sta");
sta.setAttribute('style', "color:red");
sta.innerHTML = "Screen: Failed - IRF:" + error._room.isFull;
var blob = document.createElement('div');
blob.setAttribute('class', 'Rblob');
blob.setAttribute('id', 'b-local');
var stac = document.getElementById("stac");
stac.appendChild(blob);
}
});
}
function Join() {
connection.join(Id, function (isJoined, roomid, error) {
if (isJoined === false) {
var sta = document.getElementById("sta");
sta.setAttribute('style', "color:red");
sta.innerHTML = "Screen: Failed - Err:" + error;
var blob = document.createElement('div');
blob.setAttribute('class', 'Rblob');
blob.setAttribute('id', 'b-local');
var stac = document.getElementById("stac");
stac.appendChild(blob);
}
else {
isrunning = true;
isrunningVid = true;
var sta = document.getElementById("sta");
sta.innerHTML = "Screen: Connected";
var blob = document.createElement('div');
blob.setAttribute('class', 'blob');
blob.setAttribute('id', 'b-local');
var stac = document.getElementById("stac");
stac.appendChild(blob);
}
});
};
function HandleScreen() {
if (isrunningVid) {
// connection.attachStreams[0].stop();
console.log('dah');
var firstRemoteStream = connection.streamEvents.selectFirst({ local: true }).stream;
firstRemoteStream.mute("video");
//connection.streamEvents.selectFirst('local').mediaElement.muted = true;
// connection.removeStream("screen");
isrunningVid = false;
}
else {
// connection.addStream({
// audio: true,
// screen: true
// });
console.log('dakh');
var firstRemoteStream = connection.streamEvents.selectFirst({ local: true }).stream;
firstRemoteStream.unmute("video");
//connection.streamEvents.selectFirst('local').mediaElement.muted=true;
//console.log(firstRemoteStream);
isrunningVid = true;
}
}
var wage = document.body;
wage.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
HandleScreen();
return;
}
});
if (getUrlParam('jop') == 'j') {
Join();
}
else if (getUrlParam('jop') == 'o') {
Open();
}
</script>
<style>
.blob {
background: green;
border-radius: 50%;
margin: 10px;
height: 20px;
width: 20px;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
.Rblob {
background: red;
border-radius: 50%;
margin: 10px;
height: 20px;
width: 20px;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
.Yblob {
background: yellow;
border-radius: 50%;
margin: 10px;
height: 20px;
width: 20px;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
</style>