README

此包提供了一种在 Laravel 框架中通过 Agora API 进行视频通话的易于使用的封装。服务器端实现可以与任何 JavaScript 框架（或没有任何框架）一起使用，但此包还包含一组可立即使用的 Vue 组件，可用于客户端实现。

安装

通过 composer 安装包

composer require tipoff/laravel-agora-api

您可以使用以下命令发布所有包资源（包括前端资源）

php artisan vendor:publish --provider="Tipoff\LaravelAgoraApi\LaravelAgoraApiServiceProvider"

您可以使用以下命令仅发布配置文件

php artisan vendor:publish --tag=agora-config

从 Agora 获取应用 ID 和证书： https://www.agora.io/en/。

将以下变量添加到您的 .env 文件中。 （额外的配置变量在 agora 配置文件中指定，但这些是使用包所需的最小变量。）

AGORA_APP_ID={id-obtained-from-Agora}
AGORA_APP_CERTIFICATE={certificate-obtained-from-Agora}

如果需要，发布配置文件并自定义用于生成用户显示名称的字段，通过更改 user_display_name.fields 和 user_display_name.separator 字段。

服务器端使用

获取 Agora 令牌

/agora/retrieve-token

发起通话（触发事件以开始通话）

/agora/place-call

安装可选的前端 Vue 资源

此包附带一组 Vue 组件，您可以使用它们与服务器端功能一起使用。 您不需要使用这些组件即可使用服务器端调用。 但是，如果您想使用它们，请按照以下步骤在您的应用程序中安装和配置它们

发布 JavaScript 资产

您可以使用以下命令发布资产

php artisan vendor:publish --tag=agora-js

通过 NPM 安装 JS 依赖项

npm install vue vuex agora-rtc-sdk-ng laravel-echo

导入和初始化 Vue 和 Vuex

在您的 resources/js/app.js 文件中，添加以下部分的代码

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const app = new Vue({
    el: '#app'
});

注册 Vue 组件

import AgoraVideoDisplay from './vendor/laravel-agora-api/components/AgoraVideoDisplay.vue';
import AgoraUserList from './vendor/laravel-agora-api/components/AgoraUserList.vue';
import AgoraIncomingCallAlert from './vendor/laravel-agora-api/components/AgoraIncomingCallAlert.vue';
...
Vue.component('agora-video-display', AgoraVideoDisplay);
Vue.component('agora-user-list', AgoraUserList);
Vue.component('agora-incoming-call-alert', AgoraIncomingCallAlert);

注册 Vuex 模块

此包使用 Vuex 模块来存储和修改与其功能相关的状态。这使您可以在其他任何组件中访问状态（例如，当有来电时打开模态框）。

import LaravelAgoraModule from './vendor/laravel-agora-api/modules/LaravelAgoraModule';
...
const store = new Vuex.Store({
    modules: {
        agora: LaravelAgoraModule
    }
})

将 Vuex 存储添加到 Vue 实例中，如下所示

const app = new Vue({
    el: '#app',
    store: store
});

完成资产注册

当您完成调整 app.js 文件后，它应类似于以下内容

import Vue from 'vue';
import Vuex from 'vuex';
import LaravelAgoraModule from './vendor/laravel-agora-api/modules/LaravelAgoraModule';
import AgoraVideoDisplay from './vendor/laravel-agora-api/components/AgoraVideoDisplay.vue';
import AgoraUserList from './vendor/laravel-agora-api/components/AgoraUserList.vue';
import AgoraIncomingCallAlert from './vendor/laravel-agora-api/components/AgoraIncomingCallAlert.vue';
import AgoraCallOutgoingAlert from './vendor/laravel-agora-api/components/AgoraCallOutgoingAlert.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        agora: LaravelAgoraModule
    }
})

Vue.component('agora-video-display', AgoraVideoDisplay);
Vue.component('agora-user-list', AgoraUserList);
Vue.component('agora-incoming-call-alert', AgoraIncomingCallAlert);
Vue.component('agora-outgoing-call-alert', AgoraCallOutgoingAlert);

const app = new Vue({
    el: '#app',
    store: store
});

设置广播和 Laravel Echo

如 Laravel 文档中所述设置应用程序的广播：https://laravel.net.cn/docs/broadcasting。

注意：不要忘记在您的 app.php 配置文件中取消注释 App\Providers\BroadcastServiceProvider::class。

转译和放置资产

运行 npm run dev 以转译资产。现在您可以使用 Vue 组件在应用程序中这样使用

<agora-video-display
    current-user-id="{{ Auth::id() }}"
    current-user-name="{{ \Tipoff\LaravelAgoraApi\Services\DisplayNameService::getDisplayName(Auth::user()) }}"
    echo-channel-name="{{ config('agora.channel_name') }}"
    agora-route-prefix="{{ config('agora.routes.prefix') }}"
    agora-app-id="{{ config('agora.credentials.app_id') }}"
></agora-video-display>

<agora-user-list></agora-user-list>

<agora-outgoing-call-alert></agora-outgoing-call-alert>

<agora-incoming-call-alert></agora-incoming-call-alert>

更新包资源

更新到较新版本的包后，使用 php artisan vendor:publish --tag=agora-js --force 确保更新包资源被重新发布到应用程序的 resources 目录。

组件样式

此包中可用的 Vue 组件在其 HTML 元素上附加了各种 CSS 类。这允许您“挂钩”到组件并对其进行样式化，而无需直接修改它们。您可以在单个 Vue 组件上查看可用的各种 CSS 类。

使用TailwindCSS编写的启动文件可以通过运行php artisan vendor:publish --tag=agora-css进行发布。发布后，将其包含在您的resources/css/app.css文件中（@import 'vendor/agora-component-styles.css';），Laravel Mix将为您将其转换到应用程序中（如果使用默认的Mix设置）。

贡献

请参阅贡献指南以获取详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

鸣谢

• Tipoff
• 所有贡献者

许可协议

MIT许可协议（MIT）。请参阅许可文件获取更多信息。