所以我开始玩在这里找到的简单 mediasoup 演示:https ://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms
我设置了演示,一切正常。
我要做的第一件事是添加 url 参数以绕过登录屏幕,这应该很容易,对吧?但是由于某些原因,当您通过直接修改 url 参数导航到房间时,它不会显示房间中其他用户的远程流!当用户使用登录表单加入房间时,它会显示房间中其他用户的流。
这让我感到困惑,因为无论您单击登录表单上的“加入”按钮,还是您的 url 已经存在参数,都在执行完全相同的 js 方法!
这里我将演示执行流程:
最初,我们有 1 个用户在 123 房间共享网络摄像头。第二个用户导航到没有相关参数的 url,因此,他们会看到登录表单:
检查详细信息后,用户意识到默认设置很好,然后继续单击加入按钮。这会调用一个简单的函数,通过更新 window.location.href 将房间和用户值添加到 URL(它会导致页面刷新)
页面刷新完成后,会出现必要的参数,这会导致视频室加载并显示远程流,如下所示:
但是,当我们不通过表单登录时,就会出现问题,我们直接将那些必要的参数添加到 url 中。如图所示: 这里应该有一个远程流,因为它与上图中的房间相同。我不知道为什么会出现这个问题。
这是我的 index.js 文件,我的更改都在斜杠内,靠近文件底部:
if (location.href.substr(0, 5) !== 'https')
location.href = 'https' + location.href.substr(4, location.href.length - 4)
const socket = io()
let producer = null;
nameInput.value = 'bob' + Math.round(Math.random() * 1000)
socket.request = function request(type, data = {}) {
return new Promise((resolve, reject) => {
socket.emit(type, data, (data) => {
if (data.error) {
reject(data.error)
} else {
resolve(data)
}
})
})
}
let rc = null
function joinRoom(name, room_id) {
if (rc && rc.isOpen()) {
console.log('already connected to a room')
} else {
rc = new RoomClient(localMedia, remoteVideos, remoteAudios, window.mediasoupClient, socket, room_id, name, roomOpen)
addListeners()
}
}
function roomOpen() {
login.className = 'hidden'
reveal(startAudioButton)
hide(stopAudioButton)
reveal(startVideoButton)
hide(stopVideoButton)
reveal(startScreenButton)
hide(stopScreenButton)
reveal(exitButton)
control.className = ''
reveal(videoMedia)
}
function hide(elem) {
elem.className = 'hidden'
}
function reveal(elem) {
elem.className = ''
}
function addListeners() {
rc.on(RoomClient.EVENTS.startScreen, () => {
hide(startScreenButton)
reveal(stopScreenButton)
})
rc.on(RoomClient.EVENTS.stopScreen, () => {
hide(stopScreenButton)
reveal(startScreenButton)
})
rc.on(RoomClient.EVENTS.stopAudio, () => {
hide(stopAudioButton)
reveal(startAudioButton)
})
rc.on(RoomClient.EVENTS.startAudio, () => {
hide(startAudioButton)
reveal(stopAudioButton)
})
rc.on(RoomClient.EVENTS.startVideo, () => {
hide(startVideoButton)
reveal(stopVideoButton)
})
rc.on(RoomClient.EVENTS.stopVideo, () => {
hide(stopVideoButton)
reveal(startVideoButton)
})
rc.on(RoomClient.EVENTS.exitRoom, () => {
hide(control)
reveal(login)
hide(videoMedia)
/////////////////////////
let indexOfQuestionMark = location.href.indexOf("?")
location.href = location.href.split('').slice(0, indexOfQuestionMark-1).join('')
/////////////////////////
})
}
// Load mediaDevice options
navigator.mediaDevices.enumerateDevices().then(devices =>
devices.forEach(device => {
let el = null
if ('audioinput' === device.kind) {
el = audioSelect
} else if ('videoinput' === device.kind) {
el = videoSelect
}
if(!el) return
let option = document.createElement('option')
option.value = device.deviceId
option.innerText = device.label
el.appendChild(option)
})
)
/////////////////////////
if (window.location.href.includes("?r=") && window.location.href.includes("n=")) {
let indexOfRoomNumber = location.href.indexOf("?r=")+3
let array = location.href.split('')
let room = array.slice(indexOfRoomNumber,indexOfRoomNumber+3).join("")
let username = array.slice(indexOfRoomNumber+6, array.length).join("")
joinRoom(username,room)
console.log(`Welcome to room: ${room}, ${username}`)
}
function addParams(name, room_id) {
window.location.href = `${location.href}?r=${room_id}+n=${name}`
}
//////////////////////////
addParams 函数由 index.html 中的 Join 按钮直接调用,如下所示:
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script src="modules/mediasoupclient.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>
<script src="RoomClient.js"></script>
<style>
.containers {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 1fr);
grid-template-rows: repeat(auto-fit, 300px);
}
.container {
display: flex;
}
.vid {
flex: 0 1 auto;
height: 400px;
}
.settings {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer;
}
.hidden {
display: none
}
</style>
</head>
<body>
<div id="login">
Room: <input id="roomidInput" value="123" type="text" />
<!--<button id="createRoom" onclick="createRoom(roomid.value)" label="createRoom">Create Room</button>-->
<br />
User: <input id='nameInput' value="bob" type="text" />
<button id='joinButton' onclick="addParams(nameInput.value, roomidInput.value)">Join</button>
</div>
<div id="control" class="hidden">
<button id='exitButton' class='hidden' onclick="rc.exit()">Exit</button>
<br/>
audio: <select id="audioSelect">
</select>
<br/>
video: <select id="videoSelect">
</select>
<br />
<button id='startAudioButton' class='hidden' onclick="rc.produce(RoomClient.mediaType.audio, audioSelect.value)">audio</button>
<button id='stopAudioButton' class='hidden' onclick="rc.closeProducer(RoomClient.mediaType.audio)">close
audio</button>
<button id='startVideoButton' class='hidden' onclick="rc.produce(RoomClient.mediaType.video, videoSelect.value)">video</button>
<button id='stopVideoButton' class='hidden' onclick="rc.closeProducer(RoomClient.mediaType.video)">close
video</button>
<button id='startScreenButton' class='hidden' onclick="rc.produce(RoomClient.mediaType.screen)">screen</button>
<button id='stopScreenButton' class='hidden' onclick="rc.closeProducer(RoomClient.mediaType.screen)">close
screen</button>
<br />
</div>
<div id='videoMedia' class='hidden'>
<h2>------local------</h2>
<div id="localMedia"></div>
<!--<video id="localVideo" autoplay inline class="vid"></video>-->
<!--<video id="localScreen" autoplay inline class="vid"></video>-->
<h2>-----remote-----</h2>
<div id="remoteVideos" class="container">
</div>
<div id="remoteAudios"></div>
</div>
</body>
<footer>
<script src="index.js"></script>
</footer>
</html>
请注意:我修改的唯一文件是上面提到的那些。所有其他文件与演示的 github 存储库中的相同(链接在本文顶部。)
如果有人能帮助我深入了解这个问题,我将不胜感激。如果有 url 参数是什么导致房间被加入,为什么将参数放在 URL 中的方法似乎产生了如此显着的差异?
感谢您的时间和您可能提供的任何帮助!:)