前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >搭建直播系统并实现h5播放rtmp

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

作者头像
我的小熊不见了丶
发布2020-07-13 10:19:26
6.3K2
发布2020-07-13 10:19:26
举报
文章被收录于专栏:晓月寒·晓月寒·晓月寒·

推流只能用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实现全平台播放了。

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于nginx的rtmp直播服务器
    • 安装加载nginx-rtmp-module模块的nginx
    • 使用video.js在h5播放rtmp
    • 移动端使用rtmp协议拉流
      • 搭建ffmpeg
        • rtmp转flv
        相关产品与服务
        云直播
        云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档