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


    将jitsi视频会议集成到自己的web网站:

    源码:

    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);
            // 将脚本元素添加到页面的  元素中
            document.head.appendChild(script);
    
    
            util.on('lay-on', {
                refresh: function () {
                    location.reload()
                },
            })
        })
    script>
    body>
    html>
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114

    温馨提示:
    更多参数请参考官网:通过iframe将jitsi集成到自己网站

  • 相关阅读:
    企业数字化建设有哪些路线可以选择?
    随想录一刷Day53——动态规划
    python基础知识点
    C-12 分支语句
    笔记41:关于CIAC_PNC_4选用控制器的一些感悟
    vector使用和模拟实现
    [nodemon] app crashed - waiting for file changes before starting...解决方法
    Python 数据库基类封装
    Flow Problem hdu 3549 网络流模板题目
    ✔ ★ 算法基础笔记(Acwing)(六)—— 贪心【java版本】
  • 原文地址:https://blog.csdn.net/m0_52604918/article/details/132761924