172 lines
6.2 KiB
HTML
172 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>视频会议</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
#jitsi-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="jitsi-container"></div>
|
||
|
||
<script>
|
||
// 从URL参数获取Jitsi会议链接
|
||
function getQueryParam(name) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get(name);
|
||
}
|
||
|
||
const jitsiUrl = getQueryParam('url');
|
||
if (!jitsiUrl) {
|
||
console.error('未提供Jitsi会议URL');
|
||
alert('会议链接无效');
|
||
} else {
|
||
console.log('加载Jitsi会议:', jitsiUrl);
|
||
|
||
// 解析Jitsi URL获取域名和房间名
|
||
try {
|
||
const url = new URL(jitsiUrl);
|
||
const domain = url.hostname;
|
||
const roomName = url.pathname.substring(1); // 去掉开头的 /
|
||
|
||
console.log('Jitsi域名:', domain);
|
||
console.log('房间名:', roomName);
|
||
|
||
// 动态加载Jitsi External API
|
||
const script = document.createElement('script');
|
||
script.src = `https://${domain}/external_api.js`;
|
||
script.onload = function() {
|
||
console.log('Jitsi API加载成功');
|
||
initJitsi(domain, roomName);
|
||
};
|
||
script.onerror = function() {
|
||
console.error('Jitsi API加载失败');
|
||
// 如果API加载失败，直接用iframe加载
|
||
loadJitsiIframe(jitsiUrl);
|
||
};
|
||
document.head.appendChild(script);
|
||
} catch (e) {
|
||
console.error('解析Jitsi URL失败:', e);
|
||
// 解析失败，直接用iframe加载
|
||
loadJitsiIframe(jitsiUrl);
|
||
}
|
||
}
|
||
|
||
// 使用Jitsi External API初始化会议
|
||
function initJitsi(domain, roomName) {
|
||
const options = {
|
||
roomName: roomName,
|
||
width: '100%',
|
||
height: '100%',
|
||
parentNode: document.querySelector('#jitsi-container'),
|
||
interfaceConfigOverwrite: {
|
||
SHOW_JITSI_WATERMARK: false,
|
||
SHOW_WATERMARK_FOR_GUESTS: false,
|
||
TOOLBAR_BUTTONS: [
|
||
'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
|
||
'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
|
||
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
|
||
'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
|
||
'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone'
|
||
]
|
||
},
|
||
configOverwrite: {
|
||
startWithAudioMuted: false,
|
||
startWithVideoMuted: false
|
||
}
|
||
};
|
||
|
||
const api = new JitsiMeetExternalAPI(domain, options);
|
||
|
||
// 监听会议事件
|
||
api.addEventListener('videoConferenceJoined', function(event) {
|
||
console.log('用户加入会议:', event);
|
||
sendMessageToUniApp({ event: 'videoConferenceJoined', data: event });
|
||
});
|
||
|
||
api.addEventListener('videoConferenceLeft', function(event) {
|
||
console.log('用户离开会议:', event);
|
||
sendMessageToUniApp({ event: 'videoConferenceLeft', data: event });
|
||
});
|
||
|
||
api.addEventListener('participantLeft', function(event) {
|
||
console.log('参与者离开:', event);
|
||
sendMessageToUniApp({ event: 'participantLeft', data: event });
|
||
});
|
||
|
||
api.addEventListener('readyToClose', function() {
|
||
console.log('会议准备关闭');
|
||
sendMessageToUniApp({ event: 'readyToClose' });
|
||
});
|
||
|
||
// 保存API实例供外部调用
|
||
window.jitsiApi = api;
|
||
}
|
||
|
||
// 使用普通iframe加载（fallback方案）
|
||
function loadJitsiIframe(url) {
|
||
console.log('使用iframe加载Jitsi');
|
||
const iframe = document.createElement('iframe');
|
||
iframe.src = url;
|
||
iframe.style.width = '100%';
|
||
iframe.style.height = '100%';
|
||
iframe.style.border = 'none';
|
||
iframe.allow = 'camera; microphone; fullscreen; display-capture';
|
||
document.getElementById('jitsi-container').appendChild(iframe);
|
||
}
|
||
|
||
// 发送消息给uni-app
|
||
function sendMessageToUniApp(message) {
|
||
console.log('发送消息给uni-app:', message);
|
||
|
||
// 尝试多种方式发送消息
|
||
if (window.uni && window.uni.postMessage) {
|
||
// uni-app环境
|
||
window.uni.postMessage({
|
||
data: message
|
||
});
|
||
}
|
||
|
||
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.uni) {
|
||
// iOS环境
|
||
window.webkit.messageHandlers.uni.postMessage(message);
|
||
}
|
||
|
||
if (window.parent !== window) {
|
||
// iframe环境
|
||
window.parent.postMessage(message, '*');
|
||
}
|
||
}
|
||
|
||
// 监听来自uni-app的消息
|
||
window.addEventListener('message', function(event) {
|
||
console.log('收到消息:', event.data);
|
||
|
||
if (event.data && event.data.action) {
|
||
switch (event.data.action) {
|
||
case 'hangup':
|
||
if (window.jitsiApi) {
|
||
window.jitsiApi.executeCommand('hangup');
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|