搭建直播系统并实现h5播放rtmp

推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议是adobe公司开发的开放协议,hls是苹果公司推出的直播协议。我们使用nginx的rtmp插件来搭建推流服务器

基于nginx的rtmp直播服务器

安装加载nginx-rtmp-module模块的nginx

./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module.1.1.4 --with-http_ssl_module

  • make && make install 安装

  • 配置rtmp模块

rtmp {
server {
listen 9999;

application myapp {
live on;
}
application live {
live on; #开启实时
hls on; #开启hls
hls_path /usr/local/etc/nginx/html/multimedia/hls; #hls的ts切片存放路径
hls_fragment 2s; #本地切片长度
hls_playlist_length 6s; #HLS播放列表长度
}
}
}

使用rtmp协议并且监听了9999端口,如果我们的推流地址填写的是rtmp://ip:9999/myapp,那么就是纯粹的rmtp协议的流,如果推流地址填写的是rmtp://ip:9999/live,那么推流之后会在/usr/local/etc/nginx/html/multimedia/hls目录下生成很多ts格式的视频切片和一个m3u8格式的文件,我们想要用http协议访问这个m3u8文件就需要再配置http模块。

  • 配置http模块

location /live {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /usr/local/etc/nginx/html/multimedia/hls/;
add_header Cache-Control no-cache;
}

当我们的推流地址填写的是rtmp://ip:9999/live/room1时,使用http://ip:80/live/room1.m3u8就能把rtmp转成hls访问这个直播流了。

  • 新建文件夹 mkdir -p /usr/local/etc/nginx/html/multimedia/hls/

  • 重启nginx nginx -s reload

以上就完成了直播服务器的搭建。

1594282941784.png

使用video.js在h5播放rtmp

使用obs推流,推流地址可以填写rtmp://ip:9999/myapp或者rtmp://ip:9999/live,如果用的是rtmp://ip:9999/myapp,在h5端播放的时候会涉及到h5播放rtmp协议的问题,h5安装vide.js之后还要额外安装videojs-flash插件。

video.js版本是7.8.3

安装好之后在相关页面引入:

import videojs from 'video.js';
import "videojs-flash"
import 'video.js/dist/video-js.css'

然后初始化videojs即可:

player = videojs("myVideo", {
poster: baseUrl + '/file/download?file_id='+that.props.videos.foreImg,
controls: true,
preload: 'auto',
// fluid:false,
fill: true,
playsinline: true,
languages: 'en',
suppressNotSupportedError: false,
sources: that.props.videos.url,
techOrder: ['flash', 'html5']
})

在pc端播放rtmp时依赖flash播放器,所以要打开flash,这样就解决了pc端rtmp协议直播流的问题。

但问题是现在流行的是移动端直播,而苹果就没支持过flash播放器,所以目前正常方法解决不了在移动端使用rtmp协议拉流的问题。

移动端使用rtmp协议拉流

因为苹果不支持flash所以使用rtmp拉流肯定是不行的,但是可能客户给我们的就只有rtmp协议,那么我们就可以用到上面的另外一个地址,把rtmp协议转成hls协议。

搭建ffmpeg

rtmp转flv

ffmpeg -re -i rtmp://ip:9999/myapp/room1
-vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://ip:9999/live/room1

这样当客户给的拉流地址是rtmp://ip:9999/myapp/room1时,可以用ffmpeg 转成http://ip:9999/live/room1.m3u8实现全平台播放了。

但是这样还有个问题,因为客户给地址的话,用户拉流是从客户平台上拉,但是如果使用自己的服务器转了一下的话,那就变成用户从我们自己的服务器拉流了,如果用户比较多的话那带宽的问题就要考虑一下了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335