Hello Openvidu Team
I am gonna record only one user’s video among several users who participated in same session.
I got that I should use custom recording layout for this case, but by doc, I can’t find how to use correctly.
is any custom recording layout example?
@CSantosM @pabloFuente
plz help me
thanks
You have to implement the custom layout by yourself.
You can also use INVIDIDUAL recording and then merge the files using ffmpeg or similar.
thanks
I tried but the screen is not fit to full screen, left screen is filled with white color
how to handle this?
<body style="margin:0px">
<div id="host-webinar-screen" style="width:100%; height: 100%;"></div>
</body>
<script>
var url = new URL(window.location.href);
var SESSION_ID = url.searchParams.get("sessionId");
var SECRET = url.searchParams.get("secret");
var HOST_ID = url.searchParams.get("hostId")
var TOKEN = 'wss://' + location.host + '?sessionId=' + SESSION_ID + '&secret=' + SECRET + '&recorder=true';
var OV = new OpenVidu();
var session = OV.initSession();
session.on("streamCreated", (event) => {
if (JSON.parse(event.stream.connection.data.split('%')[0]).clientData.user_id == HOST_ID ){
console.log('host subscribed')
session.subscribe(event.stream, 'host-webinar-screen');
}
});
session.connect(TOKEN)
.then(() => { console.log('Recorder participant connected') })
.catch(error => { console.error(error) });
</script>
this is index.html code content
thanks
Hello @Jin,
A video HTML element is created inside the #host-webinar-screen element for each of the connected streams, so it can easily be done with some CSS:
#host-webinar-screen video { width: 100%; height: 100%; }
Regards,
Mihail
1 Like
Thanks for your answer.
I tried with yours and have successed.
added css to video so I can remove unnecessary left margins of body of video
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
when I send recording/start api to media server. working well but sometimes it returns 409 error
I got 409 means recording already but I already sent recoding stop signal before.
At this time, I should restart server, 'cause sessionId is static, not dynamic so can’t record on sessionId even though session recreate.
At this time, how to handle this error without media server restart?
thanks
Hello,
Could you help me an example of index.html and css for conference 4 persons. Thank you very much.
<html>
<head><script src="openvidu-browser-2.15.0.min.js"></script></head>
<body style="margin:0px;background: #444">
<div id="host-webinar-screen"></div>
</body>
<style>
#host-webinar-screen video{
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
</style>
<script>
var url = new URL(window.location.href);
var SESSION_ID = url.searchParams.get("sessionId");
var SECRET = url.searchParams.get("secret");
var HOST_ID = url.searchParams.get("hostId")
var TOKEN = 'wss://' + location.host + '?sessionId=' + SESSION_ID + '&secret=' + SECRET + '&recorder=true';
var OV = new OpenVidu();
var session = OV.initSession();
session.on("streamCreated", (event) => {
console.log('host subscribed')
session.subscribe(event.stream, 'host-webinar-screen');
});
session.connect(TOKEN)
.then(() => { console.log('Recorder participant connected') })
.catch(error => { console.error(error) });
</script>
</html>
I think this can run.
and don’t forget download and copy the openvidu-browser-2.15.0.min.js in current folder
hope this help for you.
thanks
p.s. if css broken, plz fix them.
1 Like
It seems your code is only distributing the frames to a single person. So how do I distribute frames to other participants?
What do you mean?
this code is for custom layout recording only, not for making frames on user browser ends.
plz check custom recording layout on openvidu doc carefully.
thnks.
*I want to customize the mp4 file layout (recordingMode: COMPOSED). *
in case of recording the conversation the mode is COMPOSED, default layout is BEST_FIT, right? But I wanted to change this custom so I used CUSTOM. What I wanted was to customize the layout of the participants’ video frames in the mp4 file recorded in KMS. Please provide sample about this custom. Thank you very much.
I understand what you mean.
if you want to customize the css of user’s layout css, then you can customize from openvidu-layout component. (https://github.com/OpenVidu/openvidu-call/blob/master/openvidu-call-front/src/app/shared/layout/openvidu-layout.ts)
this updatelayout function is for making user’s frame as smart by provided layout options.
you can check this example layout that changed automatically every user participated on openvidu-call default project when is installed automatically on openvidu docker.
I used this component and this requires jquery.
Please check openvidu-call angular project.
I think the layout of the mp4 file on the server will depend on the CSS and the index.html in this docs. https://docs.openvidu.io/en/2.15.0/advanced-features/recording/
There are also instructions below to customize the layout of conference participants in the browser. https://github.com/OpenVidu/openvidu-call/blob/master/openvidu-call-front/src/app/shared/layout/openvidu-layout.ts
It’s right?
Yes, that is for making layout as good, but if you want you can make as you want just like grid, or horizontal list, or vertical list by css simply.
I created 3 CSS (#first_participant_screen + #second_participant_screen + #third_participant_screen). I also used this sample for the index file
session.on (“streamCreated”, (event) => {
var stream = event.stream;
if (stream.connection.data === ‘userBigVideo’) {
session.subscribe (stream, ‘first_participant_screen’);
} else if (stream.connection.data === ‘userSmallVideo’) {
session.subscribe (stream, ‘second_participant_screen’);
} else {
session.subscribe (stream, ‘third_participant_screen’);
});
it didn’t look like it was working, the videos seemed to have #third_participant_screen layout, and the videos were stacked.
You compared stream.connection.data with some string.
but looks like stream’s connection data doesn’t have above strings.
plz check on custom layout by debuging mode.
openvidu supports custom layout debug mode, you can see as realtime on your browser.
1 Like
Thank you so much 