OpenVidu 2.3.0: Web Component and tons of new features

Hi there! Let’s quickly see what’s new with release 2.3.0 of OpenVidu.

OpenVidu Web Component

OpenVidu now offers an easier way to get started: just include our new Web Component into your web and start enjoying video call capabilities with just 3 new lines of code:

1. Add to your index.html OpenVidu Web Component files:

<link rel="stylesheet" href="openvidu-webcomponent-2.3.0.css" /> <script src="openvidu-webcomponent-2.3.0.js"></script>

And add your video-call element wherever you want in your application:

<openvidu-webcomponent session-config='{"user":"NICKNAME", "token":"TOKEN"}' theme="dark"></openvidu-webcomponent>

Being NICKNAME the user's name during the call and TOKEN one token generated in OpenVidu Server. Of course, if you want to connect users to the same session, the tokens should be generated for the same session. Attribute theme can be dark or light. Use the one that better fits your application.

OpenVidu Web Component supports a reasonable amount of different dimensions, and every video displayed inside of it will be automatically relocated and resized for its optimal position upon window resizing. You can set the position, width and height of the component by styling it like this:

1. Setting its property position to absolute or fixed, depending on your web layout and the desired behavior you want the component to have.
2. Playing with values:

• width
• height
• top or bottom
• right or left

For example, the following CSS rule would position the upper OpenVidu Web Component in the bottom-right corner of your web, taking up half of the height of the page and a third of its width.

openvidu-webcomponent {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33vw;
    height: 50vh;
}

If you give enough width to the component (at least 700px), users can communicate through an integrated chat.

If you want to learn more about OpenVidu Web Component, visit Tutorials section in openvidu.io

Below there are some images of how OpenVidu Web Component look when integrating it in openvidu.io web:

A single publisher in OpenVidu Web Component with dark theme

This is how a one-to-one call might look. You can mute your own audio or video whenever you want, as well as locally muting other user’s audio

Every video will be located and resized in order to cover the maximum possible space given to the component. However, users can set any of the videos on full screen at any time

You can of course easily screen share with OpenVidu Web Component

Videos will automatically acquire a fixed ratio if there’s a publisher screen-sharing in the session. This helps avoiding annoying crops and keeping all the information available to the viewer.

New features in OpenVidu API

StreamPropertyChangedEvent (See here)

OpenVidu Browser now lets users connected to a Session know when any Stream they are subscribed to undergoes any possible change in its properties. Every Session object will dispatch this new event (you can subscribe to it to every Publisher or Subscriber object too). This event can refer to the following Stream properties:

• Stream.audioActive: this property may change if the user publishing the Stream calls Publisher.pusblishAudio(bool).
• Stream.videoActive: this property may change if the user publishing the Stream calls Publisher.publishVideo(bool).
• Stream.videoDimensions: this property may change if A) The user publishing the stream is screen-sharing and the shared window changes its dimensions or B) The user is publishing from a mobile device and it is rotated (every camera from a phone will invert the resolution in the output video when rotated).

So, for example, now you can do:

var OV = new OpenVidu();
var session = OV.initSession();
session.on('streamPropertyChanged', event => {
    if (event.changedProperty === 'audioActive') {
        console.log('The state of the audio of the publisher has changed. Is enabled? -> ' + event.newValue);
    } else if (event.changedProperty === 'videoActive') {
        console.log('The state of the video of the publisher has changed. Is enabled? -> ' + event.newValue);
    } else if (event.changedProperty === 'videoDimensions') {
        console.log('The video dimensions of the publisher has changed. New dimensions: ' + event.newValue);
    }
});

This way you can react more easily upon this variations in the published streams and update your application’s layout accordingly.

Session.capabilities (See here)

You can check capabilities property of Session object to know which methods are able to invoke each one of your clients, depending on their role. Also, if a client tries to call a method for which he has no permissions, now an OpenViduError is thrown with property name being OPENVIDU_PERMISSION_DENIED.

New MODERATOR role

At last developers have available the new role that has been in our roadmap for a long time. Users connecting to a session with a token configured with MODERATOR role can call every method granted for SUBSCRIBER and PUBLISHER roles, but also:

• Session.forceDisconnect: you can evict any user from the Session (force the method Session.disconnect)
• Session.forceUnpublish: you can stop the Publisher of any user publishing in the Session (force the method Session.unpublish)

REST API extended

5 new methods join the REST API of OpenVidu Server:

• Retrieve active session info: GET /api/sessions/<SESSION_ID>
• Retrieve all active sessions info: GET /api/sessions
• Close a session: DELETE /api/sessions/<SESSION_ID>
• Force the disconnection of a user from a session: DELETE /api/sessions/<SESSION_ID>/connection/<CONNECTION_ID>
• Force the unpublishing of a user’s stream from a session: DELETE /api/sessions/<SESSION_ID>/stream/<STREAM_ID>

Future iterations will add this capabilities to openvidu-java-client and openvidu-node-client libraries

Configure global bandwidth for your WebRTC connections

We have included a first way to set the maximum and minimum bandwidths for the media connections established between browsers and OpenVidu Server. You can configure it with the following system properties, as stated in OpenVidu Server configuration sections:

• openvidu.streams.video.max-recv-bandwidth: Maximum video bandwidth sent from clients to OpenVidu Server, in kbps. 0 means unconstrained (default 600)
• openvidu.streams.video.min-recv-bandwidth: Minimum video bandwidth sent from clients to OpenVidu Server, in kbps. 0 means unconstrained (default 300)
• openvidu.streams.video.max-send-bandwidth: Maximum video bandwidth sent from OpenVidu Server to clients, in kbps. 0 means unconstrained (default 600)
• openvidu.streams.video.min-send-bandwidth: Minimum video bandwidth sent from OpenVidu Server to clients, in kbps. 0 means unconstrained (default 300)

Future iterations will study the possibility of configuring this same parameters for each session individually or even for each incoming or outgoing WebRTC connection (maybe as part of PublisherProperties or SubscriberProperties)

Stay tuned for next iterations! You can follow us on Twitter and a Star in GitHub is always welcome :)