方案简述

之前搭建过使用RTMP协议推流 前端基于Flash的直播流服务 奈何历史潮流不可挡 马上就到 2020 年底 Adobe 都要彻底停止支持 想起某位总加速师还在拼命加速倒车... 2018new_kuxiao_thumb.png

flv.js

flv.js 是来自 Bilibli 的开源项目。它解析 FLV 文件喂给原生 HTML5 Video 标签播放音视频数据，使浏览器在不借助 Flash 的情况下播放 FLV 成为可能。( 顺带着膜谦谦大神 批判狗日的逼站 如何看待哔哩哔哩的 flv.js 作者月薪不到 5000 元？)

flv.js 只做了一件事，在获取到 FLV 格式的音视频数据后通过原生的 JS 去解码 FLV 数据，再通过 Media Source Extensions API 喂给原生 HTML5 Video 标签。(HTML5 原生仅支持播放 mp4/webm 格式，不支持 FLV)

flv.js 为什么要绕一圈，从服务器获取 FLV 再解码转换后再喂给 Video 标签呢？原因如下：

  1. 兼容目前的直播方案：目前大多数直播方案的音视频服务都是采用 FLV 容器格式传输音视频数据。
  2. FLV 容器格式相比于 MP4 格式更加简单，解析起来更快更方便。

livego

Simple and efficient live broadcast server:

  • Very simple to install and use;
  • Pure Golang, high performance, and cross-platform;
  • Supports commonly used transmission protocols, file formats, and encoding formats;

Supported transport protocols
RTMP、AMF、HLS、HTTP-FLV
Supported container formats
FLV、TS
Supported encoding formats
H264、AAC、MP3

大致方向就是 OBS 使用 RTMP 协议推流给 livego 服务器 livego 从 RTMP 中拿出 FLV 格式音视频数据 flv.js 通过 HTTP 向 livego 拉取 FLV 数据解码并喂给浏览器 Video 标签实现播放

  • OBS Studio ---> livego ---> flv.js

  • RTMP: 底层基于 TCP，在浏览器端依赖 Flash。

  • HTTP-FLV: 基于 HTTP 流式 IO 传输 FLV，依赖浏览器支持播放 FLV。

livego 部署

在这里通过容器部署 开放 RTMP 1935 端口、HTTP-FLV 7001 端口、HTTP-API 8090 端口 HLS 端口暂时用不到

docker run -d -p 1935:1935 -p 7001:7001 -p 8090:8090 --name mylivego gwuhaolin/livego

容器运行起来后 通过 HTTP-API 获取获取频道密钥用于推流 (不得不说 livego 还挺适合二次开发的 f48.png )

GET http://服务器地址:8090/control/get?room=频道或房间名

OBS 推流

推 RTMP：rtmp:// 服务器地址: 1935/live

livego-OBS

flv.js 前端

拉 FLV：http:// 服务器地址: 7001/live / 频道或房间名. flv

<!DOCTYPE html>
<html>
<head>
    <title>flv.js_demo</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
</head>
<body>
    <video id="videoElement" autoplay muted></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                enableWorker: true,
                enableStashBuffer: false,
                stashInitialSize: 128,   // 减少首桢显示等待时长
                url: 'http://192.168.1.9:7001/live/test.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>
HTML

  1. 这里 flv.js 引用自前端开源项目免费 CDN 服务BootCDN

  2. muted是用来设置视频静音 不然 Chrome 浏览器可以会出现这个错误 (原因未知 很迷 2018new_wenhao_thumb.png ) ：
    Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

  3. 下面这三个参数为优化选项 参考 https://github.com/gwuhaolin/blog/issues/3