jitsi音视频会议集成到自己的网页中

将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集成到自己网站

相关推荐
音视频牛哥12 小时前
从协议规范和使用场景探讨为什么SmartMediaKit没有支持DASH
人工智能·音视频·大牛直播sdk·dash·dash还是rtmp·dash还是rtsp·dash还是hls
音视频牛哥13 小时前
SmartMediaKit:如何让智能系统早人一步“跟上现实”的时间架构--从实时流媒体到系统智能的演进
人工智能·计算机视觉·音视频·音视频开发·具身智能·十五五规划具身智能·smartmediakit
音视频牛哥13 小时前
超清≠清晰:视频系统里的分辨率陷阱与秩序真相
人工智能·机器学习·计算机视觉·音视频·大牛直播sdk·rtsp播放器rtmp播放器·smartmediakit
johnny23314 小时前
AI视频创作工具汇总:MoneyPrinterTurbo、KrillinAI、NarratoAI、ViMax
人工智能·音视频
EasyCVR17 小时前
视频融合平台EasyCVR级联失败问题排查:请求上级播放后,视频为何无法打开?
音视频
ACP广源盛1392462567318 小时前
(ACP广源盛)GSV2231---DisplayPort 1.4 MST 到 HDMI 2.0/DP/Type-C 转换器(带嵌入式 MCU)
c语言·开发语言·单片机·嵌入式硬件·音视频·mst
范纹杉想快点毕业19 小时前
12个月嵌入式进阶计划ZYNQ 系列芯片嵌入式与硬件系统知识学习全计划(基于国内视频资源)
c语言·arm开发·单片机·嵌入式硬件·学习·fpga开发·音视频
星光一影21 小时前
打车/网约车、代驾、顺风车/拼车、货运、租车等多种出行服务的一站式解决方案
mysql·微信小程序·php·uniapp·html5·web app
星光一影1 天前
悬赏任务平台/拉新地推系统源码
redis·mysql·小程序·php·uniapp·html5
Hody911 天前
【XR技术介绍】空间音频(Spatial Audio):原理是什么?如何让声音听起来像是从你身后传来的?
音视频·xr