基於 Mediasoup 的 Abp vNext 視頻會議模塊

一、安裝

1、創建項目

# 當前目錄：任意
mkdir Sample && cd Sample
abp new Sample

2、安裝 Tubumu.Abp.Meeting 模塊

使用 Abp CLI 安裝:

# 當前目錄：Sample
cd src/Sample.Web
# 當前目錄：Sample/src/Sample.Web
abp add-package Tubumu.Abp.Meeting

或者手工安裝，在 Nuget 搜索 Tubumu.Abp.Meeting 並安裝，然后修改 SampleWebAbpModule:

// File: Sample/src/Sample.Web/SampleWebModule.cs
// ...
    typeof(AbpSwashbuckleModule),
    // 配置點：1
    typeof(TubumuAbpMeetingModule)
    )]
public class SampleWebModule : AbpModule
// ...

3、下載配置文件及修改 IP

將 mediasoupsettings.json 配置文件下載到 Sample.Web 項目中。

# 當前目錄：Sample/src/Sample.Web
curl -o mediasoupsettings.json https://raw.githubusercontent.com/albyho/Tubumu.Abp.Meeting/main/samples/Tubumu.Abp.Meeting.Sample/src/Tubumu.Abp.Meeting.Sample.Web/mediasoupsettings.json

打開 mediasoupsettings.json 配置文件，搜索 AnnouncedIp 鍵將值修改為本機在局域網中的 IP 或者公網 IP。

// File: Sample/src/Sample.Web/mediasoupsettings.json
// ...
    "WebRtcTransportSettings": {
      "ListenIps": [
        {
          "Ip": "0.0.0.0",
          "AnnouncedIp": "192.168.1.5" // 修改為本機在在局域網中的 IP 或者公網 IP 。
        }
      ],
      "InitialAvailableOutgoingBitrate": 1000000,
      "MinimumAvailableOutgoingBitrate": 600000,
      "MaxSctpMessageSize": 262144,
      // Additional options that are not part of WebRtcTransportOptions.
      "MaximumIncomingBitrate": 1500000
    },
    // 用於 FFmpeg 推流
    "PlainTransportSettings": {
      "ListenIp": {
        "Ip": "0.0.0.0",
        "AnnouncedIp": "192.168.1.5" // 修改為本機在在局域網中的 IP 或者公網 IP 。
      },
      "MaxSctpMessageSize": 262144
    }
// ...

4、Web 前端

可將 Sample 的前端項目的源碼是 tubumu-abp-meeting-sample-client 編譯並復制到 Sample.Web 項目的 wwwroot 目錄下。比如：Sample/src/Sample.Web/wwwroot/meeting 目錄。

# 當前目錄：tubumu-abp-meeting-sample-client
yarn build
cp -R ./dist/* xxxx/Sample.Web/meeting

注意：如有必要，請修改 index.html 文件中的 css 和 js 的路徑。

5、新增菜單

菜單鏈接至 Web 前端的首頁。

// File: Sample/src/Sample.Web/Menus/SampleMenus.cs
public class SampleMenus
{
    private const string Prefix = "Sample";
    public const string Home = Prefix + ".Home";

    //Add your menu items here...

    // `Meeting` menu item
    public const string Meeting = Prefix + ".Meeting";
}

// File: Sample/src/Sample.Web/Menus/SampleMenuContributor.cs
private async Task ConfigureMainMenuAsync(MenuConfigurationContext context)
{
    if (!MultiTenancyConsts.IsEnabled)
    {
        var administration = context.Menu.GetAdministration();
        administration.TryRemoveMenuItem(TenantManagementMenuNames.GroupName);
    }

    var l = context.GetLocalizer<SampleResource>();

    context.Menu.Items.Insert(0, new ApplicationMenuItem(SampleMenus.Home, l["Menu:Home"], "~/"));
    // `Meeting` menu item
    context.Menu.Items.Insert(1, new ApplicationMenuItem(SampleMenus.Meeting, "Meeting", "~/meeting/index.html"));
}

二、啟動

1. 將 Sample.Web 設為啟動項進行啟動。

2. 打開一個或多個瀏覽器並登錄。如果是局域網或公網還可以通過其他電腦或手機訪問。

3. 訪問會議頁面。操作流程請參考錄屏和截圖。

三、錄屏

四、截圖

Screenshots