Laravel在线教育平台（四）直播、七牛云、OBS、直播流管理、直播课程管理、首页直播、在线观看

Mr.Lee — Sat, 19 May 2018 15:42:11 +0000

Laravel框架实战-在线教育平台（4）

一、直播介绍【★★★】

1、术语介绍

直播：实时播放某个画面（国内最大的有yy、战旗、斗鱼tv、龙珠等）

点播：类似于重播，编辑好的视频，观众可以重任意时间段观看（优酷、土豆、爱奇艺等）

直播流：也可以称之为数据流，就是直播中的视频画面数据

七牛：目前比较大的云数据服务公司

直播和点播实现原理

1）概括

步骤1：采集视频画面数据，通过摄像机、手机、录屏软件等设备。

步骤2：用户打开视频播放器拉去视频中的数据播放

思考：直播和点播步骤1和步骤2的区别

回答：直播必须实时采集视频画面数据、点播是提前录制

直播流程详细说明

直播推流（push）：指视频画面数据，从采集点到服务器的过程。
直播拉流（pull）：指视频画面数据，从服务器到观众的过程。

直播初体验

1、申请直播云服务步骤

1）注册并登陆七牛云

官网网址：https://www.qiniu.com/
步骤

2）申请直播云服务，填写如下信息

3）填写完成后，要等待审核（目前：1~3个工作日）

4）审核通过后，重新选择‘立即添加’直播云服务

直播云服务管理

1）介绍

直播空间（1）对应 ‘直播流’（n）

‘直播流’（1）对应直播项目（1）

2）直播空间管理

创建空间

域名解析操作

设置推流地址

设置拉流地址

删除空间（慎用）

3）直播空间-直播流管理

初体验（一套直播实现流程）

【推流】使用OBS软件获将幕、摄像头等数据推送到七牛云

步骤1：打开OBS软件官网：http://www.obsapp.net/
步骤2：下载并安装（注：安装就是傻瓜式下一步即可）
步骤3：设置使用获取屏幕数据或者摄像头数据

步骤4：继续设置，将通过OBS软件获取的屏幕或摄像头等数据

内容推送到七牛云

获取推送地址

2）打开软件设置推送地址

rtmp://pili-publish.php12.sk-school.com/201801140001/test2?e=1515897779&token=RlWO59USAL86QtQ4LhYFWsAGjLZEYbgD5H9_Fhob:8_jLY7p5M34epelW0oKP66WBZ40=

红色填入：URL

绿色填入：流秘钥

多学一招：OBS就是一个软件，作用就是推送直播所需画面数据）

【拉流1】flash方式播放【直播】

ckplayer简单调用演示

【拉流2】html5方式播放【√】

仓库地址：https://github.com/huangyaoxin/hLive

fz-live

data-setup='{}’>

︴扩展

手机APP开发直播功能相关文档

三、直播流管理（在线教育后台）

1、准备

1）直播流表

后台直播流表

表名	stream
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	stream _name	varchar(200)	直播流名称	N
3	state	tinyint	直播流状态：1=正常，2=永久禁播，3=限时禁播	N	正常
4	created_at	int	创建于	N	0
5	update_at	int	更新于	N	0

步骤1：创建迁移文件并书写

步骤2：执行迁移文件

Schema::create(‘stream’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘stream_name’)->comment(‘直播流名称’);

$table->unsignedTinyInteger(‘state’)->default(1)->comment(‘直播流状态:1-正常,2-永久禁播,3-限时禁播’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

模型

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Stream extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘stream’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘stream_name’, ‘state’];

}

更改后台菜单

2、列表功能

1）加载视图

步骤1：路由

步骤2：创建控制器方法并加载视图

步骤3：创建视图

2）数据处理

步骤1：控制器方法调用模型查询所有数据并分页，传递给视图

namespace App\Http\Controllers\Admin;

use App\Http\Model\Stream;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class StreamController extends Controller

{

//列表

public function index()

{

//1.分页获取数据

$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);

//2.加载视图并传递数据

return view(‘admin.stream.index’, compact(‘streams’));

}

步骤2：视图循环显示即可

直播流管理

 批量删除

 添加直播流节点

共有数据：54 条

@foreach ($streams as $stream)

@endforeach

直播流节点
	{{ $stream->id }}	{{ $stream->stream_name }}	@if($stream->state == 1) 正常 @elseif($stream->state == 2) 永久禁用 @else 限时禁用 @endif	{{ $stream->created_at }}	 

直播流节点

数据流名称

状态

创建于

操作

@if($stream->state == 1)

正常

@elseif($stream->state == 2)

永久禁用

@else

限时禁用

@endif

 

添加功能

1）加载视图

步骤1：路由

步骤2：设置控制器方法并加载视图

步骤3：创建视图

2）数据处理

步骤1：更改路由

步骤2：更改视图

添加管理员 – 管理员管理 – H-ui.admin v3.1

步骤3：更改控制器

namespace App\Http\Controllers\Admin;

use App\Http\Model\Stream;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class StreamController extends Controller

{

//列表

public function index()

{

//1.分页获取数据

$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);

//2.加载视图并传递数据

return view(‘admin.stream.index’, compact(‘streams’));

}

//添加

public function add(Request $request)

{

//1.判断HTTP请求类型

if ($request->ismethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘stream_name’,’state’]);

//3.通过模型添加数据

$rs = Stream::create($postData);

//4.判断

echo $rs ? 1 : 0;

} else {

//2.加载视图并传递数据

return view(‘admin.stream.add’);

}

同步七牛云创建直播流

1）接口文档说明

接口说明：https://developer.qiniu.com/pili/api/2515/create-a-flow

安装配置工具库（七牛SDK、发送请求工具库）

七牛SDK（zgldh/qiniu-laravel-storage）

#【安装并配置】

发送请求工具库（guzzlehttp/guzzle）：是更加强大的curl

#【安装】composer require guzzlehttp/guzzle

#【基本语法】

$client = new \Guzzle\Client();

$client->request(方式，host，[headers body]);

使用

namespace App\Http\Controllers\Admin;

use App\Http\Model\Stream;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class StreamController extends Controller

{

//列表

public function index()

{

//1.分页获取数据

$streams = Stream::orderBy(‘id’, ‘desc’)->paginate(8);

//2.加载视图并传递数据

return view(‘admin.stream.index’, compact(‘streams’));

}

//添加

public function add(Request $request)

{

//1.判断HTTP请求类型

if ($request->ismethod(‘post’)) {

//直播流名称过滤：必须唯一

//2.接受数据

$postData = $request->only([‘stream_name’,’state’]);

//3.通过模型添加数据

$rs = Stream::create($postData);

//4.判断

if ($rs) {

//成功同步创建直播流

$method = ‘POST’; //HTTP请求类型

$space = ‘201801140002’; //空间名称（注：该空间必须存在）

$path = ‘/v2/hubs/’.$space.’/streams’; //请求接口地址

$host = ‘pili.qiniuapi.com’; //接口请求域名

$contentType = ‘application/json’;

$body = json_encode([ //将请求体数据转化为json格式

‘key’=>$request->input(‘stream_name’)

]);

//根据请求包，我们要制作鉴权信息(用于验证请求包在传输中是否被篡改)；

//Authorization:

//生成签名字符串；

$data = “$method $path\nHost: $host\nContent-Type: $contentType\n\n$body”;

$ak = config(‘filesystems.disks.qiniu.access_key’); //通过config函数获取配置文件信息

$sk = config(‘filesystems.disks.qiniu.secret_key’);

$qiniu = new \Qiniu\Auth($ak,$sk);

$token = “Qiniu “.$qiniu->sign($data); //根据HTTP请求鉴权接口生成秘钥

//利用GuzzleHttp发送请求表

$cli = new \GuzzleHttp\Client();

$res = $cli->request($method, $host.$path, [

‘headers’ => [

‘Authorization’ => $token,

‘Content-Type’ => $contentType,

‘Accept-Encoding’ => ‘gzip’,

‘Content-Length’ => strlen($body),

‘User-Agent’ => ‘pili-sdk-go/v2 go1.6 darwin/amd64’,

‘body’=>$body,

]);

//var_dump($res);die;

}

echo $rs ? 1 : 0;

} else {

//2.加载视图并传递数据

return view(‘admin.stream.add’);

}

四、直播课程管理（在线教育后台）

1、准备

1）直播课程流表

后台直播课程表

表名	live
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	live_name	varchar(200)	直播课程名称	Y
3	stream_id	int	所属直播流	Y
4	img	varchar(255)	封面	N
5	start_time	int	直播开始时间	Y
6	end_time	int	直播结束时间	Y
7	created_at	int	创建于	N	0
8	update_at	int	更新于	N	0

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateLiveTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create(‘live’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘live_name’, 200)->comment(‘直播课程名称’);

$table->unsignedInteger(‘stream_id’)->comment(‘所属直播流’);

$table->string(‘img’)->default(”)->comment(‘封面’);

$table->unsignedInteger(‘start_time’)->default(0)->comment(‘直播开始时间’);

$table->unsignedInteger(‘end_time’)->default(0)->comment(‘直播结束时间’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘更新于’);

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists(‘live’);

}

2）模型

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Live extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘live’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘live_name’, ‘stream_id’, ‘img’, ‘start_time’, ‘end_time’];

}

2、列表功能

步骤1：路由

步骤2：创建控制器方法，分页获取数据，加载视图并传递数据

namespace App\Http\Controllers\Admin;

use App\Http\Model\Live;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class LiveController extends Controller

{

//列表

public function index()

{

//1.分页获取数据

$lives = Live::orderBy(‘id’, ‘desc’)->paginate(8);

//2.加载视图并传递数据

return view(‘admin.stream.index’, compact(‘lives’));

}

步骤3：创建视图

直播课程管理

 批量删除

 添加直播课程节点

共有数据：54 条

@foreach ($lives as $live)

@endforeach

直播课程节点
	{{ $live->id }}	@if ($live->img ) img }}” /> @else @endif	{{ $live->start_time }}	{{ $live->end_time }}	{{ $live->created_at }}	 

直播课程节点

封面

直播课程名称

直播开始时间

直播结束时间

创建于

操作

@if ($live->img )

img }}” />

@else

@endif

 

3、添加功能

1）加载视图

步骤1：路由

步骤2：创建控制器对应方法并加载视图

步骤3：创建视图

步骤1：

步骤2：打开列表页，设置添加弹出看连接

2）加载视图（修改form表单）

步骤1：控制器方法获取所有直播流数据传递给视图显示

步骤2：更改form表单

添加管理员 – 管理员管理 – H-ui.admin v3.1

3）数据处理

表单验证插件：http://validform.rjboy.cn/

后台表单提交插件说明：https://www.cnblogs.com/si-shaohua/p/3780321.html

步骤1：更改表单插件

添加管理员 – 管理员管理 – H-ui.admin v3.1

步骤2：数据处理

//添加方法

public function add(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘live_name’, ‘stream_id’, ‘start_time’, ‘end_time’]);

$postData[‘start_time’] = strtotime($postData[‘start_time’]);

$postData[‘end_time’] = strtotime($postData[‘end_time’]);

//3.插入数据库

$rs = Live::create($postData);

//4.判断状态

echo $rs ? 1 : 0;

} else {

//2.获取所有直播流数据

$streams = Stream::get();

//3.加载视图并传递数据

return view(‘admin.live.add’, compact(‘streams’));

}

在线教育首页

加载视图

步骤1：创建路由

步骤2：创建控制器方法并加载视图

步骤3：创建视图

数据处理（循环直播数据）

步骤1：更改控制器方法，查询数据

namespace App\Http\Controllers\Home;

use App\Http\Model\Live;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class IndexController extends Controller

{

//首页

public function index()

{

//1.获取所有直播数据（保证正在直播中，注：实战工作中根据产品经理的算法显示首页数据）

$lives = Live::where(‘start_time’, ‘<‘, time())

->where(‘end_time’, ‘>’, time())

->limit(4)

->get();

//2.传递给视图

return view(‘home.index.index’, compact(‘lives’));

}

步骤2：视图循环显示

PS超级设计师公开课

讲师：任老师

最近直播：03/24 20:00

直播未开始

–>

@foreach ($lives as $live)

@if ($live->img )

img }}” with=”285″ height=”161″/>

@else

@endif

{{ $live->live_name}}

讲师：任老师

最近直播：03/24 20:00

直播未开始

@endforeach

点击首页直播，在线观看

步骤1：点击跳转到直播详情页

1）定义路由

2）修改首页跳转链接

步骤2：创建控制器方法，接受直播id，获取直播流相关信息拼接拉流地址

namespace App\Http\Controllers\Home;

use App\Http\Model\Live;

use App\Http\Model\Stream;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class LiveController extends Controller

{

//视频播放页

public function detail(Request $request)

{

//1.接受数据获取直播流信息

$stream_id = $request->input(‘stream_id’);

//2.查询直播流信息

$stream = Stream::where(‘id’, $stream_id)->first();

//3.拼接拉流地址

$pullVideo = “rtmp://pili-live-rtmp.php.sk-school.com/201801140002/”.$stream->stream_name;

//2.传递给视图

return view(‘home.live.detail’, compact(‘pullVideo’));

}

步骤3：点击进入详情通过ck播放器播放

ckplayer简单调用演示

OBS – 个人随笔

Laravel在线教育平台（四）直播、七牛云、OBS、直播流管理、直播课程管理、首页直播、在线观看

Laravel框架实战-在线教育平台（4）

一、直播介绍【★★★】

1、术语介绍

直播和点播实现原理

1）概括

直播流程详细说明

直播初体验

1、申请直播云服务步骤

1）注册并登陆七牛云

2）申请直播云服务，填写如下信息

3）填写完成后，要等待审核（目前：1~3个工作日）

4）审核通过后，重新选择‘立即添加’直播云服务

直播云服务管理

1）介绍

2）直播空间管理

3）直播空间-直播流管理

初体验（一套直播实现流程）

【推流】使用OBS软件获将幕、摄像头等数据推送到七牛云

【拉流1】flash方式播放【直播】

【拉流2】html5方式播放【√】

︴扩展

三、直播流管理（在线教育后台）

1、准备

1）直播流表

模型

更改后台菜单

2、列表功能

1）加载视图

2）数据处理

添加功能

1）加载视图

2）数据处理

同步七牛云创建直播流

1）接口文档说明

安装配置工具库（七牛SDK、发送请求工具库）

使用

四、直播课程管理（在线教育后台）

1、准备

1）直播课程流表

2）模型

2、列表功能

3、添加功能

1）加载视图

2）加载视图 （修改form表单）

3）数据处理

在线教育首页

加载视图

数据处理（循环直播数据）

点击首页直播，在线观看

2）加载视图（修改form表单）