README

此包为 Laravel 框架中通过 Agora API 进行视频通话的便捷封装提供支持。服务器端实现可以与任何 JavaScript 框架（或完全不使用！）一起使用，但此包还包含一组可用于客户端实现的现成 Vue 组件。

安装

使用 composer 安装此包

composer require abdullahfaqeir/laravel-agora-api

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

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

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

php artisan vendor:publish --tag=laravel-agora-api-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=laravel-agora-api-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="{{ \AbdullahFaqeir\LaravelAgoraApi\Services\DisplayNameService::getDisplayName(Auth::user()) }}"
    echo-channel-name="{{ config('laravel-agora-api.channel_name') }}"
    agora-route-prefix="{{ config('laravel-agora-api.routes.prefix') }}"
    agora-app-id="{{ config('laravel-agora-api.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=laravel-agora-api-js --force 确保更新包资源已重新发布到您的应用程序的 resources 目录。

组件样式

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

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

abdullahfaqeir / laravel-agora-api

维护者

详情