Видеоэлемент показывает пустое, в то время как медиа -поток устанавливается через srcobject ⇐ Javascript

[Anonymous]

Я знаю, что это немного длинный код, однако, я дал полный код, потому что я действительно не мог найти точную причину. Локальное представление работает идеально, но пользователи других показывают Blank Div ​​в Chrome.
Пожалуйста, помогите с этим, я застрял с этим с недели. https://drive.google.com/file/d/1f2yv5t ... sp=sharing
import SendIcon from '@mui/icons-material/Send';
import GridLayout from "react-grid-layout";

import "./Video.css"

import ReactPlayer from 'react-player';

const server_url = 'http://localhost:3002/';
const beforeUnloadListener = (event) => {
//Send something to back end
// event.preventDefault(); // This is necessary for the confirmation dialog to show in some browsers
// event.returnValue = 'Are you sure you want to leave?'; // This will show a confirmation dialog
this.handleDeleteCurrUserFromDB();
this.handleEndCall();

}

const viewTypes = [
{
value: 'Default',
label: ,
},
{
value: 'GridView',
label: ,
},

];

class Video extends Component {

constructor(props) {
super(props)

this.myVidRef = React.createRef();
this.remoteStreamsRef = React.createRef();

this.videoContainerRef = React.createRef();

this.localVideoref = React.createRef()

this.videoAvailable = false
this.audioAvailable = false

this.state = {
video: false,
audio: false,
screen: false,
showModal: false,
screenAvailable: false,
messages: [],
localStream: [],
streams: [],
message: "",
newmessages: 0,
askForUsername: true,
username: name,
gridRows: 1,
meetLinkPSM: meetLinkPSMt,
videoType: "Default", // Add this line
remoteStreams: [],
forceRenderKey: 0, // Force re-render when needed
gridLayoutData: [],
renderReloader: 0,

}
connections = {}

this.getPermissions()

}

handleVideoTypeChange = (event) => {
const selectedType = event.target.value;
this.setState({ videoType: selectedType }, () => {
console.log("Selected video type:", this.state.videoType); // Debug log
});
this.getUserMedia(); // Call getUserMedia after updating the video type
console.log("Local video stream:", this.localVideoref.current?.srcObject);

};
getPermissions = async () => {
try {
await navigator.mediaDevices.getUserMedia({ video: true })
.then(() => this.videoAvailable = true)
.catch(() => this.videoAvailable = false)

await navigator.mediaDevices.getUserMedia({ audio: true })
.then(() => this.audioAvailable = true)
.catch(() => this.audioAvailable = false)

if (navigator.mediaDevices.getDisplayMedia) {
this.setState({ screenAvailable: true })
} else {
this.setState({ screenAvailable: false })
}

if (this.videoAvailable || this.audioAvailable) {
navigator.mediaDevices.getUserMedia({ video: this.videoAvailable, audio: this.audioAvailable })
.then((stream) => {
window.localStream = stream
this.localVideoref.current.srcObject = stream
})
.then((stream) => { })
.catch((e) => console.log(e))
}
} catch (e) { console.log(e) }
}
putfullScreen = (event) => {
let elem = event.target
if (elem.requestFullscreen) {
elem.requestFullscreen()
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen()
}

}
getMedia = () => {
this.setState({
video: this.videoAvailable,
audio: this.audioAvailable
}, () => {
this.getUserMedia()
this.connectToSocketServer()
})
}

getUserMedia = () => {
if ((this.state.video && this.videoAvailable) || (this.state.audio && this.audioAvailable)) {
navigator.mediaDevices.getUserMedia({ video: this.state.video, audio: this.state.audio })
.then(this.getUserMediaSuccess)
.then((stream) => { })
.catch((e) => console.log(e))
} else {
try {
let tracks = this.localVideoref.current.srcObject.getTracks()
tracks.forEach(track => track.stop())
} catch (e) { }
}
}

getUserMediaSuccess = (stream) => {
try {
window.localStream.getTracks().forEach(track => track.stop())
} catch (e) { console.log(e) }

setTimeout(() => {
const videoElem = document.getElementById('my-video');
if (videoElem) {
videoElem.srcObject = stream;
console.log("Video element found, setting srcObject");
} else {
console.error("Video element not found in the DOM");
}
}, 1000);

this.setState({ localStream: stream });

for (let id in connections) {
if (id === socketId) continue

connections[id].addStream(window.localStream)

connections[id].createOffer().then((description) => {
connections[id].setLocalDescription(description)
.then(() => {
socket.emit('signal', id, JSON.stringify({ 'sdp': connections[id].localDescription }))
})
.catch(e => console.log(e))
})
}

stream.getTracks().forEach(track => track.onended = () => {
this.setState({
video: false,
audio: false,
}, () => {
try {
let tracks = this.localVideoref.current.srcObject.getTracks()
tracks.forEach(track => track.stop())
} catch (e) { console.log(e) }

let blackSilence = (...args) => new MediaStream([this.black(...args), this.silence()])
window.localStream = blackSilence()
this.localVideoref.current.srcObject = window.localStream

for (let id in connections) {
connections[id].addStream(window.localStream)

connections[id].createOffer().then((description) => {
connections[id].setLocalDescription(description)
.then(() => {
socket.emit('signal', id, JSON.stringify({ 'sdp': connections[id].localDescription }))
})
.catch(e => console.log(e))
})
}
})
})
}

getDislayMedia = () => {
if (this.state.screen) {
if (navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
.then(this.getDislayMediaSuccess)
.then((stream) => { })
.catch((e) => console.log(e))
}
}
}

getDislayMediaSuccess = (stream) => {
try {
window.localStream.getTracks().forEach(track => track.stop())
} catch (e) { console.log(e) }

window.localStream = stream
this.localVideoref.current.srcObject = stream

for (let id in connections) {
if (id === socketId) continue

connections[id].addStream(window.localStream)

connections[id].createOffer().then((description) => {
connections[id].setLocalDescription(description)
.then(() => {
socket.emit('signal', id, JSON.stringify({ 'sdp': connections[id].localDescription }))
})
.catch(e => console.log(e))
})
}

stream.getTracks().forEach(track => track.onended = () => {
this.setState({
screen: false,
}, () => {
try {
let tracks = this.localVideoref.current.srcObject.getTracks()
tracks.forEach(track => track.stop())
} catch (e) { console.log(e) }

let blackSilence = (...args) => new MediaStream([this.black(...args), this.silence()])
window.localStream = blackSilence()
this.localVideoref.current.srcObject = window.localStream

this.getUserMedia()
})
})
}

gotMessageFromServer = (fromId, message) => {
var signal = JSON.parse(message)

if (fromId !== socketId) {
if (signal.sdp) {
connections[fromId].setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(() => {
if (signal.sdp.type === 'offer') {
connections[fromId].createAnswer().then((description) => {
connections[fromId].setLocalDescription(description).then(() => {
socket.emit('signal', fromId, JSON.stringify({ 'sdp': connections[fromId].localDescription }))
}).catch(e => console.log(e))
}).catch(e => console.log(e))
}
}).catch(e => console.log(e))
}

if (signal.ice) {
connections[fromId].addIceCandidate(new RTCIceCandidate(signal.ice)).catch(e => console.log(e))
}
}
}

connectToSocketServer = () => {
socket = io.connect(server_url, { secure: false })

socket.on('signal', this.gotMessageFromServer)

socket.on('connect', () => {
socket.emit('join-call', { path: window.location.href, username: this.state.username })
socketId = socket.id

// socket.on('chat-message', this.addMessage)
socket.on('chat-message', (data, sender, socketIdSender) => {
console.log("Received chat message:", data, "from:", sender, "socketId:", socketIdSender); // Debug log
this.addMessage(data, sender, socketIdSender);
});

socket.on('user-left', (id) => {

this.state.gridLayoutData = this.state.gridLayoutData.filter(item => item.i !== id); // Remove the user from the grid layout data

// Force a re-render
this.forceUpdate();
let video = document.querySelector(`[data-socket="${id}"]`)
if (video !== null) {
elms--
video.parentNode.removeChild(video)

// let main = document.getElementById('main')
// this.changeCssVideos(main)
}
})

socket.on('user-joined', (id, clients) => {
clients.forEach((client) => {

const socketListId = client.id;
socketdmd = socketListId;
const username = client.username; // Add this line to get the username

this.triggerEventMessage(username + " Joined"); // Call the function with the socketListId and username

connections[socketListId] = new RTCPeerConnection(peerConnectionConfig)
// Wait for their ice candidate
connections[socketListId].onicecandidate = function (event) {
if (event.candidate != null) {
socket.emit('signal', socketListId, JSON.stringify({ 'ice': event.candidate }))
}
}

const userExists = this.state.gridLayoutData.some(item => item.i == socketListId);
if (!userExists && socketListId !== socketId) {

var gridData = {
i: socketListId,
x: this.state.gridRows,
y: 0,
w: 2,
h: 6,
static: true,
username: username, // Add the username to the grid data
};

this.setState((prevState) => {
// Check if the user already exists in gridLayoutData

const updatedGridLayoutData = prevState.gridLayoutData.map((item) => {
if (item.i === socketListId) {
return { ...item, stream }; // Update the stream property
}
return item;

});

return { gridLayoutData: updatedGridLayoutData };
});
console.log("Stream added:", stream); // Debug log

};

// Add the local video stream
if (window.localStream !== undefined && window.localStream !== null) {
// alert("Local Stream is not null");
connections[socketListId].addStream(window.localStream)
} else {
// alert("Local Stream is null");
let blackSilence = (...args) => new MediaStream([this.black(...args), this.silence()])
window.localStream = blackSilence()
connections[socketListId].addStream(window.localStream)
}
})

if (id === socketId) {
for (let id2 in connections) {
if (id2 === socketId) continue

try {
connections[id2].addStream(window.localStream)
} catch (e) { }

connections[id2].createOffer().then((description) => {
connections[id2].setLocalDescription(description)
.then(() => {
socket.emit('signal', id2, JSON.stringify({ 'sdp': connections[id2].localDescription }))
})
.catch(e => console.log(e))
})
}
}
})
})
};

silence = () => {
let ctx = new AudioContext()
let oscillator = ctx.createOscillator()
let dst = oscillator.connect(ctx.createMediaStreamDestination())
oscillator.start()
ctx.resume()
return Object.assign(dst.stream.getAudioTracks()[0], { enabled: false })
}
black = ({ width = 640, height = 480 } = {}) => {
let canvas = Object.assign(document.createElement("canvas"), { width, height })
canvas.getContext('2d').fillRect(0, 0, width, height)
let stream = canvas.captureStream()
return Object.assign(stream.getVideoTracks()[0], { enabled: false })
}

handleVideo = () => this.setState({ video: !this.state.video }, () => this.getUserMedia())
handleAudio = () => this.setState({ audio: !this.state.audio }, () => this.getUserMedia())
handleScreen = () => this.setState({ screen: !this.state.screen }, () => this.getDislayMedia())

openChat = () => this.setState({ showModal: true, newmessages: 0 })
closeChat = () => this.setState({ showModal: false })
handleMessage = (e) => this.setState({ message: e.target.value })

// addMessage = (data, sender, socketIdSender) => {
// this.setState(prevState => ({
// messages: [...prevState.messages, { "sender": sender, "data": data }],
// }))
// if (socketIdSender !== socketId) {
// this.setState({ newmessages: this.state.newmessages + 1 })
// }
// }

addMessage = (data, sender, socketIdSender) => {
console.log("Adding message to state:", data, sender, socketIdSender); // Debug log
this.setState(prevState => ({
messages: [...prevState.messages, { sender, data }],
}), () => {
console.log("Updated messages state:", this.state.messages); // Debug log after state update
});
if (socketIdSender !== socketId) {
this.setState({ newmessages: this.state.newmessages + 1 });
}
};

handleUsername = (e) => this.setState({ username: e.target.value })

sendMessage = () => {
socket.emit('chat-message', this.state.message, this.state.username)
console.log("Message sent:", this.state.message, this.state.username)
this.setState({ message: "", sender: this.state.username })
}

connect = () => {
this.setState({ askForUsername: false }, () => this.getMedia());
this.updateDataBaseMain();
}
handleShowDiagForEnd = () => {
this.setState({ openDialog: true });
}

render() {

const isMobile = this.isMobileDevice(); // Check if the device is mobile

return (

{this.state.askForUsername === true ?


Please Type You Name Here!
this.handleUsername(e)} />
Connect




:




{(this.state.video === true) ? : }







{this.state.audio === true ? : }


{this.state.screenAvailable === true ?

{this.state.screen === true ? : }

: null}









Chat Room




{this.state.messages.length > 0 ? this.state.messages.map((item, index) => (

{item.sender}: {item.data}

)) :
No message yet
}


this.handleMessage(e)} />


Send

{/* Send */}











Copy invite link

{!isMobile && (


{viewTypes.map((option) => (

{option.label}

))}


)}





{/*

*/}

{this.state.videoType === "GridView" ?








{this.state.username} (You)



{this.state.gridLayoutData.map((item) => (
id={item.i}
data-grid={{ i: item.i, x: item.x, y: item.y, w: item.w, h: item.h }}
key={item.i} className="video-container"
>


{
if (videoElement && item.stream) {
console.log(" Video element found:", videoElement);
console.log(" Stream for item:", item.stream);

// Set attributes
videoElement.setAttribute("data-socket", item.i);
videoElement.setAttribute("title", item.username);
videoElement.muted = true;
videoElement.autoplay = true;

// If a different stream is set, remove the old one
if (videoElement.srcObject !== item.stream) {
console.log("Updating srcObject...");
videoElement.srcObject = item.stream;
}

// Debugging: Check if the stream actually has video tracks
const videoTracks = item.stream.getVideoTracks();
if (videoTracks.length === 0) {
console.error(" No video tracks found in the stream!");
} else {
console.log(" Video track found:", videoTracks[0]);
}

// Ensure the video plays when the metadata is loaded
videoElement.onloadedmetadata = () => {
console.log("Video metadata loaded, attempting to play...");
videoElement.play()
.then(() => console.log(" Video is playing!"))
.catch((error) => console.error(" Video play error:", error));
};

// Extra debugging: Check when a track is added or removed
item.stream.onaddtrack = (event) => {
console.log(" New track added:", event.track);
};

item.stream.onremovetrack = (event) => {
console.log("Track removed:", event.track);
};
}
}}

>



))}








Подробнее здесь: https://stackoverflow.com/questions/795 ... -srcobject