最近的直播行业特别火，各种直播，有时候我也会去
熊猫 TV上面看看 PDD 的 LOL 直播，在看直播的同时又很好奇他这种直播到底如何实现的，那么今天咱门就一起来探究一下吧。
七牛云直播
七牛在视频直播大爆发时代，推出专为直播平台打造的全球化直播流服务和端到端直播场景解决方案，我选择七牛是因为七牛的文档真心让人看着舒服，通俗易懂。在学习七牛云之前你非常有必要先看看 七牛直播云原理 文档，因为这个文档可能比我解释得更加专业。
申请直播云
首先你得在七牛控制台之中开通 直播空间权限
file
一般申请后会在 3 个工作日内通过审核。
file
创建直播空间
在通过审核之后，你需要创建一个直播空间
file
在创建直播空间的时候，直播的域名得要备案过的域名才行，域名建议使用二级域名。
file
选择专门用来存放直播流的存储空间
file
这里需要你配置一下加速点播的域名，配置也非常简单，到菜单栏中 融合 CDN 新建一个加速域名，类型选择 点播平台
file
这里值得注意的是：新建的加速域名需要等一会才会显示 CNAME 的值，CNAME 值显示出来之后，你再去解析下你的域名
file
file
回到创建直播空间这里，选择我们创建好的加速域名
file
创建完成之后来到直播空间主页面，还需要配置一下 直播推流域名 和 直播播放域名 ，这个很简单和前面配置 CDN 加速 一样，把给出的 域名 和 CNAME 值到域名解析管理后台解析一下。正确配置之后如下图所示
file
创建完成直播空间之后，我们需要到 直播流管理 里面创建一个 直播流 ，直播流创建之后我们会得到 推流地址 和 播放地址 就是所谓的直播地址和播放地址
file
推流 PC 端采用 OBS 安装完成之后填上推流地址，就可以进行推流直播了。
file
file
file
推流也可以用手机推流，所谓手机直播，这个请结合官网给出的 SDK 配置，传送门，到此前面的七牛配置与直播推流已经完毕
观看直播
前面的直播推流配置完成之后，我们需要让用户或者观众看到直播，Let`s go
正常情况下用户观看直播的流程是：登录直播网站 -> 点开直播房间 -> 服务器获取播放地址 -> 用户观看直播，当然流程背后可能做了更多事情，我们就简单的模拟一下登录直播网址然后观看直播。那么就意味着我们需要创建一个 Laravel 项目，然后集成 七牛云直播服务端 SDK
你有必要看一下 服务端 SDK 的使用说明和调用方法
项目和组件都准备就绪之后我们创建一个测试直播的控制器
php artisan make:controller LiveController
控制器内容
<?php
namespace App\Http\Controllers;
use Qiniu\Pili\Client;
use function Qiniu\Pili\HDLPlayURL;
use Qiniu\Pili\Mac;
class LiveController extends Controller
{
protected $client;
/**
* LiveController constructor.
*/
public function __construct()
{
$this->client = new Client(new Mac('xxx', 'xxx'));
}
public function index()
{
// 选择直播空间，正常项目中可用代码获取，这里测试就直接填写
$this->client->hub('destiny');
// 获取 HDL 直播地址，hub 指直播空间，streamkey 指流名称
$liveurl = \Qiniu\Pili\HDLPlayURL('pili-live-hdl.live.aabvip.com', 'destiny', 'live-stream');
return view('welcome', compact('liveurl'));
}
}
这里只用了一个获取播放地址的方法，还有更多的方法你可以查看该 SDK 的 readme，我这里获取的是 HDL 直播地址，常见直播地址如下
- RTMP：底层基于 TCP，在浏览器端依赖 Flash。
- HTTP-FLV：基于 HTTP 流式 IO 传输 FLV，依赖浏览器支持播放 FLV。
- WebSocket-FLV：基于 WebSocket 传输 FLV，依赖浏览器支持播放 FLV。WebSocket 建立在 HTTP 之上，建立WebSocket 连接前还要先建立 HTTP 连接。
- HLS： Http Live Streaming，苹果提出基于 HTTP 的流媒体传输协议。HTML5 可以直接打开播放。
- RTP：基于UDP，延迟1秒，浏览器不支持。
常见直播协议延迟与性能数据
| 传输协议 | 播放器 | 延迟 | 内存 | CPU |
|---|---|---|---|---|
| RTMP | Flash | 1s | 430 M | 11 % |
| HTTP-FLV | Video | 1s | 310 M | 4.4 % |
| HLS | Video | 20s | 205 M | 3 % |
可以看出在浏览器里做直播，使用 HTTP-FLV 协议是不错的，性能优于 RTMP + Flash，延迟可以做到和 RTMP + Flash 一样甚至更好。下面推荐相应协议的播放插件
- HLS 协议播放插件推荐 videojs-contrib-hls 这块插件非常多的网站在使用，UI 看着非常漂亮
- HDL (HTTP-FLV) 协议播放插件推荐 BiliBili-flv.js 这是 B 站开源的 FLV 播放组件，非常不错
引入组件 CDN 之后代码如下
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- 引入 CDN -->
<script src="https://cdn.bootcss.com/flv.js/1.3.2/flv.min.js"></script>
</head>
<body>
<!-- Start -->
<video id="videoElement"></video>
</body>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: '{{ $liveurl }}'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
<!-- End -->
</html>
播放效果如下
file
赶快照着教程动手做一下吧，那样你会理解得更深入。
我的技术博客：https://aabvip.com/ ，嘿嘿我觉得 UI 还是非常好看的额。
网友评论