feat(Meeting): add Meeting component (#6092)

* 添加Meet示例

* 例子中添加更多说明以及支持自定义服务器地址

* doc: 增加菜单

* chore: 增加源码映射关系

* doc: 更新示例

* chore: 更新依赖

* refactor: 精简代码

---------

Co-authored-by: jx <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -45,6 +45,7 @@
     <PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.IP2Region" Version="9.0.1" />
+    <PackageReference Include="BootstrapBlazor.JitsiMeet" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.JuHeIpLocatorProvider" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Live2DDisplay" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.Markdown" Version="9.0.2" />

src/BootstrapBlazor.Server/Components/Samples/Meets.razor

@@ -0,0 +1,24 @@
+@page "/meet"
+
+<h3>JitsiMeet会议</h3>
+
+<h4>通过JitsiMeet创建会议</h4>
+
+<PackageTips Name="BootstrapBlazor.JitsiMeet" />
+
+<Tips class="mt-3">
+    <p>JitsiMeet是一个开源的WebRTC会议程序，可以自托管安装也可以使用官方的托管服务（免费计划为25MAU），此组件仅为JitsiMeet的客户端程序，不含服务端。</p>
+    <p>默认的测试会议仅支持5分钟的会议，并且主持人需要登录。子托管以及官方托管服务不需要。</p>
+</Tips>
+
+<DemoBlock Title="使用JitsiMeet创建会议室" Introduction="使用JitsiMeet创建会议室，支持执行命令，支持OnLoad回调（meet.jit.si不会触发回调也不会响应命令，请使用8x8.vc或子托管域名测试）。例子中隐藏了内置的邀请程序，无法在会议中找到邀请链接。" Name="Normal">
+    <section class="row form-inline g-3">
+        <div class="col-12 col-sm-6">
+            <Display Value="_domain" DisplayText="服务器地址" ShowLabel="true"></Display>
+        </div>
+        <div class="col-12 col-sm-6">
+            <Button OnClick="RunCommand">执行命令</Button>
+        </div>
+    </section>
+    <Meet @ref="@_meet" Option="@_option" Domain="@_domain" OnLoad="OnLoad"></Meet>
+</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Meets.razor.cs

@@ -0,0 +1,56 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Meet 视频会议组件示例
+/// </summary>
+public partial class Meets : ComponentBase
+{
+    private MeetOption? _option;
+    private Meet? _meet;
+    private readonly string _domain = "meet.jit.si";
+
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    /// <summary>
+    /// <inheritdoc />
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _option = new MeetOption
+        {
+            RoomName = "BootstrapBlazor",
+            Width = "100%",
+            Height = 700,
+            ConfigOverwrite = new
+            {
+                Lobby = new { EnableChat = false },
+                HiddenPremeetingButtons = new string[] { "invite" },
+                DisableInviteFunctions = true,
+                ButtonsWithNotifyClick = new[] { new { key = "invite", preventExecution = true } }
+            },
+            UserInfo = new UserInfo() { DisplayName = "BootstrapBlazor", Email = "[email protected]" }
+        };
+    }
+
+    private void OnLoad()
+    {
+        ToastService.Information("Meet 示例", "会议室加载完成");
+    }
+
+    private async Task RunCommand()
+    {
+        if (_meet != null)
+        {
+            await _meet.ExecuteCommand("toggleChat");
+        }
+    }
+}
+

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1208,6 +1208,12 @@ void AddNotice(DemoMenuItem item)
                     Url = "message"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Meet"],
+                    Url = "meet"
+                },
+                new()
                 {
                     Text = Localizer["Modal"],
                     Url = "modal"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4943,7 +4943,8 @@
     "TotpService": "ITotpService",
     "VideoDevice": "IVideoDevice",
     "AudioDevice": "IAudioDevice",
-    "FullScreenButton": "FullScreenButton"
+    "FullScreenButton": "FullScreenButton",
+    "Meet": "Meet"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4943,7 +4943,8 @@
     "TotpService": "时间密码验证服务 ITotpService",
     "VideoDevice": "视频设备服务 IVideoDevice",
     "AudioDevice": "音频设备服务 IAudioDevice",
-    "FullScreenButton": "全屏按钮 FullScreenButton"
+    "FullScreenButton": "全屏按钮 FullScreenButton",
+    "Meet": "视频会议组件 Meet"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",

src/BootstrapBlazor.Server/docs.json

@@ -233,7 +233,8 @@
     "otp-service": "OtpServices",
     "video-device": "VideoDevices",
     "audio-device": "AudioDevices",
-    "fullscreen-button": "FullScreenButtons"
+    "fullscreen-button": "FullScreenButtons",
+    "meet": "Meets"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",