基于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) “按钮。
1

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

输入’laravel-video-chat’;

选择你心仪的地址;

选择Vue.js;

选择Laravel;


完成注册后,点击“应用密码”选项,查看凭证。
3
用上述凭证更新你的.env文件。

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

最后,启用客户端事件。

点击“应用设置”选项,勾选“启用客户端事件”,点击“更新”。
4
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创建一个新的文件。

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


创建前端

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

创建组件后,添加以下代码:

// VideoChat.vue
<template>
<div class="container">
<h1 class="text-center">Laravel Video Chat</h1>
</div>
</template>
<script></script>

然后,打开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')
<video-chat :user="{{ $user }}" :others="{{ $others }}" pusher-key="{{ config('broadcasting.connections.pusher.key') }}" pusher-cluster="{{ config('broadcasting.connections.pusher.options.cluster') }}"></video-chat>
@endsection

编辑 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。另外,你还需要设置数据库来完成用户注册。

最后,点击“与(用户名)对话”按钮,你就能看到远程用户了。

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

参考资料:Laravel Web RTC tutorial in Japanese, Laravel Web RTC tutorial in React

文章地址:https://medium.com/@otacorporation0520/create-a-video-chat-application-with-laravel-7-vue-js-based-on-webrtc-58c88a503c17
原文作者:Takaaki Ota

推荐阅读
作者信息
jemmayb
TA 暂未填写个人简介
文章
26
相关专栏
开源技术
64 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。