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方式播放【直播】

<!DOCTYPE html>

<head>

<title>ckplayer简单调用演示</title>

</head>

<body>

var flashvars={

f:’rtmp://pili-live-rtmp.php12.sk-school.com/201801140001/test2?sign=930b44c2efd1e384e3dfc8a6aee6035c&t=5a5aba5d‘,

c:0,

b:1,

i:’http://www.ckplayer.com/static/images/cqdw.jpg’

};

var video=[‘http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4’];

CKobject.embed(‘ckplayer/ckplayer.swf’,’a1′,’ckplayer_a1′,’600′,’400′,false,flashvars,video)

function closelights(){//关灯

alert(‘ 本演示不支持开关灯’);

}

function openlights(){//开灯

alert(‘ 本演示不支持开关灯’);

}

</script>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”1000″ height=”500″

data-setup='{}’>

</video>

</script>

</body>

</html>

︴扩展

手机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(‘创建于’);

});

模型

<?php

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：控制器方法调用模型查询所有数据并分页，传递给视图

<?php

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：视图循环显示即可

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>直播流管理</title>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 直播流管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜直播流节点</button>

</form>

</div>

<i class=”Hui-iconfont”></i> 批量删除

</a>

<i class=”Hui-iconfont”></i> 添加直播流节点

</a>

</span>

</div>

<thead>

<tr>

<th scope=”col” colspan=”6″>直播流节点</th>

</tr>

<th width=”200″>数据流名称</th>

</tr>

</thead>

<tbody>

@foreach ($streams as $stream)

<td>{{ $stream->id }}</td>

<td>{{ $stream->stream_name }}</td>

<td>

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

正常

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

永久禁用

@else

限时禁用

@endif

</td>

<td>{{ $stream->created_at }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-直播流-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-直播流-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-直播流-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

添加功能

1）加载视图

步骤1：路由

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

步骤3：创建视图

2）数据处理

步骤1：更改路由

步骤2：更改视图

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>数据流名称</label>

</div>

<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播流状态</label>

</div>

</div>

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

$(‘.skin-minimal input’).iCheck({

checkboxClass: ‘icheckbox-blue’,

radioClass: ‘iradio-blue’,

increaseArea: ‘20%’

});

$(“#form-admin-add”).validate({

rules:{

stream_name:{

required:true,

minlength:4,

maxlength:16

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit({

type: ‘post’,

url: “{{ url(‘admin/stream/add’) }}” ,

success: function(data){

window.parent.location.reload(); //刷新父页面

parent.layer.msg(‘添加成功!’,{icon:1,time:1000});

var index = parent.layer.getFrameIndex(window.name);

parent.$(‘.btn-refresh’).click();

parent.layer.close(index);

// window.location.href = location.href;

// alert(location.href);

error: function(XmlHttpRequest, textStatus, errorThrown){

layer.msg(‘error!’,{icon:1,time:1000});

}

});

}

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

步骤3：更改控制器

<?php

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]);

使用

<?php

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: <QiniuToken>

//生成签名字符串；

$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

<?php

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）模型

<?php

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：创建控制器方法，分页获取数据，加载视图并传递数据

<?php

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：创建视图

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>直播课程管理</title>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 直播课程管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜直播课程节点</button>

</form>

</div>

<i class=”Hui-iconfont”></i> 批量删除

</a>

<i class=”Hui-iconfont”></i> 添加直播课程节点

</a>

</span>

</div>

<thead>

<tr>

<th scope=”col” colspan=”6″>直播课程节点</th>

</tr>

<th width=”200″>直播课程名称</th>

<th>直播开始时间</th>

<th>直播结束时间</th>

</tr>

</thead>

<tbody>

@foreach ($lives as $live)

<td>

@if ($live->img )

@else

@endif

</td>

<td>{{ $live->start_time }}</td>

<td>{{ $live->created_at }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-直播课程-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-直播课程-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-直播课程-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

3、添加功能

1）加载视图

步骤1：路由

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

步骤3：创建视图

步骤1：

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

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

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

步骤2：更改form表单

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播课程名称：</label>

</div>

<label class=”form-label col-xs-4 col-sm-3″>所属直播流：</label>

@foreach ($streams as $stream)

<option value=”{{ $stream->id }}”>{{ $stream->stream_name }}</option>

@endforeach

</select>

</span> </div>

</div>

–

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

$(‘.skin-minimal input’).iCheck({

checkboxClass: ‘icheckbox-blue’,

radioClass: ‘iradio-blue’,

increaseArea: ‘20%’

});

$(“#form-admin-add”).validate({

rules:{

adminName:{

required:true,

minlength:4,

maxlength:16

password:{

required:true,

password2:{

required:true,

equalTo: “#password”

sex:{

required:true,

phone:{

required:true,

isPhone:true,

email:{

required:true,

email:true,

adminRole:{

required:true,

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit({

type: ‘post’,

url: “xxxxxxx” ,

success: function(data){

layer.msg(‘添加成功!’,{icon:1,time:1000});

error: function(XmlHttpRequest, textStatus, errorThrown){

layer.msg(‘error!’,{icon:1,time:1000});

}

});

var index = parent.layer.getFrameIndex(window.name);

parent.$(‘.btn-refresh’).click();

parent.layer.close(index);

}

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

3）数据处理

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

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

步骤1：更改表单插件

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>添加管理员 – 管理员管理 – H-ui.admin v3.1</title>

</head>

<body>

<label class=”form-label col-xs-4 col-sm-3″><span class=”c-red”>*</span>直播课程名称：</label>

</div>

<label class=”form-label col-xs-4 col-sm-3″>所属直播流：</label>

@foreach ($streams as $stream)

<option value=”{{ $stream->id }}”>{{ $stream->stream_name }}</option>

@endforeach

</select>

</span> </div>

</div>

–

</div>

</div>

</form>

</article>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

<script type=”text/javascript”>

$(function(){

$(‘.skin-minimal input’).iCheck({

checkboxClass: ‘icheckbox-blue’,

radioClass: ‘iradio-blue’,

increaseArea: ‘20%’

});

$(“#form-admin-add”).validate({

rules:{

live_name:{

required:true,

minlength:4,

maxlength:16

start_time:{

required:true,

end_time:{

required:true,

onkeyup:false,

focusCleanup:true,

success:”valid”,

submitHandler:function(form){

$(form).ajaxSubmit({

type: ‘post’,

url: “{{ url(‘admin/live/add’) }}” ,

success: function(data){

window.parent.location.reload();

parent.layer.msg(‘添加成功!’,{icon:1,time:1000});

var index = parent.layer.getFrameIndex(window.name);

parent.$(‘.btn-refresh’).click();

parent.layer.close(index);

error: function(XmlHttpRequest, textStatus, errorThrown){

layer.msg(‘error!’,{icon:1,time:1000});

}

});

}

});

</script>

<!–/请在上方写此页面业务相关的脚本–>

</body>

</html>

步骤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：更改控制器方法，查询数据

<?php

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：视图循环显示

<!– <li>

</div>

<div class=”detailCourseName” title=”PS超级设计师公开课”>PS超级设计师公开课</div>

</div>

<span class=”noStart”>直播未开始</span>

</div>

</a>

</li> –>

@foreach ($lives as $live)

<li>

@if ($live->img )

<img src=”{{ $live->img }}” with=”285″ height=”161″/>

@else

@endif

</div>

</div>

<span class=”noStart”>直播未开始</span>

</div>

</a>

</li>

@endforeach

</ul>

点击首页直播，在线观看

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

1）定义路由

2）修改首页跳转链接

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

<?php

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播放器播放

<!DOCTYPE html>

<head>

<title>ckplayer简单调用演示</title>

</head>

<body>

var flashvars={

f:'{{ $pullVideo }}’,

c:0,

b:1,

i:’http://www.ckplayer.com/static/images/cqdw.jpg’

};

var video=[‘http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4->video/mp4’];

CKobject.embed(“{{ asset(‘ck/ckplayer’) }}/ckplayer.swf”,’a1′,’ckplayer_a1′,’600′,’400′,false,flashvars,video)

function closelights(){//关灯

alert(‘ 本演示不支持开关灯’);

}

function openlights(){//开灯

alert(‘ 本演示不支持开关灯’);

}

</script>

</body>

</html>

标签: OBS 七牛云在线观看直播直播流管理直播课程管理首页直播

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

Laravel在线教育平台（五）直播课程管理、图片上传、首页点播、对象存储、日期插件、推流地址

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

发表回复取消回复

Search

About Me

Winston Lee

About Me

Categories

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）数据处理

在线教育首页

加载视图

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

点击首页直播，在线观看

Laravel在线教育平台（五）直播课程管理、图片上传、首页点播、对象存储、日期插件、推流地址

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

发表回复 取消回复

Search

About Me

Winston Lee

About Me

Categories

Tags

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

发表回复取消回复