OpenVidu 2.5.0: Voice and video filters

  • You can apply one filter at a time to a published Stream. Every user subscribed to it will receive the modified stream.
  • You can remove an applied filter.
  • You can call any remote method offered by an applied filter.
  • You can add and remove event listeners to any event dispatched by an applied filter.
  • You must configure in the participant token the allowed filters the user can apply.

Step by step

1) Generate a token with the filters the user will be able to apply

  • API REST: include in the JSON body a parameter kurentoOptions with a property allowedFilters (a string array containing the name of the filters the user will be able to apply)
{
"session": "6fpivlanw91qjy6n",
"data": "user_data",
"role": "PUBLISHER",
"kurentoOptions": {
"allowedFilters": ["GStreamerFilter", "FaceOverlayFilter"]
}
}
  • openvidu-java-client: call TokenOptions.Builder#kurentoOptions(KurentoOptions) to set allowedFilters value with method KurentoOptions.Builder#allowedFilters(String[])
TokenOptions tokenOptions = new TokenOptions.Builder()
.role(OpenViduRole.PUBLISHER)
.data("user_data")
.kurentoOptions(
new KurentoOptions.Builder().allowedFilters(
new String[]{"GStreamerFilter", "FaceOverlayFilter"})
.build())
.build();
String token = session.generateToken(tokenOptions);
var tokenOptions = {
role: "PUBLISHER",
data: "user_data",
kurentoOptions: {
allowedFilters: ["GStreamerFilter", "FaceOverlayFilter"]
}
};
session.generateToken(tokenOptions).then(token => { ... });

2.A) Initialize a Publisher object configured for using a filter from the beginning of the publishing …

var OV = new OpenVidu();
var publisher = OV.initPublisher(
targetElement,
{
filter: {
type: "GStreamerFilter",
options: "videoflip method=vertical-flip"
}
});
// user already connected to "session" with the appropriate token
session.publish(publisher);

2.B) … or apply the filter dynamically after publishing the stream, whenever you want

// user already connected to the session with the appropriate token
// and successfully publishing the Publisher object
publisher.stream.applyFilter(
"GStreamerFilter",
"videoflip method=vertical-flip")
.then(() => console.log("Video rotated!"))
.catch(error => console.error(error));

3) You can execute any method offered by the filter

// user already connected to the session with the appropriate token
// successfully publishing the Publisher object and a filter
// being applied to its stream
publisher.stream.filter.execMethod(
"setElementProperty",
{
"propertyName":"method",
"propertyValue":"horizontal-flip"
})
.then(() => console.log("Video rotation direction modified!"))
.catch(error => console.error(error));

4) You can also subscribe to any filter event (if it dispatches any), and later unsubscribe from it

// user already connected to the session with the appropriate token
// successfully publishing the Publisher object and a filter
// being applied to its stream
publisher.stream.filter.addEventListener(
"FooFilterEvent",
filterEvent => {
console.log('Filter event received. Data: ' + filterEvent.data);
});
...publisher.stream.filter.removeEventListener("FooFilterEvent");

4) To remove the filter

// user already connected to the session with the appropriate token
// successfully publishing the Publisher object and a filter
// being applied to its stream
publisher.stream.removeFilter()
.then(() => console.log("Filter removed"))
.catch(error => console.error(error));

Filter samples

Kurento filters

  • FaceOverlayFilter (overlay an image over detected faces)
publisher.stream.applyFilter("FaceOverlayFilter")
.then(filter => {
filter.execMethod( "setOverlayedImage", {
"uri":"https://cdn.pixabay.com/photo/2013/07/12/14/14/derby-148046_960_720.png",
"offsetXPercent":"-0.2F",
"offsetYPercent":"-0.8F",
"widthPercent":"1.3F",
"heightPercent":"1.0F"
});
});
  • ChromaFilter (set a chroma background)
publisher.stream.applyFilter("ChromaFilter", {
"window": {
"topRightCornerX": 0,
"topRightCornerY": 0,
"width": 50,
"height": 50
},
"backgroundImage": "https://www.maxpixel.net/static/photo/1x/Cool-Blue-Liquid-Lake-Abstract-Background-Clear-316144.jpg"
});
  • ZBarFilter (detect and read bar codes information)
publisher.stream.applyFilter("ZBarFilter")
.then(filter => {
filter.addEventListener("CodeFound", filterEvent => {
console.log('Bar code found!. Data: ' + filterEvent.data);
}
});

GStreamer filters

publisher.stream.applyFilter(
"GStreamerFilter",
{"command": "GSTREAMER_COMMAND"}
);
  • coloreffects: apply different color filters to the video stream
    Example: coloreffects preset=heat
  • videobalance: change different properties of the video stream such as brightness, contrast, hue or saturation
    Example: videobalance saturation=0.0
  • videoflip: rotate the video stream
    Example: videoflip method=vertical-flip
  • videobox: crop the video stream
    Example: videobox fill=black top=20 bottom=20 left=-10 right=-10
  • gamma: adjust gamma level of the video stream
    Example: gamma gamma=5.0
  • videomedian: add a median filter to the video stream
    Example: videomedian filtersize=9 lum-only=false
  • audioecho: add reverb to the audio stream
    Example: audioecho delay=50000000 intensity=0.6 feedback=0.4
  • audioamplify: amplifies an audio stream by a given factor
    Example: audioamplify amplification=1.5 clipping-method=wrap-positive
  • Other audio filters: check them out in GStreamer site
  • Many effects of effectv project : funny filters for the video stream like agingtv, dicetv, optv, quarktv, radioactv, revtv, rippletv, shagadelictv, streaktv, vertigotv, warptv
    Example: radioactv

An extra: new OpenVidu Angular and OpenVidu React libraries

What’s coming up next

Make some progress in Safari support. Study Edge support.

More options for session recording

Big refactoring of OpenVidu documentation

Mobile clients

  • Cons: basically the freedom given to the app developers. Native SDKs for Android (Java) or iOS (Swift) will always be more versatile in low-level terms, of course.
  • Pros: these kind of frameworks are awesome in more than one way. You code once, you get 2 different apps for Android and iOS. You don’t need to master specific languages for each platform: keep using JavaScript or TypeScript as you were doing in your web application up till now. Isn’t this awesome?: if you were already using OpenVidu, then you are already capable of getting native Android and iOS apps for your platform.

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

--

--

--

Easy videoconference in your web or mobile app

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Oracle database on Google Cloud Platform -What do you need to know?

Learning to code as a UI/UX Designer

Send Outgoing Webmentions

Building my own ergo keyboard (ch.1)

READ/DOWNLOAD*( The Cucumber for Java Book: Behaviour-Driven Development for Testers and Developers…

Why Benchmarking Distributed Databases Is So Hard

Trustpilot Webhooks — get notifications wherever you want

Backend with Python: My Experience Part 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
OpenVidu

OpenVidu

Easy videoconference in your web or mobile app

More from Medium

Making startup swag cool again using APIs and vCards

Dev Spotlight: Decagon Trainee Builds All-in-One Expense Tracking App

How to Setup a Video Streaming Service by aaPanel

IoT application development — Launch guide