一、直播课程管理（获取推流地址、日期插件）

1、获取推流地址

步骤1：定义模型

/**

* 关联直播流模型（1:1）

* 语法：模型名::with（’role’）->first()

* @return \Illuminate\Database\Eloquent\Relations\HasOne

*/

public function stream()

{

#return $this->hasOne(关联模型名，关联模型公共字段，本模型公共字段)

return $this->hasOne(‘App\Http\Model\Stream’,’id’, ‘stream_id’);

}

步骤2：修改控制器

步骤3：修改视图

日期插件

配置手册：http://www.my97.net/demo/index.htm

图片上传【★★★】

webuploader插件介绍

说明：就是由百度团队开发的一个上传插件

地址：http://fex.baidu.com/webuploader/

使用

• 语法：

检查是否存在指定键：$request->hasFile(‘file’)

检查是否上传成功： $request->file(‘file’)->isValid()

存储文件： $request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

• 实现步骤：

步骤1：将官方下载的文件移动到public目录下的webuploader文件夹中

步骤2：（视图代码）打开手册引入静态资源并复制初始化代码

<div class=”row cl”>

<label class=”form-label col-xs-4 col-sm-3″>封面</label>

<div class=”formControls col-xs-8 col-sm-9″>

<!–dom结构部分–>

<div id=”uploader-demo”>

<!–用来存放item–>

<div id=”fileList” class=”uploader-list”></div>

<div id=”filePicker”>选择图片</div>

</div>

<div id=”showimg”>

</div>

<div id=”uploading” style=”width:0%;height:20px;background: blue;”></div>

<input required type=”text” class=”input-text” value=”” placeholder=”” id=”img” name=”img”>

</div>

</div>

<!–引入CSS–>

<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘webuploader’) }}/webuploader.css”>

<!–引入JS–>

<script type=”text/javascript” src=”{{ asset(‘webuploader’) }}/webuploader.js”></script>

<script type=”text/javascript”>

// 初始化Web Uploader

var uploader = WebUploader.create({

// 设置自定义请求数据

formData: {

_token: ‘{{ csrf_token() }}’

},

// 选完文件后，是否自动上传。

auto: true,

// swf文件路径

swf: ‘{{ asset(“webuploader”) }}/Uploader.swf’,

// 文件接收服务端。

server: ” {{ url(‘admin/upload/file’) }}”,

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: ‘#filePicker’,

// 只允许选择图片文件。

accept: {

title: ‘Images’,

extensions: ‘gif,jpg,jpeg,bmp,png’,

mimeTypes: ‘image/*’

}

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on( ‘uploadSuccess’, function( file, response ) {

//file是原上传文件信息，相当于php的$_FILES数据

//response是php上传文件响应的数据

console.log(response);

$(‘#img’).val(response.info);

var imgSrc = “{{asset(‘uploads’)}}” + ‘/’ + response.info;

$(‘#showimg’).html(‘<img src=”‘+imgSrc+'” width=”120″ height=”80″ />’)

});

// 文件上传过程中创建进度条实时显示。

uploader.on( ‘uploadProgress’, function( file, percentage ) {

$(‘#uploading’).css( ‘width’, percentage * 100 + ‘%’ );

});

</script>

步骤3：定义路由，并创建控制器书写上传功能代码

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class UploadController extends Controller

{

//上传文件

public function file(Request $request)

{

//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）

if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {

//2.上传文件

//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

//store是官方存储文件方法

//存储驱动器的名称：对应config/filesystems.php文件

//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件

$filename = $request->file(‘file’)->store(‘img’, ‘upload’);

return [‘info’ => $filename];

}

}

}

更改图片上传规则到七牛云【★★★】

1）对象存储介绍

对象存储简单理解：就是用来存放静态资源的服务器

好处：减少冗余，便于维护

2）使用（zgldh/qiniu-laravel-storage）

步骤1：下载并配置根据下图文档 composer reqiure zgldh/qiniu-laravel-storage

步骤2：打开控制器方法将上传到laravel项目代码更改为上传到七牛云即可

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class UploadController extends Controller

{

//上传文件

public function file(Request $request)

{

//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）

if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {

//2.上传文件

//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

//store是官方存储文件方法

//存储驱动器的名称：对应config/filesystems.php文件

//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件

//$filename = $request->file(‘file’)->store(‘img’, ‘upload’);

###更改七牛云存储图片

//定义上传文件名称

$filename = uniqid(‘goods’.date(‘YmdHis’,time()));

//从临时文件中获取图片数据

$imgData = file_get_contents($request->file(‘file’)->getPathName());

//上传

\Storage::disk(‘qiniu’)->put($filename, $imgData); //上传文件 file_get_contents(XX.PNG)

//获取下载地址（图片地址）

$downloadUrl = \Storage::disk(‘qiniu’)->getDriver()->downloadUrl($filename);

return [‘info’ => $downloadUrl];

}

}

}

更改直播播放视图

步骤1：将直播详情页静态代码替换edu项目中的直播详情页

步骤：将直播地址更改为变量

首页点播功能

快进看视频，主要理解思路，最好自己写一写

图片懒加载：http://www.jq22.com/jquery-info390

四、总结

本项目中使用了以下几个插件/功能：

Laravel自带组件：

DebugBar（调试工具）、

laravelexcel（导出导入excel文件）、

QiniuSDK（云存储）、

GuzzleHttp（发送请求）

JQuery插件：

datatables（数据表格无刷新分页）、

webuploader（上传文件）、

validate（表单验证插件）、

layer（弹框插件）

直播内容

七牛直播云

OBS推流软件使用

视频播放器Ckplayer（拉流）