About custom layout... plz help

Hi I am making a web application in vue.js using openvidu.

I’m having trouble making a recording using a custom layout.

I would like to record without closing the session, changing the positions of the participants in some cases.

for this i

  1. Adjusted component placement in a custom layout using signaling.
    The layout was changed in the debugging site, but it was not adjusted in the recording file.
// index.html
    session.on('signal:test', (e) => {

            // test 1
            var video = document.getElementById(`remote-video-${e.from.stream.streamId}`).cloneNode()
            document.getElementById(`remote-video-${e.from.stream.streamId}`).remove()
            document.getElementById('big-video-div').appendChild(video)
            
            //test2
            var sub = subscribers.get(e.from.stream.streamId)
            var sub = subscribers.get(e.from.stream.streamId)
            sub.createVideoElement('big-video-div', "APPEND")

            //test3
            var sub = subscribers.get(e.from.stream.streamId)
            console.log(sub)
            console.log(subscribers)
            session.unsubscribe(sub)        
            .then(() => { 
                 var subscriber = session.subscribe(e.from.stream, 'big-video-div')
                 subscribers.set(e.from.stream.streamId, subscriber)
            })            
        });
  1. Received user information to be changed by signaling, and subscribed by receiving streamCreated again through publish and unpublish.
    In the debugging site, the layout was changed, but in the recording file, it was not adjusted, and there was a problem that it was not displayed properly on the user’s screen.
        this.session.unpublish(this.publisher);
        this.session.publish(this.publisher);
        this.startRecording()
// index.html

    session.on("streamCreated", (event) => {
        console.log("recorder and nowStreamer")
        var now = JSON.parse(event.stream.connection.data).clientData
        console.log(recorder)
        console.log(now)
        if(now === recorder || JSON.parse(stream.connection.data).isEE === "Y"){
            session.subscribe(event.stream, 'big-video-div')
        } else {
            session.subscribe(event.stream, 'smaill-video-div')
        }
    });

  1. Disconnect the user with session.disconnect and reconnect.
    → There is a problem that the recording is done, but it is not displayed properly on the user’s screen.
        this.session.disconnect()

        const newOv = new OpenVidu();

        const ovInitSession = this.OV.initSession();

        this.getToken(this.mySessionId).then((token) => { ...
// index.html

    session.on("streamCreated", (event) => {
        console.log("recorder and nowStreamer")
        var now = JSON.parse(event.stream.connection.data).clientData
        console.log(recorder)
        console.log(now)
        if(now === recorder || JSON.parse(stream.connection.data).isEE === "Y"){
            session.subscribe(event.stream, 'big-video-div')
        } else {
            session.subscribe(event.stream, 'smaill-video-div')
        }
    });

why not?? Is there any other way??? :thinking: :laughing: :laughing: :laughing: :innocent: :innocent:

If there is no way, I’m going to do a way to record on the client. But is this possible in vue js??
Do you have a vue js or javascript reference?

I will wait for your reply thank you