I want to know when the client stopped screen sharing. I tried the code sample on documents page but did not work. It shares my screen but also opens my webcam and inactive event never runs even I click the stop button on my browser. Here is my code.
function joinSessionScreen() {
getToken((token) => {
// --- 1) Get an OpenVidu object ---
OV = new OpenVidu();
// --- 2) Init a session ---
session = OV.initSession();
// --- 3) Specify the actions when events take place in the session ---
// On every new Stream received...
session.on('streamCreated', (event) => {
// Subscribe to the Stream to receive it
// HTML video will be appended to element with 'video-container' id
var subscriber = session.subscribe(event.stream, 'video-container');
// When the HTML video has been appended to DOM...
subscriber.on('videoElementCreated', (event) => {
// Add a new HTML element for the user's name and nickname over its video
appendUserData(event.element, subscriber.stream.connection);
});
});
session.on('streamDestroyed', (event) => {
// Delete the HTML element with the user's name and nickname
console.log("// The user clicked stop 2.");
});
session.on('mediaStopped', (event) => {
// Delete the HTML element with the user's name and nickname
console.log("// The user clicked stop 2.");
});
// --- 4) Connect to the session passing the retrieved token and some more data from
// the client (in this case a JSON with the nickname chosen by the user) ---
var nickName = $("#nickName").val();
session.connect(token, { clientData: nickName })
.then(() => {
// --- 5) Set page layout for active call ---
var userName = $("#user").val();
$('#session-title').text(sessionName);
$('#join').hide();
$('#session').show();
// Here we check somehow if the user has 'PUBLISHER' role before
// trying to publish its stream. Even if someone modified the client's code and
// published the stream, it wouldn't work if the token sent in Session.connect
// method is not recognized as 'PUBLIHSER' role by OpenVidu Server
if (isPublisher(userName)) {
// --- 6) Get your own screen stream ---
var publisher = OV.initPublisherAsync({
videoSource: "screen"
}).then(publisher => {
publisher.stream.getMediaStream().addEventListener('inactive', () => {
console.log('User pressed the "Stop sharing" button');
// You can send a signal with Session.signal method to warn other participants
});
});
// --- 7) Specify the actions when events take place in our publisher ---
// When our HTML video has been added to DOM...
publisher.on('videoElementCreated', (event) => {
// Init the main video with ours and append our data
var userData = {
nickName: nickName,
userName: userName
};
//initMainVideo(event.element, userData);
appendUserData(event.element, userData);
$(event.element).prop('muted', true); // Mute local video
});
publisher.on('mediaStopped', function(event) {
console.log("// The user clicked stop 1.");
});
// --- 8) Publish your stream ---
session.publish(publisher);
} else {
console.warn('You don\'t have permissions to publish');
initMainVideoThumbnail(); // Show SUBSCRIBER message in main video
}
})
.catch(error => {
console.warn('There was an error connecting to the session:', error.code, error.message);
});
});
return false;
}
Can you tell me what am I doing wrong? Thanks.