Jitsi/React JS:使主持人能够将每个参与者踢出房间



我目前正在制作一个视频会议应用程序,使用Node作为后端,使用Jitsi作为前端的reactJS。我正在使用Jitsi外部API和反应库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)。

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

在jitsConfig中将disableingKick传递为true有效,可以禁用将用户踢出的功能。

是否有任何配置可以允许主持人踢掉参与者,或者至少获得主持人的身份?非常感谢。

我的反应代码:

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

api.getParticipantsInfo()

函数获取一组参与者我已经实现了

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

最新更新