neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated openvidu-virtual-background

Browse Source
This commit is contained in:
pabloFuente 2022-05-11 14:06:43 +02:00
parent 627d636f18
commit fdbdde57f2
2 changed files with 24 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
openvidu-virtual-background/README.md
View File

@ -10,18 +10,4 @@ openvidu-virtual-background
Visit [docs.openvidu.io/en/stable/advanced-features/virtual-background](http://docs.openvidu.io/en/stable/advanced-features/virtual-background/)
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
## Run this application
```bash
# Launch OpenVidu Server
docker run --rm -d -p 4443:4443 -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.21.0
# Clone and serve openvidu-filters application
git clone https://github.com/OpenVidu/openvidu-tutorials.git
cd openvidu-tutorials/openvidu-virtual-background
http-server web/
```
You will need `http-server` npm package (`sudo npm install -g http-server`), and you will need to accept the insecure certificate at [https://localhost:4443](https://localhost:4443) once you launch openvidu-server-kms docker container.
[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120

50
openvidu-virtual-background/web/app.js
View File

@ -8,8 +8,9 @@ var backgroundImageUrl;
/* OPENVIDU METHODS */
function joinSession() {
var mySessionId = $("#sessionId").val();
var myUserName = $("#userName").val();
var mySessionId = $("#sessionId").val(); // Session the user will join
var myUserName = $("#userName").val(); // Nickname of the user in the session
// --- 1) Get an OpenVidu object ---
@ -22,30 +23,30 @@ function joinSession() {
// --- 3) Specify the actions when events take place in the session ---
// On every new Stream received...
session.on("streamCreated", (event) => {
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) => {
subscriber.on("videoElementCreated", event => {
// Add a new <p> element for the user's nickname just below its video
appendUserData(event.element, subscriber);
});
// When the video starts playing remove the spinner
subscriber.on("streamPlaying", function (event) {
subscriber.on("streamPlaying", event => {
$("#spinner-" + subscriber.stream.connection.connectionId).remove();
});
});
// On every Stream destroyed...
session.on("streamDestroyed", (event) => {
session.on("streamDestroyed", event => {
// Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM
removeUserData(event.stream.connection);
});
// On every asynchronous exception...
session.on("exception", (exception) => {
session.on("exception", exception => {
console.warn(exception);
});
@ -53,11 +54,10 @@ function joinSession() {
// 'getToken' method is simulating what your server-side should do.
// 'token' parameter should be retrieved and returned by your own backend
getToken(mySessionId).then((token) => {
getToken(mySessionId).then(token => {
// First param is the token got from OpenVidu Server. Second param can be retrieved by every user on event
// 'streamCreated' (property Stream.connection.data), and will be appended to DOM as the user's nickname
session
.connect(token, { clientData: myUserName })
session.connect(token, { clientData: myUserName })
.then(() => {
// --- 5) Set page layout for active call ---
@ -82,12 +82,12 @@ function joinSession() {
// --- 7) Specify the actions when events take place in our publisher ---
// When our HTML video has been added to DOM...
publisher.on("videoElementCreated", function (event) {
publisher.on("videoElementCreated", event => {
appendUserData(event.element, publisher);
initMainVideo(publisher, myUserName);
});
// When our video has started playing...
publisher.on("streamPlaying", function (event) {
publisher.on("streamPlaying", event => {
$("#spinner-" + publisher.stream.connection.connectionId).remove();
$("#virtual-background-btns").show();
});
@ -95,12 +95,8 @@ function joinSession() {
// --- 8) Publish your stream ---
session.publish(publisher);
})
.catch((error) => {
console.log(
"There was an error connecting to the session:",
error.code,
error.message
);
.catch(error => {
console.log("There was an error connecting to the session:", error.code, error.message);
});
});
}
@ -131,13 +127,6 @@ function leaveSession() {
// --- Virtual Background related methods ---
async function removeVirtualBackground() {
blockVirtualBackgroundButtons();
await publisher.stream.removeFilter();
virtualBackground = undefined;
noVirtualBackgroundButtons();
}
async function applyBlur() {
blockVirtualBackgroundButtons();
if (!!virtualBackground) {
@ -157,10 +146,10 @@ async function applyImage() {
imageVirtualBackgroundButtons();
}
async function modifyImage(radioButtonEvent) {
async function modifyImage(radioBtnEvent) {
if (!!virtualBackground && virtualBackground.type === "VB:image") {
blockVirtualBackgroundButtons();
var imageUrl = "https://raw.githubusercontent.com/OpenVidu/openvidu.io/master/img/vb/" + radioButtonEvent.value;
var imageUrl = "https://raw.githubusercontent.com/OpenVidu/openvidu.io/master/img/vb/" + radioBtnEvent.value;
if (backgroundImageUrl !== imageUrl) {
await virtualBackground.execMethod("update", { url: imageUrl });
backgroundImageUrl = imageUrl;
@ -169,6 +158,13 @@ async function modifyImage(radioButtonEvent) {
}
}
async function removeVirtualBackground() {
blockVirtualBackgroundButtons();
await publisher.stream.removeFilter();
virtualBackground = undefined;
noVirtualBackgroundButtons();
}
// --- End Virtual Background related methods ---
/* APPLICATION SPECIFIC METHODS */