Finding hard to implement own video in react.
Session has been created and subscribed but the video is not playing
Can any one help???
function Subscribe(argOVStreamInfo: any) {
// Initialize OpenVidu and Session objects
argOVStreamInfo.OV = new OpenVidu()
//This is part of teh advace setting on version 2.18.0 06-11-2021
argOVStreamInfo.OV.setAdvancedConfiguration({
noStreamPlayingEventExceptionTimeout: 24000,
})
//argOVStreamInfo.OV.getUserMedia('resolution': '1280x720', 'frameRate':'1'); //08-12_2020 It was for testing.
sessionRef.current = argOVStreamInfo.OV.initSession()
sessionRef.current.on('streamCreated', (event: any) => {
// Subscribe to the Stream to receive it. Second parameter is undefined
// so OpenVidu doesn't create an HTML video by its own
var subscriber = sessionRef.current.subscribe(event.stream, undefined)
subscriber.name = argOVStreamInfo.cameraName
if (videoRef.current) {
subscriber.addVideoElement(videoRef.current)
}
// When the HTML video starts playing...
subscriber.on('streamPlaying', () => {
// ...remove loader
var cameraVideoElement = subscriber.videos[0].video
//cameraVideoElement.parentNode.removeChild(cameraVideoElement.nextSibling);
// ... mute video if browser blocked autoplay
// this.autoplayMutedVideoIfBlocked(cameraVideoElement)
// commented on 10/19/2020 argOVStreamInfo.OV.getUserMedia('resolution': '480X272', 'frameRate':'1'); //09-17_2020 It was for testing.
})
// On every Stream destroyed...
sessionRef.current.on('streamDestroyed', () => {
// Remove the stream from 'subscribers' array
// this.deleteSubscriber(event.stream.streamManager)
})
//Added this on Feb 22-2021 because the network was generating lost of reconnect.
sessionRef.current.on('reconnected', () => {
// Subscribe to the Stream to receive it. Second parameter is undefined
// so OpenVidu doesn't create an HTML video by its own
/* var subscriber = sessionRef.current.subscribe(event.stream, undefined);
subscriber.name = argOVStreamInfo.cameraName;
//var subscribers = argOVStreamInfo.subscribers;
//argOVStreamInfo.subscribers.push(subscriber);
var subscribers = this.state.subscribers;
subscribers.push(subscriber);
console.log(" Subscribe : after reconnect happend, the number of subscribers are " + subscribers.length);
// Update the state with the new subscribers
this.setState({
subscribers: subscribers,
});*/
}) //end of on reconnected
sessionRef.current.on('sessionDisconnected', (event: any) => {
if (event.reason === 'networkDisconnect') {
} else {
}
//we do reconnect here if we lost our connection to the server.
//this.doConnect(argOVStreamInfo);
})
sessionRef.current.on('exception', (exception: any) => {
//console.log("Exception data is " + exception.data);
//console.log("I got exception and will try to reconnect");
// this.handleClickOpenErrorDialog()
//None of these worked, it put more stress on the backend
//this.unsubscribeAction(argOVStreamInfo);
//this.start(argOVStreamInfo);
//This one also caused a loop of error and the stress on the backend.
//this.doConnect(argOVStreamInfo);
})
})
//Here we connect to the stream.
doConnect(argOVStreamInfo)
}
function doConnect(argOVStreamInfo: any) {
// Connect to session. We will receive all necessary events when success
if (
argOVStreamInfo != null &&
argOVStreamInfo != undefined &&
argOVStreamInfo.token != null
) {
sessionRef.current.connect(argOVStreamInfo.token).catch((error: any) => {
var msg =
'ERROR: There was an error connecting to the session. Code2: ' +
error.code +
'. Message: ' +
error.message
})
} else {
if (argOVStreamInfo.token != null) {
}
}
} //end of doConnect.
return <video controls autoPlay muted ref={videoRef} />