将jitsi视频会议集成到自己的web网站:
源码:
html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link href="layui/css/layui.css" rel="stylesheet">
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script id="script"></script>
<style>
#resourceError {
margin: 0 auto;
text-align: center;
}
#resourceError img {
width: 20%;
}
#resourceError div {
font-size: 20px;
color: gray;
}
#resourceError button {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="meet"></div>
<div id="resourceError" class="layui-hide">
<img src="img/resource_no_load.png">
<div>
<span style="width: 20%">资源加载失败,请检查媒体服务器URL以及媒体服务器状态</span>
</div>
<button class="layui-btn layui-btn-primary layui-border" lay-on="refresh">刷新</button>
</div>
<script>
layui.use(['form', 'util', "jquery", "layer"], function () {
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var $ = layui.jquery;
var index = layer.load('加载中', {
shade: 0.1
});
const domain = 'localhost:8443';
const options = {
roomName: '房间名',
userInfo: {
displayName: '用户名'
},
width: document.body.clientWidth - 20,
height: 800,
parentNode: document.querySelector('#meet'),
};
// 创建一个新的脚本元素
const script = document.getElementById('script');
// 设置脚本元素的 src 属性为资源的 URL
script.src = 'https://' + domain + '/external_api.js';
// 资源加载完成
function resourceLoaded() {
$("#resourceError").addClass("layui-hide");
layer.close(index); // 关闭 loading
const api = new JitsiMeetExternalAPI(domain, options);
// 监听会议结束
api.addEventListener('readyToClose', function () {
// 执行跳转操作:跳转到首页,默认跳转到jitsi首页
window.top.location.href = '/index';
});
// 获取 Jitsi Meet Web 页面顶部的标志元素(logo)
// 去除jitsi logo
const logoElement = document.querySelector('.watermark');
if (logoElement) {
logoElement.remove();
}
}
// 资源加载出错
function resourceError() {
layer.close(index);
console.log('媒体资源加载失败,请检查访问URL或者Jitsi服务器')
layer.msg('媒体资源加载失败,请检查访问URL或者Jitsi服务器', {icon: 2, time: 5000});
$("#resourceError").removeClass("layui-hide");
}
// 监听脚本元素的 load 和 error 事件,并调用回调函数
script.addEventListener('load', resourceLoaded);
script.addEventListener('error', resourceError);
// 将脚本元素添加到页面的 <head> 元素中
document.head.appendChild(script);
util.on('lay-on', {
refresh: function () {
location.reload()
},
})
})
</script>
</body>
</html>
温馨提示:
更多参数请参考官网:通过iframe将jitsi集成到自己网站