How to Unpublish webcam video with videoElement like user's name and nickname and share screen

How to implement?
1

Right now I can easily unpublish webcam video and share screen and also after stopping I can start my webcam. But the problem is whenever I’m doing unpublish(publisher), my video elements are still there.

Screenshot from 2021-02-19 01-56-16
Screenshot from 2021-02-19 01-56-161366×768 93.2 KB

as you can see publisher2 video elements are still there,
again I publish my publisher with new video elements, but the old one is still there.

Mycode:-
--------
continue
-------
> // added screen sharing feature

  •  				$(document).ready(function() {

  •   						$('#share').click(function() {

  •   							session.unpublish(publisher);

  •  						publisher = OV.initPublisher("html-element-id", { videoSource: "screen"});

  •  						publisher.once('accessAllowed', (event) => {

  •        					publisher.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {

  •            					console.log('User pressed the "Stop sharing" button');

  •            					session.unpublish(publisher);

  •            					publisher = OV.initPublisher('video-container',publisherConfig);

  •  								publisher.on('videoElementCreated', (event) => {

  •  									var userData = {

  •  										nickName: nickName,

  •  										userName: userName

  •  									};

  •  									initMainVideo(event.element, userData);

  •  									appendUserData(event.element, userData);

  •  									$(event.element).prop('muted', true); // Mute local video

  •  								});

  •            					session.publish(publisher);

  •        					});

  •        					session.publish(publisher);

  •  						});

  •  						publisher.once('accessDenied', (event) => {

  •  							publisher = OV.initPublisher('video-container',publisherConfig);

  •  								publisher.on('videoElementCreated', (event) => {

  •  									var userData = {

  •  										nickName: nickName,

  •  										userName: userName

  •  									};

  •  									initMainVideo(event.element, userData);

  •  									appendUserData(event.element, userData);

  •  									$(event.element).prop('muted', true); // Mute local video

  •  								});

  •            					session.publish(publisher);

  •        					console.warn('ScreenShare: Access Denied');

  •    					});

  •   							$(this).toggleClass("fa-video-slash");

  •   							$(this).toggleClass("fa-laptop");

  •   						});

  •  				});
2

Take a look to the default behavior upon streamDestroyed event: StreamEvent | OpenVidu Browser - v2.16.0

If your application is making use of openvidu-browser properly, then any Publisher object should remove any associated video element (and free the camera device) whenever it is destroyed.

3

Hello,

I think that @Amit_Singh means that the user data is not removed automatically (the video element is removed by the browser plugin as expected).

@Amit_Singh, you have to implement the user data removal code yourself, see an example here: OpenVidu Docs .

Basically you need to add this:

// On every Stream destroyed...
session.on('streamDestroyed', event => {
    // Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM
    removeUserData(event.stream.connection);
});

And declare the removeUserData function:

function removeUserData(connection) {
    var dataNode = document.getElementById("data-" + connection.connectionId);
    dataNode.parentNode.removeChild(dataNode);
}

You might also need to add the removeAllUserData function when you leave the session, see the code in the link above.

Cheers,
Mihail

4

thank you for response, but it still not working