React jitsi 二次开发
jitsi-meet react 二次开发
“name”: “jitsi-meet”,
“version”: “0.0.0”,
“description”: “A sample app for the Jitsi Videobridge”,
“repository”: {
“type”: “git”,
“url”: “git://github.com/jitsi/jitsi-meet”
},
“keywords”: [
“jingle”,
“webrtc”,
“xmpp”,
“browser”
],
1 后端在state/conference监听平台开开会的情况stats/conference下监听到所有开会的情况.
{
"gid": 99520,
"createTime": 1666595397974,
"subject": "%E5%90%88%E5%8F%8B%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8-zyw-50-221024150939",
"members": [
{
"role": "OWNER",
"jid": "[email protected]/zJ4X5IWV",
"statsId": "Katlyn-1hQ",
"name": "6a139f7f"
},
{
"role": "GUEST",
"jid": "e56f5745-30f1-40e7-b813-f2e510f0faaa@guest.zhmeet.zhushucloud.com/zc_cGN0w",
"statsId": "Elwin-f6F",
"name": "e56f5745"
}
],
"creatorId": "",
"creatorDisPlayName": "张三",
"room": "%e5%90%88%e5%8f%8b%e7%bd%91%e7%bb%9c%e7%a7%91%e6%8a%80%e6%9c%89%e9%99%90%e5%85%ac%e5%8f%b8-zyw-50-221024150939"
},
类似以上数据结构，能够实现定义subject, creatorId, creatorDisplayName可以的内容。
以上信息出members 之外都 保存再 项目的config目录下，并且直接全局使用，即window.config,在项目中，
/jitsi-meet/react/features/base/config/middleware.js中
if (typeof window.config !== 'undefined') {
window.config = state['features/base/config'];
}
代码执行顺序
1 react/features/app/components/AbstractApp.js
APP接口规范中
在componentDidMount 中 触发
_openURL(url) {
this.state.store.dispatch(appNavigate(toURLString(url)));
}
2 由store.dispatch 到 app下的 actions.appNavigate. 该方法完成主要的项目的config配置
主要 locationUrl的配置。
dispatch(setLocationURL(locationURL));
dispatch(setConfig(config));
console.log('设置Room 1 ', room);
// dispatch();
// 设置ROOM 名称
dispatch(setRoom(room));
//console.log('设置subject--1', room, 'room');
//dispatch(setSubject(room));
在这里我们看到由设置config 的配置项，我们在这里更改config的配置项，
window.config = state[‘features/base/config’];
由该代码完成对配置项的修改。
3 在setLocationURL中完成了对jwt的设置
react/features/base/jwt/middleware.js
中setLocation
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case SET_CONFIG:
case SET_LOCATION_URL:
// XXX The JSON Web Token (JWT) is not the only piece of state that we
// have decided to store in the feature jwt
return _setConfigOrLocationURL(store, next, action);
case SET_JWT:
return _setJWT(store, next, action);
}
return next(action);
});
在JWT中的react/features/base/jwt/middleware.js完成对jwt的jwt路径保存。
function _setConfigOrLocationURL({
dispatch, getState }, next, action) {
const result = next(action);
const {
locationURL } = getState()['features/base/connection'];
dispatch(
setJWT(locationURL ? parseJWTFromURLParams(locationURL) : undefined));
return result;
}
再SETjWT 方法中完成对jwt信息的解析。
function _setJWT(store, next, action) {
// eslint-disable-next-line no-unused-vars
const {
jwt, type, ...actionPayload } = action;
if (!Object.keys(actionPayload).length) {
if (jwt) {
let jwtPayload;
try {
jwtPayload = jwtDecode(jwt);
} catch (e) {
logger.error(e);
}
if (jwtPayload) {
const {
context, iss, sub } = jwtPayload;
action.jwt = jwt;
action.issuer = iss;
if (context) {
const user = _user2participant(context.user || {
});
action.callee = context.callee;
action.group = context.group;
action.server = context.server;
action.tenant = context.tenant || sub || undefined;
action.user = user;
console.log(user, action, 'user-action');
user && _overwriteLocalParticipant(
store, {
...user,
features: context.features });
}
}
} else if (typeof APP === 'undefined') {
// The logic of restoring JWT overrides make sense only on mobile.
// On Web it should eventually be restored from storage, but there's
// no such use case yet.
const {
user } = store.getState()['features/base/jwt'];
user && _undoOverwriteLocalParticipant(store, user);
}
}
return next(action);
}
在该方法中可以将用户信息解析出来，保存在redux中jwt。
再jwt 的中间件中_setJWT中，调用 _undoOverwriteLocalParticipant 方法实现对参与者者的更新。
dispatch(participantUpdated(newProperties));
export function participantUpdated(participant = {
}) {
const participantToUpdate = {
...participant
};
if (participant.name) {
participantToUpdate.name = getNormalizedDisplayName(participant.name);
}
return {
type: PARTICIPANT_UPDATED,
participant: participantToUpdate
};
}
在参与者redux模块中利用中间件更新参与者信息
react/features/base/participants/middleware.js
中_participantJoinedOrUpdated方法。
更新加入会议时用户的信息
prejoin 外成包裹 prejoinApp组建，在prejoin组件中拿到的基础信息是由外部组件完成后，通过props传递进去的。
prejoinApp中
在componentDidMount生命周期中。
batch(() => {
dispatch(initPrejoin(tracks, errors));
dispatch(makePrecallTest(getConferenceOptions(store.getState())));
});
在文件中react/features/prejoin/actions.js中
export function initPrejoin(tracks: Object[], errors: Object) {
return async function(dispatch: Function) {
dispatch(setPrejoinDeviceErrors(errors));
dispatch(prejoinInitialized());
tracks.forEach(track => dispatch(trackAdded(track)));
};
}
使用prejoinInitialized完成对参与者信息的初始化，定位到
react/features/base/settings/middleware.js
中
case PREJOIN_INITIALIZED: {
_maybeUpdateDisplayName(store);
break;
}