Hey @micael.gallego, thanks for replying so fast. I will investigate further to see if the issue can be reproduced consistently, and try to get browser versions for the cases. I know the majority of the users are on latest Chrome on Win10. As a start, here is my hook implementation for openvidu-browser. I have tried to strip it down to the essentials and have not tested this edited version, but maybe someone will spot a problem in the code. toggleCamera() and toggleShareScreen() which calls setVideoTrack() is my current suspect for the issue. I have also been looking into whether the session cleans up properly and recently added the stopEvents() function with session.off() for the events. Not sure if this is necessary.
import { useState, useRef } from 'react';
import axios from 'axios';
import {
OpenVidu,
Connection,
Publisher,
Session,
StreamManager,
Device,
PublisherProperties,
StreamEvent,
PublisherSpeakingEvent,
ConnectionEvent
} from 'openvidu-browser';
const OPENVIDU_SERVER_URL = process.env.REACT_APP_MEDIASERVER_URL;
// Server side
const createSession = async (sessionId: string) => {
return new Promise((resolve, reject) => {
axios
.get(
OPENVIDU_SERVER_URL +
'/api/MediaServer/Join/' +
sessionId +
'&autoRecord=false',
{
headers: {
'Content-Type': 'application/json'
}
}
)
.then(response => {
resolve(response.data);
})
.catch(error => {
reject(error);
});
});
};
const useOpenVidu = () => {
const openVidu = useRef<OpenVidu | null>(null);
const session = useRef<Session | null>(null);
const videoDevices = useRef<Device[]>([]);
const videoDeviceIndex = useRef<number>(0);
const [shareScreen, setShareScreen] = useState<boolean>(false);
const [subscribers, setSubscribers] = useState<StreamManager[]>([]);
const [mainStreamManager, setMainStreamManager] = useState<
StreamManager | undefined
>(undefined);
const [publisher, setPublisher] = useState<Publisher | undefined>(undefined);
const [connections, setConnections] = useState<Connection[]>([]);
const [executing, setExecuting] = useState<boolean>(false);
const setupEvents = () => {
if (session.current) {
session.current.on('connectionCreated', (event: any) => {
const e = event as ConnectionEvent;
setConnections((conns: Connection[]) => [...conns, e.connection]);
});
session.current.on('connectionDestroyed', (event: any) => {
const e = event as ConnectionEvent;
const id = e.connection.connectionId;
setConnections(conns =>
conns.filter(c => {
return c.connectionId !== id;
})
);
});
session.current.on('streamCreated', (event: any) => {
const e = event as StreamEvent;
if (session.current) {
const subscriber = session.current.subscribe(e.stream, 'undefined');
setSubscribers(sub => [...sub, subscriber]);
}
});
session.current.on('streamDestroyed', (event: any) => {
const e = event as StreamEvent;
setSubscribers(subs => subs.filter(s => s !== e.stream.streamManager));
});
session.current.on('sessionDisconnected', () => {
stopEvents();
cleanup();
});
session.current.on('streamPropertyChanged', () => {
setSubscribers(subs => subs.slice());
});
} else {
console.error('setupEvents() failed: no session reference');
}
};
const stopEvents = () => {
if (session.current) {
session.current.off('connectionCreated');
session.current.off('connectionDestroyed');
session.current.off('streamCreated');
session.current.off('streamDestroyed');
session.current.off('sessionDisconnected');
session.current.off('streamPropertyChanged');
} else {
console.error('stopEvents() failed: no session reference');
}
};
const joinSession = async (userName: string, sessionId: string) => {
openVidu.current = new OpenVidu();
const devices = await openVidu.current.getDevices();
const videoInputs = devices.filter(d => d.kind === 'videoinput');
videoDevices.current = videoInputs;
const newSession = openVidu.current!.initSession();
session.current = newSession;
setupEvents();
connect(userName, sessionId).catch(() => {
cleanup();
});
};
const cleanup = () => {
openVidu.current = null;
session.current = null;
videoDevices.current = [];
setSubscribers([]);
setMainStreamManager(undefined);
setPublisher(undefined);
setConnections([]);
videoDevices.current = [];
videoDeviceIndex.current = 0;
setShareScreen(false);
setExecuting(false);
};
const leaveSession = () => {
if (session.current) {
session.current.disconnect();
}
cleanup();
};
const connect = async (userName: string, sessionId: string) => {
return new Promise((resolve, reject) => {
createSession(sessionId)
.then((response: any) => {
if (session.current) {
session.current
.connect(response.token, {
clientData: userName
})
.then(() => {
publish()
.then(() => {
resolve({});
})
.catch(error => {
alert('Could not publish to session.\n' + error);
reject(error);
});
});
}
})
.catch(error => {
alert('Could not connect to server.\n' + error);
reject(error);
});
});
};
const publish = async () => {
return new Promise((resolve, reject) => {
let newPublisher: Publisher | null = null;
const videoDevice =
videoDevices.current.length > 0
? videoDevices.current[videoDeviceIndex.current].deviceId
: false;
if (openVidu.current) {
newPublisher = openVidu.current.initPublisher('undefined', {
videoSource: videoDevice,
audioSource: undefined,
publishAudio: true,
publishVideo: true,
resolution: '320x240',
frameRate: 15,
insertMode: 'APPEND',
mirror: false
});
}
if (session.current && newPublisher) {
session.current
.publish(newPublisher)
.then(() => {
setPublisher(newPublisher!);
resolve(newPublisher);
})
.catch(error => {
reject(error);
});
} else {
reject('Session or publisher does not exist.');
}
});
};
const setVideoTrack = async (constraints: PublisherProperties) => {
return new Promise((resolve, reject) => {
if (openVidu.current && session.current && publisher !== undefined) {
openVidu.current
.getUserMedia({ ...constraints, audioSource: false })
.then(stream => {
const track = stream.getVideoTracks()[0];
publisher.replaceTrack(track);
resolve(track);
})
.catch(error => reject(error));
}
});
};
const toggleShareScreen = async () => {
if (shareScreen && executing === false) {
setExecuting(true);
setVideoTrack({
videoSource: videoDevices.current[videoDeviceIndex.current].deviceId
}).then(() => setShareScreen(false));
} else {
setVideoTrack({ videoSource: 'screen' }).then(() => setShareScreen(true));
}
setExecuting(false);
};
const toggleCamera = () => {
if (
videoDevices.current.length > 1 &&
publisher !== undefined &&
executing === false
) {
setExecuting(true);
setShareScreen(false);
const nextIndex =
(videoDeviceIndex.current + 1) % videoDevices.current.length;
setVideoTrack({
videoSource: videoDevices.current[nextIndex].deviceId
}).then(() => {
videoDeviceIndex.current = nextIndex;
setExecuting(false);
});
}
};
const setMainVideoStream = (stream: StreamManager | undefined) => {
if (mainStreamManager !== stream) {
setMainStreamManager(() => stream);
}
};
return {
joinSession,
leaveSession,
setMainVideoStream,
setMainStreamManager,
toggleShareScreen,
shareScreen,
toggleCamera,
connections,
mainStreamManager,
publisher,
subscribers
};
};
export default useOpenVidu;
i know opera browser is also used