I am using this Opentok plugin for video calling features in an Ionic application. I have to hide/show video based on the certain condition in the single screen but I am not able to find any help from given plugin link.
https://github.com/opentok/cordova-plugin-opentok
Try to hide video using CSS class
.OT_root video {
display: none !important;
}
But it is not working.
TokBox Developer Evangelist here (I also help maintain the Cordova OpenTok plugin).
The Cordova OpenTok plugin uses the native OpenTok SDKs and places native iOS and Android views for the Publisher and Subscriber on top of a WebView div element. This means that the native views are superimposed on the div elements that are created in the DOM.
After you apply the CSS changes, you have to call OT.updateViews to relay this information to the native layer indicating that the view was changed. The updateViews method sends the DOM position, width, height, and etc over the JS bridge to the native layer which then uses that information to update the native view appropriately.
You can do something like this:
document.getElementById('publisher').style = 'display: none !important;';
OT.updateViews();
Note that in the code above, we are assuming that the publisher div element has the Id set to publisher. You can change the code to however you've set up your code.
Please note that hiding the view will simply hide it from the screen, but will not stop publishing of the video. To stop publishing, use either session.unpublish(publisher) or publisher.destroy.
If someone is still looking at ways to achieve what OP asks for, this is how I managed to make it.
I tried doing as Manik explained but it seems that display: none !important; is not very reliable, so I decided to move the videos that should not display offscreen.
Example (hide) with a subscriber which has the element id 'subscriber':
document.getElementById('subscriber').style = 'top: 5000px!important; position: fixed!important;';
OT.updateViews();
I guess you could also use left instead of top.
Bear in mind that this does not interrupt the video stream, it just hides the publisher/subscriber (see Manik's explanation).
