[英]WebRTC video chat end call button
我有一個視頻聊天應用程序,我正在嘗試向其添加 UI 控件。 我在使用結束通話按鈕時遇到問題。 我可以結束通話,但無法弄清楚如何通過最后一行中的按鈕刪除視頻框。 如果我通過更改 URL 或關閉選項卡來結束通話,它將刪除視頻框。
客戶端腳本
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
host: '/',
port: '3001'
})
// Creating the <video> tag and muting the audio of your own feed
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
addVideoStream(myVideo, stream)
// answering the call and sending your stream
myPeer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId => {
connectToNewUser(userId, stream)
})
})
socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})
myPeer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
// connect to new users and adding their video
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
// removes video from grid once they disconnect
call.on('close', () => {
video.remove()
})
peers[userId] = call
}
// connect your video and append to grid
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
// button to end call
let endCall = () => myVideo.srcObject.getTracks().forEach(track => track.stop())
服務器腳本
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', (req, res) => {
res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
res.render('room', { roomId: req.params.room })
})
io.on('connection', socket => {
socket.on('join-room', (roomId, userId) => {
socket.join(roomId)
socket.to(roomId).broadcast.emit('user-connected', userId)
socket.on('disconnect', () => {
socket.to(roomId).broadcast.emit('user-disconnected', userId)
})
})
})
server.listen(3000)
對於可能遇到此問題的任何其他人,我的解決方案是創建一個 html 頁面,單擊結束呼叫按鈕將用戶定向到該頁面。 這樣 URL 就會改變,將視頻 stream 帶走,立即解決問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.