基于WebRTC 如何借助Laravel 7和Vue.js创建视频聊天应用

本文介绍了如何借助Vue.js和Laravel 7创建一个简单的视频聊天应用。

如何实现视频聊天

我们会用到一个免费的开源项目WebRTC（Web实时通信），它能为Web浏览器和手机应用程序提供实时通信。

概述

步骤1——安装和设置Laravel

步骤2——安装npm包

步骤3——创建Pusher账户

步骤4——创建页面

步骤5——测试

步骤1 安装Laravel UI和Vue包

安装Laravel

laravel new laravel-video-chat

既然Laravel已经安装完毕了, 接下来我们就来安装Vue.js前端脚手架。安装要运行以下步骤:

cd laravel-video-chat
composer require laravel/ui
php artisan ui vue --auth

然后

npm install && npm run dev

最后

php artisan serve

现在你可以访问http://127.0.0.1:8000来查看Laravel的默认页面。

注：WebRTC仅在开源安全(HTTPS或localhost)情况下可用。所以如果你使用的不是localhost, 请换成HTTPS来运行操作。

步骤2——安装所需包

在你的终端中，通过运行以下命令安装 “simple-peer “和 “pusher-js”：

npm install simple-peer --save-dev
npm install pusher-js --save-dev

之后，按照本项目需求，用Composer添加PHP库与Pusher交互：

composer require pusher/pusher-php-server

步骤3——创建Pusher账号

前往Pusher网站注册账号。

账户创建后，点击仪表盘中的 “创建应用（Create app） “按钮。

填写注册表。完善以下信息：

输入’laravel-video-chat’；

选择你心仪的地址；

选择Vue.js；

选择Laravel；

完成注册后，点击“应用密码”选项，查看凭证。

用上述凭证更新你的.env文件。

.env
PUSHER_APP_ID=******
PUSHER_APP_KEY=********************
PUSHER_APP_SECRET=********************
PUSHER_APP_CLUSTER=ap3

最后，启用客户端事件。

点击“应用设置”选项，勾选“启用客户端事件”，点击“更新”。

Pusher的设置到这里就全部完成了。

步骤4——创建页面

现在需要我们编写代码了。

定义路径

如下所示，在你的route/web.php中定义route：

// web.php
Route::group([‘middleware’ => ‘auth’], function(){
  Route::get(‘video_chat’, ‘VideoChatController@index’);
  Route::post(‘auth/video_chat’, ‘VideoChatController@auth’);
});

创建控制器

要运行项目，首先要在你的终端上运行artisan命令来创建一个新的控制器。

php artisan make:controller VideoChatController

该命令会在app/Http/Controllers/VideoChatController.php创建一个新的文件。

打开新创建的控制器进行修改，修改内容如下：

// VideoChatController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use PusherPusher;
class VideoChatController extends Controller
{
    public function index(Request $request) {
        $user = $request->user();
        $others = AppUser::where('id', '!=', $user->id)->pluck('name', 'id');
        return view('video_chat.index')->with([
            'user' => collect($request->user()->only(['id', 'name'])),
            'others' => $others
        ]);
    }
    
    public function auth(Request $request) {
        $user = $request->user();
        $socket_id = $request->socket_id;
        $channel_name = $request->channel_name;
        $pusher = new Pusher(
            config('broadcasting.connections.pusher.key'),
            config('broadcasting.connections.pusher.secret'),
            config('broadcasting.connections.pusher.app_id'),
            [
                'cluster' => config('broadcasting.connections.pusher.options.cluster'),
                'encrypted' => true
            ]
        );
        return response(
            $pusher->presence_auth($channel_name, $socket_id, $user->id)
        );
    }
}

创建前端

接下来，在resources/js/components文件夹中创建一个新的Vue组件VideoChat.vue，用来容纳我们的视频聊天房间逻辑。

创建组件后，添加以下代码：

// VideoChat.vue

然后，打开resources/js/app.js，在ExampleComponent下添加以下代码，全局定义我们的新组件。

// app.js
Vue.component(‘video-chat’, require(‘./components/VideoChat.vue’).default);

最后，我们需要创建resources/views/video_chat/index.blade.php来显示我们的组件：

// index.blade.php
@extends('layouts.app')
@section('content')

@endsection

编辑Vue组件

按以下代码更新VideoChat.vue：

VideoChat.vue

我来解释一下setupVideoChat函数里一些主要的代码部分。

1. 使用navigator.mediaDevices.getUserMedia访问设备；

2. 调用getPusherInstance来实例化Pusher实例。我们要在标题中传递’X-CSRF-Token’来进行验证；

3. 绑定client-signal-${this.user.id}通道来接收事件；

4. 在getPeer函数里创建一个新的WebRTC对等连接，设置signal、stream和close等基本操作。

当对等端要向远程端发送信令数据时，signal启动。stream用来接收可用视频标签显示的远程视频流。

close会在对等端连接关闭时被调用。

步骤5——测试

如果你很长时间没更新了，可能就需要重新编译代码，以便Vue检测我们所做出的改变。运行npm run dev，确保你在一个独立终端中运行php artisan serve，刷新浏览器。

然后创建2个用户，在不同的浏览器中登录，加载http://127.0.0.1:8000/video_chat。另外，你还需要设置数据库来完成用户注册。

最后，点击“与（用户名）对话”按钮，你就能看到远程用户了。

希望本篇文章能对你有所帮助！