H5视频之直播流服务搭建（一）

转自https://blog.csdn.net/qq_40816360/article/details/84037877

继上次制作了RTMP直播源之后，因为互联网更常用的是HLS源和HTTP-FLV，所以这次又制作了HLS源

所需条件：
安装过程请看：https://blog.csdn.net/qq_40816360/article/details/83999836

nginx-rtmp-module（带rtmp模块），链接：https://link.jianshu.com/?t=http%3A%2F%2Fnginx-win.ecsds.eu%2Fdownload%2Fnginx%201.7.11.3%20Gryphon.zip

ffmpeg，链接：https://pan.baidu.com/s/1XItEYzDjpGrkAUinBwQTUw
提取码：o0fg

VLC播放器，https://www.videolan.org/

遇到的困难
而这次遇到比较麻烦的问题是，根据上次的nginx.conf配置，添加了application hls并推流之后，虽然可以生成M3U8文件和相关的ts文件，但是却无法用http://localhost:8765/hls/movie.m3u8形式进行VLC的观看，但是用rtmp://localhost:1935/hls/movie进行观看，实在是非常不懂，一直觉得是配置的问题，但是就是无法找出什么地方不行，后来直接更换nginx的nginx.conf配置，如下：

#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}rtmp{server {listen 1935;chunk_size 4000;#RTMPapplication myapp {live on;} #HLS# For HLS to work please create a directory in tmpfs (/tmp/app here)# for the fragments. The directory contents is served via HTTP (see# http{} section in config)## Incoming stream must be in H264/AAC. For iPhones use baseline H264# profile (see ffmpeg example).# This example creates RTMP stream from movie ready for HLS:## ffmpeg -loglevel verbose -re -i movie.avi  -vcodec libx264 #    -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 #    -f flv rtmp://localhost:1935/hls/movie## If you need to transcode live stream use 'exec' feature.#application hls {live on;hls on;hls_path hls;hls_fragment 5s;}}
}http{server {listen 8765;server_name  localhost;location / {root   html;index  index.html index.htm;}location /hls {# Serve HLS fragmentstypes {application/vnd.apple.mpegurl m3u8;video/mp2t ts;}alias hls;expires -1;add_header Access-Control-Allow-Origin *;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

这个配置可以进行推rtmp流，也可以推hls的流

解释：

在rtmp模块中，增加了hls的application，hls_path表示的是推流生成的m3u8和ts文件的存放路径，例如：我的文件夹是D:/nginx/hls ，这个hls文件夹是我自定义的，D:/nginx是nginx的根目录。
在http中，增加一个访问地址，location hls ，里面的alias hls，就代表了在访问localhost:8765/hls（location）的时候，他会指向hls（alias）的文件夹，可以看location /的地址，它的root是html，表明你输入localhost:8765的时候他就进入Html文件夹，你就可以看到那个nginx启动成功页面
推rtmp流：
ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -strict -2 -f flv rtmp://localhost:1935/myapp/pc
参数在rtmp博文中已有介绍

验证rtmp流推送情况：
vlc播放器输入：rtmp://localhost:1935/myapp/pc

推HLS流：
ffmpeg -loglevel verbose -re -i test.mp4 -vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/movie

验证HLS流推送情况：
vlc播放器输入：http://localhost:8765/hls/movie.m3u8 或者Safari浏览器打开此地址
解释：
1、http://localhost:8765/hls 会指向nginx/hls文件夹
2、movie.m3u8 是动态更新的m3u8文件
打开nginx目录下的hls文件夹，你可以看到m3u8和ts文件一直在不断更新

注意：跨域问题
在nginx.conf中要配置跨域，add_header Access-Control-Allow-Origin *;
这样就不会在video.js或其他播放器下无法访问

使用video.js播放hls直播源
注意：如果直接打开页面不行，就尝试下放下服务器环境下打开

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>video.js</title><link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet"><script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script><script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script></head><body><video id="my-player" class="video-js" controls><source src="http://localhost:8765/hls/movie.m3u8" type="application/x-mpegURL"><p class="vjs-no-js">not support</p></video><script type="text/javascript">var player = videojs('my-player',{width:400,heigh:200});</script></body>
</html>

H5视频之直播流服务搭建（一）相关推荐

搭建rtmp直播流服务之1：使用nginx搭建rtmp直播流服务器（nginx-rtmp模块的安装以及rtmp直播流配置）
欢迎大家积极开心的加入讨论群群号:371249677 (点击这里进群) 一.方案简要首先通过对开发方案的仔细研究(实时监控.流媒体.直播流方案的数据源-->协议转换-->服务器--&g ...
浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案
浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案使用http-flv 原文链接目录: 相关资源: 背景几种视频流比较 http-flv搭配flv.js播放方案 flv.js延迟问题 ...
ppst——开发技术视频 spring的restful服务搭建
ppst--开发技术视频 spring的restful服务搭建 [url] www.ppst.cc[/url]这里有更多的开发技术学习视频,大家可以把自己的博客录制成视频,让大家收看,也可以通过收费收 ...
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
java rtmp_搭建rtmp直播流服务之2：使用java实现ffmpeg命令接口化调用（用java执行ffmpeg命令）...
一.环境搭建 1.安装ffmpeg 下载对应系统的ffmpeg安装包,个人采用windows平台进行开发,所以安装了windows版本(各平台ffmpeg命令都是一样的,无须纠结) 2.ffmpeg的 ...
ios（苹果）设备直播流媒体服务搭建
OS设备上要用原生的浏览器或者播放器来跑直播流媒体,确实是有点费周折,不过找对了软件和方法就相对容易许多.收集了一下关于iOS设备上搭建直播流媒体服务器的一些解决方案,如下: 1.凤雨小城,HLS 简 ...
H5直播之从推流服务搭建到视频直播
最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下来将围绕这两种视频流协议来展开H5直 ...
[转]H5直播之从推流服务搭建到视频直播
转自http://www.php.cn/html5-tutorial-403035.html 最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 ...
Docker简易搭建个人直播流rtmp服务器总结
这里写目录标题 1.准备工作 2.DOCKER直接一步部署 2.1安装镜像 2.2运行容器 3.播放方法 4.参考博客: 4.1解决问题 4.2进阶博客参考 4.3局域网搭建教程 4.3.1推流不成功 ...

H5视频之直播流服务搭建（一）

H5视频之直播流服务搭建（一）相关推荐

最新文章

热门文章