直播平台源码搭建教程直播原理与web直播实战

news/2024/12/22 19:44:43/

文章结构

  1. 直播构成
  2. 直播流程
  3. web中直播技术
    • HLS协议
    • RTMP协议
    • HLS与RTMP对比
  4. 直播实战
    • 安装nginx、nginx-rtmp-module、FFmpeg（以下操作均在mac下进行）
    • nginx.conf配置文件，配置RTMP、HLS
    • 重启nginx
    • 查看端口是否启动
    • FFmpeg执行命令
    • 代码
    • 效果
  5. 直播中遇到坑
  6. 总结

直播构成

 

直播构成

 

 

 

直播流程

视频直播可以分为采集，前处理，编码，传输，解码，渲染 这几个环节。

采集

一般是由客户端（IOS、安卓、PC或其它工具，如OBS）完成的，iOS是比较简单的，Android则要做些机型适配工作，PC最麻烦各种奇葩摄像头驱动，当然这些问题，腾讯云已经帮我们处理好了，呵呵。

前处理

主要是处理直播美颜，美颜算法需要用到GPU编程，需要懂图像处理算法的人，没有好的开源实现，要自己参考论文去研究。难点不在于美颜效果，而在于GPU占用和美颜效果之间找平衡。

编码

肯定要采用硬编码，软编码720p完全没希望，勉强能编码也会导致CPU过热烫到摄像头。编码要在分辨率，帧率，码率，GOP等参数设计上找到最佳平衡点。

传输

一般交给了CDN服务商。

解码

是对之前编码的操作，进行解码，在web里需要解码是HLS。

渲染

主要用播放器来解决，web中常用到的播放器有 video.js ，目前我们使用是腾讯云播放器。

其实一个完成直播，远远不上面这几个环节，下面是腾讯云直播方案的整个流程图：

 

直播方案

 

 

web中直播技术

目前互联网上web做直播，主要是展示，主流web展示的话可能涉及到HLS跟RTMP这两个东西，现在我们重点讲解hls跟RTMP协议。

HLS

HLS（HTTP Live Streaming全称）是一个基于HTTP的视频流协议，由Apple公司实现，Mac OS上的QuickTime、Safari 以及iOS上的 Safari都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。

一些常见的客户端如：MPlayerX、VLC 也都支持HLS协议，如果需要在chrome上播放，需要使用 videojs-contrib-hls.js 解析。

 

HLS工作流程

 

 

HLS工作流程图

Server服务器

HLS的服务器组件负责获取的媒体输入流 , 然后Media编码后 MPEG-4（H.264 video 和 AAC audio）格式然后用硬件打包到 MPEG-2 (MPEG-2 transport stream)的传输流中。图中显示,传输流会经过stream segmenter, 这里的工作是MPEG-2传输流会被分散为小片段然后保存为一个或多个系列的 .ts 格式的媒体文件。这个过程需要借助编码工具来完成，比如 Apple stream segmenter。 (视频类是.ts文件,纯音频会被编码为一些音频小片段，通常为 ADTS头的AAC、MP3、或者 AC-3格式。) 服务端可以采用硬件编码和软件编码两种形式，其功能都是按照上文描述的规则对现有的媒体文件进行切片并使用索引文件进行管理。而软件切片通常会使用 Apple 公司提供的工具或者第三方的集成工具。

Distribution分配组件

同时上面提到的那个切片器（segmenter）也会创建一个索引文件，通常会包含这些媒体文件的一个列表，也能包含元数据。它一般都是一个个.M38U的列表。列表元素会关联一个 URL 用于客户端访问。然后按序去请求这些 URL。

 

索引文件结构图

 

 

索引文件结构图

主索引文件

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=409037,RESOLUTION=416x234,CODECS="mp4a.40.2, avc1.42001e"
Gear1/prog_index.m3u8复制代码

第一行：#EXTM3U

每个M3U文件第一行必须是这个tag，起标示作用

第二行：#EXT-X-STREAM-INF

标签的属性列表中直接指明当前流是VIDEO还是AUDIO

包含属性 :

  1. BANDWIDTH 指定码率
  2. PROGRAM-ID 唯一ID (这个属性在后面的协议版本废除了)
  3. CODECS 指定流的编码类型
  4. RESOLUTION：分辨率

子索引文件

#EXTM3U
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.133333,
fileSequence0.ts
#EXTINF:10.000666,
fileSequence1.ts
#EXTINF:10.667334,
fileSequence2.ts
#EXTINF:9.686001,
fileSequence3.ts
#EXTINF:9.768665,
fileSequence4.ts
#EXTINF:10.000000,
fileSequence5.ts
#EXT-X-ENDLIST复制代码

#EXTM3U m3u文件头，必须放在第一行。

#EXT-X-TARGETDURATION 每个分片TS的最大的时长。

#EXT-X-VERSION 用以标示协议版本。

#EXT-X-MEDIA-SEQUENCE TS分片的序列号。

#EXT-X-PLAYLIST-TYPE 提供关于PlayList的可变性的信息， 这个对整个PlayList文件有效，是可选的。

#EXTINF extra info，分片TS的信息，如时长，带宽等。

主索引文件与子索引文件的区别

  • 主索引文件和子索引文件都是.M3U8的playlist
  • 主索引文件只需下载一次，但对于直播节目子索引文件定期重新加载

client客户端

分配组件由标准的网络服务器。他们负责接受Client客户端请求并提供相关联的资源给客户端。

videojs-contrib-hls.js组件解析过程

 

videojs-contrib-hls.js

 

 

videojs-contrib-hls.js解析图

HLS简单讲就是把整个流分成一个个小的片段，基于 HTTP 的文件来下载，每次只下载一小部分。

前面提到了用于 H5 播放直播视频时引入的一个 .m3u8 的文件，这个文件就是基于 HLS 协议，存放视频流元数据的文件。

每一个 .m3u8 文件，分别对应若干个 ts 文件，这些 ts 文件才是真正存放视频的数据，m3u8 文件只是存放了一些 ts 文件的配置信息和相关路径，当视频播放时，.m3u8 是动态改变的，再通过解析器（videojs-contrib-hls.js）解析这个文件，并找到对应的 ts 文件来播放，所以一般为了加快速度，.m3u8 放在 web 服务器上，ts 文件放在 cdn 上。

RTMP

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。

浏览器端，HTML5 video标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。

<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet"><video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" loop="loop" webkit-playsinline>
<source src="rtmp://10.14.221.17:1935/rtmplive/home" type='rtmp/flv'>
</video><script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
<script>
videojs.options.flash.swf = 'video.swf';
videojs('example_video_1').ready(function() {
this.play();
});
</script>
复制代码

HLS VS RTMP 优缺点对比

协议原理延时优点缺点使用场景
HLS(http)集合一段时间数据生成ts切片文件更m3u8文件10s-30s跨平台延时性高移动端
RTMP(TCP)每个时刻的数据收到后立即发送2s延时低、实时性好跨平台差PC+直播+实时性要求高+互动性强

直播实战（搭建RTMP、HLS直播流服务）

安装nginx

brew install nginx
复制代码

安装nginx-rtmp-module

brew install nginx-full --with-rtmp-module
复制代码

然后安装FFmpeg（是一个集录制、转换、音/视频编码解码功能 为一体的完整的开源工具，我们下面用它来做推流跟切片）。

brew install ffmpeg
复制代码

nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（/usr/local/etc/nginx/nginx.conf），并配置相应的直播流配置。

rtmp {server {#监听的端口listen 1935;# RTMP 直播流配置application rtmplive {live on;#为 rtmp 引擎设置最大连接数。默认为 offmax_connections 1024;}# HLS 直播流配置application hls{live on;hls on;hls_path /Users/youname/Documents/notes/live/public/hls;  #这里的路径切片需要保存的路径hls_fragment 1s;}}
}
复制代码

在http中添加 HLS 的配置:

location /hls {# Serve HLS fragmentstypes {application/vnd.apple.mpegurl m3u8;video/mp2t ts;}root /Users/youname/Documents/notes/live/public;#切片的路径#add_header Cache-Controll no-cache;expires -1;
}
复制代码

重启nginx

sudo nginx -s reload
复制代码

查看端口是否启动

netstat -an | grep 1935
复制代码

如果显示如下，显示已经启用。

 

ng

 

 

http端口同理。

到现在我们已经完成了，服务的搭建。

  1. RTMP推流地址为 rtmp://127.0.0.1:1935/rtmplive/home
  2. HLS推流地址为 rtmp://localhost:1935/rtmplive/hls

FFmpeg执行命令

我们以推流MP4文件为例，我的视频文件地址：/Users/youname/Desktop/w01661pl9vw.p702.1.mp4

RTMP 协议推流命令:

ffmpeg -re -i /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/rtmplive/home复制代码

HLS 协议推流命令：

ffmpeg -re -i  /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://127.0.0.1:1935/hls/test 复制代码

参数：

  1. 视频的地址：/Users/youname/Desktop/w01661pl9vw.p702.1.mp4
  2. 推流地址：rtmp://127.0.0.1:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/hls

上面的命令操作后，命令行出现了如下图，表示已经成功了。

 

ffmpeg

 

 

关于FFmpeg功能命令可参考：FFmpeg功能命令集合

web实现直播

两种推流方式播放的话，我们都使用video.js播放器播放(牛牛里使用的是腾讯云播放器)

RTMP协议代码实现

需要注意的是src中的地址填的是RTMP推流地址。播放时，如果出现“当前系统环境不支持播放该视频格式”，浏览器需要启用flash，才能正常播放。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
</head>
<body>
<videoid="my-player"class="video-js"controlspreload="auto"data-setup='{}'><source src='rtmp://127.0.0.1/rtmplive/home' type='rtmp/flv'/>  </p>
</video>
<script type="text/javascript">var player = videojs('my-player');var options = {};var player = videojs('my-player', options, function onPlayerReady() {videojs.log('Your player is ready!');// In this context, `this` is the player that was created by Video.js.this.play();// How about an event listener?this.on('ended', function() {videojs.log('Awww...over so soon?!');});});
</script>
</body>
</html>
复制代码

HLS代码实现

下面的src填的是切片地址。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.js"></script><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body><video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'><source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL"></video>
</body>
</html>
复制代码

效果

我们来看看真正的效果如何。

 

RTMP效果

 

 

RTMP效果图

 

HLS效果

 

 

HLS效果

 

ts和m3u8文件

 

 

ts和m3u8文件

实战中遇到的坑

  • 自动播放问题
  • 各平台播放器表现不统一
  • 内页面调试困难
  • Native与web通信问题

自动播放问题

在X5内核浏览器里必须使用触发touchend、click、doubleclick或keydown事件等标准的事件才能触发。

各平台播放器表现不统一

安卓下很多浏览器把video标签替换成了原生自带播放器样式跟行为，很难控制其行为跟样式。

内嵌页面调试困难

目前使用的是weinre调试，但weinre调试看不到在native实际效果，比如web调用native，需要native反馈一种效果，weinre是看不到效果。

Native与web通信

schema跟jsBridge，schema只能做到web调用native，而且做不到native调用web；jsBridge虽然可以做native调用web，但在iframe没加载完的情况下，也是通知不到web的；

总结

整个直播是一个非常复杂的过程，实现过程中会遇到很多性能问题，需要在性能跟即时性做一个权衡，ts跟m3u8尽量做到缓存，浏览器里尽量使用推流。

 


http://www.ppmy.cn/news/685922.html

相关文章

短视频直播怎么搭建_直播平台搭建流程

短视频直播怎么搭建_直播平台搭建流程

2020年&#xff0c;短视频和直播是非常火的&#xff0c;也是非常热闹的。短视频直播电商的时代来临了&#xff0c;那么如何搭建端视频直播平台呢&#xff0c;一般都有哪些流程。如果我们从事互联网创业&#xff0c;而不能和视频直播结合&#xff0c;那么两三年之后&#xff0c;…
阅读更多...
爬虫-某直播平台图片批量爬取url并下载

爬虫-某直播平台图片批量爬取url并下载

后续技术类文档更新到微信公众号-------->>喜欢的扫码关注 import json import time import requests from selenium import webdriverclass HuYa(object):def __init__(self):self.start_url "https://www.hxyx.com/l"#某直播平台的url地址"x"为缺…
阅读更多...
多平台聚合直播PHP源码

多平台聚合直播PHP源码

介绍&#xff1a; 多平台聚合直播php源码&#xff0c;无需数据库&#xff0c;直接上传就可以使用。 自适应手机、电脑端端&#xff0c;做了分类直播选择列表&#xff0c;增加搜索主播功能。 自动更新采集直播平台;战旗、斗鱼、虎牙、龙珠、全民、龙珠直播。 提示;空间PHP版本请…
阅读更多...
基于Web的直播平台架构设计

基于Web的直播平台架构设计

时常有人问起&#xff1a;“网络直播与视频会议有什么区别&#xff1f;”。直播平台确实有很多&#xff0c;多得让人眼花缭乱。从功能上来讲&#xff0c;感觉都差不多&#xff0c;你有的我也有。它们的区别不在于功能上哪个更强&#xff0c;而是在于它们的“应用场景”上的区别…
阅读更多...
详细直播平台开发细节，提供成品直播系统源码

详细直播平台开发细节，提供成品直播系统源码

直播的火爆从2016年一直烧到了2018年&#xff0c;直播平台开发的技术——直播APP源码也渐渐浮出水面&#xff0c;在直播大火的现在&#xff0c;您是不是也想要一款独属于自己的直播平台呢&#xff1f;小编今天为您讲解一款简易直播平台开发细节。 一.前端推流 1.推流可以采用…
阅读更多...
自建直播平台和流媒体服务器

自建直播平台和流媒体服务器

一、前期准备 1、准备一台服务器windows或linux都可以 2、下载对应操作系统酷导流媒体&#xff0c;下载地址:http://live.cooldao.com/downloads.html 二、安装流媒体软件 windows下点击安装包即可&#xff0c;linux下在解压包目录执行cooldao install 三、系统配置及使用 默…
阅读更多...
直播软件自动化测试,基于SRS-Bench工具的直播平台性能测试

直播软件自动化测试,基于SRS-Bench工具的直播平台性能测试

摘要：性能测试通过自动化的测试工具模拟正常、异常场景来对系统的各项性能指标进行测试。通过性能测试可以分析一个系统能力、瓶颈、关键问题等。本文结合直播平台的部分场景，使用开源SRS-Bench工具对直播并的4个场景进行压力测试，测试直播平台的基础能力。 一 性能测评工具…
阅读更多...
江西直播源PHP代理,直播源更新平台

江西直播源PHP代理,直播源更新平台

主要元信息 名称&#xff1a;直播源的名称 语言&#xff1a;直播源名称的语言(针对多个语言版本的名称) 地址&#xff1a;地址链接 组&#xff1a;分组/多级分组 类型&#xff1a;电台/电视/直播平台房间 管理直播源 导入直播源 用户提交(m3u,xspf,wpl,pls等) 已有源更新抓取 与…
阅读更多...
最新文章

Copyright @ 2022~2023