Jitsi / React JS:使主机能够将所有参与者踢出房间

Question

我目前正在制作一个视频会议应用程序，使用节点作为后端，reactJS与Jitsi在前端。我使用的是Jitsi外部API和react库jutsu(https://github.com/this-fifo/jutsu)。我想让版主在每个参与者关闭聊天室时把他们踢出聊天室。我提到了另一个帖子，这个方法是循环彻底参与者(https://github.com/jitsi/lib-jitsi-meet/blob/4e5397685287d8d87f29591546f7c902eac22bf0/JitsiConference.js#L1368)并实现这个kickParticipant方法(https://github.com/jitsi/lib-jitsi-meet/blob/4e5397685287d8d87f29591546f7c902eac22bf0/JitsiConference.js#L1406)。

我尝试添加事件侦听器participantJoined事件，但我甚至无法记录参与者。

而在jitsiConfig中将disablingKick传递给true会起作用，并且会禁用将用户踢出去的功能。

有没有什么配置可以让版主踢出参与者，或者至少获得版主的身份？谢谢!

我的react代码：

​

import React, { useState, useEffect } from 'react';
import { Jutsu, useJitsi } from 'react-jutsu';
import {  Link } from 'react-router-dom';
    
function VideoCreateRoom({userName, currentWorkspace}) {
    //room represents hashed room
        const [room, setRoom] = useState('')
        const [customRoomName, setCustomRoomName] = useState('')
        const [password, setPassword] = useState('')
        const [call, setCall] = useState(false)
        const [jitsiInit, setJitsiInit] = useState({});
        // const [hostEndMeeting, setHostEndMeeting] = useState(false);
        const grabParticipantIdArr = [];

        //Jitsi config
        //create a container for jitsi
        const jitsiContainerId = "jitsi-container-id";

        //add Jitsi meet api script 
        const loadJitsiScript = () => {
            let resolveLoadJitsiScriptPromise = null;

            const loadJitsiScriptPromise = new Promise((resolve) => {
            resolveLoadJitsiScriptPromise = resolve;
            });

            const script = document.createElement("script");
            script.src = "https://meet.jit.si/external_api.js";
            script.async = true;
            script.onload = resolveLoadJitsiScriptPromise
            document.body.appendChild(script);

            return loadJitsiScriptPromise;
        };

        //load Jitsi Iframe
        const initialiseJitsi = async () => {
            if (!window.JitsiMeetExternalAPI) {
            await loadJitsiScript();
            }
            const myOverwrite ={
                 remoteVideoMenu: {
                        // If set to true the 'Kick out' button will be disabled.
                        disableKick: true
                    },
            }
            const options = {
                parentNode: document.getElementById(jitsiContainerId),
                // configOverwrite: myOverwrite
            }
            const _jitsi = new window.JitsiMeetExternalAPI("meet.jit.si", options); 
            setJitsiInit(_jitsi)
        };

        useEffect(() => {
            initialiseJitsi();
            return () => jitsiInit?.dispose?.();
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []);

       
        const handleClick = async(event) =>{
            event.preventDefault();
            
            const body = { userName, currentWorkspace, customRoomName} 
            try{
                console.log('sending video room info to server')
                const sendVideo = await fetch(`http://localhost:4000/workspace/${currentWorkspace}/video`,{
                    method:"POST",
                    headers: {
                        "Content-Type":"application/json",
                        "x-access-token": localStorage.getItem("token")
                    },
                    body: JSON.stringify(body)
                })
                const response = await sendVideo.json();
                setPassword(response.password);
                setRoom(response.room);
                if (customRoomName) setCall(true);
                
            }catch(e){
                console.error(e.message);
            }
        }

           
        const jitsiConfig = {
            configOverwrite:
            {
                remoteVideoMenu:
                {
                    disableKick: false,
                },
            },
            
        }
        const { jitsi } = useJitsi(jitsiConfig);
        console.log( jitsi, 'console log for reactJS warning');

        const grabParticipantsId = () =>{
            const participants = jitsiInit.addEventListener('participantJoined', function(values){
                grabParticipantIdArr.push(values);
                console.log(grabParticipantIdArr, 'this is grabParticipantIdArr ');
            })
        }
        
        useEffect(()=>{
            console.log(jitsiInit)
            grabParticipantsId();
        }, [jitsiInit])

        return call ? ( 
            <>
            <h1>You are the host of this meeting.</h1>
            <h2>Room name: {customRoomName}</h2>
            <h2>Password for participants: {password}</h2>
            
            <Jutsu
            roomName={room}
            displayName={userName}
            password={password}
            onMeetingEnd={
                () => {
                    console.log('Meeting has end')
                }
            }
            loadingComponent={<p>loading ...</p>}
            errorComponent={<p>Oops, something went wrong</p>} 
            containerStyles={{width: '100%', height: '70%'}}
            configOverwrite= {jitsiConfig.configOverwrite}
            />
            </>
                    
        ) : (
            <>
            <form>
                <button onClick={handleClick} type='submit' target="_blank">
                    Start video conferencing
                </button>
                <input id='name' type='text' placeholder='Name' value={customRoomName} onChange={(e) => setCustomRoomName(e.target.value)} />
            </form>
            <button>
                <Link to ={`/workspace/${currentWorkspace}/video/rooms`}>
                    Check out video rooms
                </Link>
                
            </button>
            </>
            
    )
    }
    
    export default VideoCreateRoom

​

Answer 1

api.getParticipantsInfo()

该函数获取我已实现的参与者数组

api.addEventListener('participantJoined', () => {
                setParticipant(api.getParticipantsInfo())
            }
            )