Live 七牛云直播

最近的直播行业特别火,各种直播,有时候我也会去 熊猫 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

赶快照着教程动手做一下吧,那样你会理解得更深入。

PS

感谢关注「GitHub 热门」公众号,带你了解技术圈内热门新鲜事!

file

本作品采用《CC 协议》,转载必须注明作者和本文链接
感谢关注「GitHub 热门」公众号
本帖由系统于 6年前 自动加精
Destiny
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 24
Martist

stay hungry ,stay foolish.

6年前 评论

我的技术博客:https://aabvip.com/ ,嘿嘿我觉得 UI 还是非常好看的额。

哈哈哈哈,666

6年前 评论
Destiny

@overtrue 哈哈 ?

6年前 评论
老催

6666

6年前 评论

早就想做这个了

6年前 评论
Destiny

@生活无限好 哈哈,动手做做吧。。

6年前 评论

Not allowed to load local resource chrome提示这个错误 要如何解决呢?

6年前 评论
Destiny

@keer 有截图吗?

6年前 评论

@Destiny 您好,搜索了一下是chrome的安全方面的设置。我是直接在本机上保存了你上面的html到本机。然后直接浏览器打开的。 后来我把文件live.html放到了homestead上后这个问题解决了。随之而来的又是跨域的问题....

6年前 评论

@Destiny 我测试的阿里云的直播。 搜了下貌似需要去他们后台加Access-Control-Allow-Origin这个东西

6年前 评论
Destiny

@keer 直接从控制器返回直播的地址,怎么会跨域呢。可以贴一下你控制器和 blade 的代码吗?

6年前 评论
Destiny

@keer 哦哦,嗯。加上试一下。

6年前 评论

@Destiny 哦,不好意思。我没说清楚我的场景。 我是直接从阿里云后台拿了一个播放流地址,比如http://live.xxx.aliyun.com/appname/streamName.flv 我直接替换了url: '{{ $liveurl }}'所以导致的。没使用框架只是单纯的想测试在浏览器上播放直播流。

6年前 评论

给客户做过,结果客户觉得流量费太高,不搞了

6年前 评论
Destiny

@北斗之光 :sweat:

6年前 评论
Ysll

谢谢大佬分享

6年前 评论

感谢分享, 文档都快看傻了.

6年前 评论
Destiny

@overfalse @Ysll

relaxed: :relaxed: :relaxed:

5年前 评论

laravel有啥包能做直播的嘛?

4年前 评论

我也想问有没有什么包做直播集成的?

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!