开源流媒体服务器SRS学习笔记(2) - rtmp / http-flv / hls 协议配置 及跨域问题
修改该文件：
listen 1935;
max_connections 200;
srs_log_tank file;
srs_log_file ./objs/srs.log; http_api {
enabled on;
listen 1985;
} http_server {
enabled on;
listen 8080;
dir ./objs/nginx/html;
} stats {
network 0;
disk sda sdb xvda xvdb;
} vhost __defaultVhost__ {
# http-flv设置
http_remux{
enabled on;
mount [vhost]/[app]/[stream].flv;
hstrs on;
} # hls设置
hls{
enabled on;
hls_path ./objs/nginx/html;
hls_fragment 10;
hls_window 60;
}
}
然后执行：
sudo /etc/init.d/srs reload
让配置即时生效，VLC Player里下列3个地址，应该都可以播放了：
| 协议 | 地址 |
| rtmp | rtmp://srs_server_ip:1935/live/livestream |
| http flv | http://srs_server_ip:8080/live/livestream.flv |
| hls | http://srs_server_ip:8080/live/livestream.m3u8 |
要注意的是：hls是把实时的视频流，分成1个个小的切片，保存在/usr/local/srs/objs/nginx/html/live/ 目录下，参考下图：
不太严谨的话，可以理解为播放的是服务器上已经生成好的视频片段，因此就算在obs把实时视频直播源切断，还是可以播放一段时间的。(实时生成视频切片需要时间，而且每个切片本身是N秒一切割，所以不难理解为啥hls协议延时最大）
h5播放hls:
借助video-js项目，可以很容易实现.m3u8的hls播放：
<head>
<title>video-js HLS demo</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
</head> <body>
<video id='my-video' class='video-js' controls preload='auto' width='640' height='320' poster='avatar-poster.jpg'
data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
<source src='http://10.2.*.*:8080/live/livestream.m3u8' type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video> <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> <script>
var player = videojs('my-video');
player.play();
</script> </body>
但播放时，如果h5页面与.m3u8的视频源不在同一个域名，浏览器会遇到跨域问题。
网上有一种解决办法，是修改srs的源码，增加Access-Control-Alow-Orogin:*，但个人不推荐这种做法，一来把安全性降低了，容易造成盗播等安全问题。二是如果官网以后fix bug了，自己又得改一次。
更好的办法，是在srs前面放一个nginx，做转发来解决跨域问题。通常h5页面，是通过nginx来访问的，可以在nginx里，把特定视频源路径，转发到后端srs服务器上，参考以下配置：
location /srs/ {
proxy_pass http://10.2.*.*:8080/;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
}
这样，请求http://localhost:81/srs/live/livestream.m3u8的请求，都会转发到http://10.2.X.X:8080/live/livestream.m3u8上，跨域问题解决后，就可以正常播放了，参考下图的效果：
tips: obs+srs支持多路视频源同时直播，上图中阿凡达+本机摄像头，二路视频同时推流/拉流，毫无影响。
h5播放http-flv
首先要感谢B站开源的flvjs，可以不依赖于flash player，纯js+html实现flv的播放。
<!DOCTYPE html>
<html> <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 640px;
} .urlInput {
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
} .centeredVideo {
display: block;
width: 100%;
height: 320px;
} .controls {
display: block;
width: 100%;
text-align: left;
}
</style>
</head> <body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="640" height="320">Your browser is too
old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
<script src="./flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
enableWorker:true,
enableStashBuffer:false,
stashInitialSize:128,
url: 'http://localhost:81/srs/live/livestream.flv', });
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flv_start();
} function flv_start() {
player.play();
} function flv_pause() {
player.pause();
} function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
} function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body> </html>
当然，如果播放端环境可控(比如pc端，且能确定安装并允许支行flash player）直接用flash player播放flv效果更好。
开源流媒体服务器SRS学习笔记(2) - rtmp / http-flv / hls 协议配置 及跨域问题的更多相关文章
- 开源流媒体服务器SRS学习笔记(1) - 安装、推流、拉流
SRS(Simple RTMP Server) 是国人写的一款非常优秀的开源流媒体服务器软件,可用于直播/录播/视频客服等多种场景,其定位是运营级的互联网直播服务器集群. 一.安装 官网提供了3种安 ...
- 开源流媒体服务器SRS学习笔记(4) - Cluster集群方案
单台服务器做直播,总归有单点风险,利用SRS的Forward机制 + Edge Server设计,可以很容易搭建一个大规模的高可用集群,示意图如下 源站服务器集群:origin server clus ...
- 开源流媒体服务器SRS学习笔记(3) - HTTPCallback实现安全认证
按上回继续,安全论证是绝大多数应用的基本要求,如果任何人都能无限制的发布/播放视频,显然不适合.SRS中可以通过HTTPCallback机制来实现,参考下面的配置: ... vhost __defau ...
- 流媒体技术学习笔记之（十）HLS协议直播延时优化(35s到10S)
1.首先要了解HLS延时的机制,也就是为什么会延时,延时主要发生在什么地方. HTTP Live Streaming 并不是一个真正实时的流媒体系统,这是因为对应于媒体分段的大小和持续时间有一定潜在的 ...
- EasyDarwin开源流媒体服务器实现RTSP直播同步输出MP4、RTMP、HLS的方案思路
背景 近期跟开源团队商量,想在EasyDarwin上继续做一些功能扩展,目前EasyDarwin开源流媒体服务器只能够实现高效的RTSP推流直播转发/分发功能,输入与输出都是RTSP/RTP流,不能够 ...
- NodeJS版本EasyDarwin开源流媒体服务器开发心得
title: Node版本EasyDarwin开发心得 date: 2018-03-27 22:46:15 tags: 年后着手Node版本EasyDarwin的开发工作,截止到今天2018年03月2 ...
- EasyDarwin开源流媒体服务器Golang版本：服务端录像功能发布
EasyDarwin开源流媒体服务器(www.easydarwin.org)现在使用Go版本实现了.最新的代码提交,已经支持了推流(或者拉流)的同时进行本地存储. 本地存储的原理,是在推流的同时启动f ...
- EasyDarwin开源流媒体服务器Golang版本：拉转推功能之拉流实现方法
EasyDarwin开源流媒体服务器(www.easydarwin.org),拉转推是一个很有意义的功能,它可将一个独立的RTSP数据源"拉"到服务器,再通过转发协议转发给多个客户 ...
- 我为什么选择采用node.js来做新一代的EasyDarwin RTSP开源流媒体服务器
在去年我们还未开始开发基于node.js的新版本EasyDarwin RTSP开源流媒体服务器的时候,我写了一篇博客<对EasyDarwin开源项目后续发展的思考:站在巨人的肩膀上再跳上另一个更 ...
随机推荐
- BZOJ 1706
题解: 倍增+floyd 首先这题比较容易想到是把每个点拆点做dij 但是这样复杂度是knlogn的 这道题的k较大,所以不行 我们考虑到每走一步,其实就是在进行一次floyd 而这个可以看成矩阵乘法 ...
- Flink--3种分区方式
partitionByHash //TODO partitionByHash val data = new mutable.MutableList[(Int, Long, String)] data. ...
- Codeforces 1140F Extending Set of Points 线段树 + 按秩合并并查集 (看题解)
Extending Set of Points 我们能发现, 如果把x轴y轴看成点, 那么答案就是在各个连通块里面的x轴的个数乘以y轴的个数之和. 然后就变成了一个并查集的问题, 但是这个题目里面有撤 ...
- Codeforces 264C Choosing Balls 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/CF264C.html 题目传送门 - CF264C 题意 给定一个有 $n$ 个元素的序列,序列的每一个元素是个 ...
- BZOJ4811 [Ynoi2017]由乃的OJ 树链剖分
原文链接http://www.cnblogs.com/zhouzhendong/p/8085286.html 题目传送门 - BZOJ4811 题意概括 是BZOJ3668长在树上并加上修改和区间询问 ...
- Manager解决Process进程之间的数据访问
import multiprocessing mgr = mutiprocessing.Manager() 开启一个守护子进程,并返回用来与其通信的管理器 share_list = mgr.list( ...
- linux 更新yum源 改成阿里云源
1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS-Base ...
- UVA 232 Corssword Answer
题意:输入m*n大小的字符串(里面有*,*为黑格,其他为白格),然后对它编号,编号规则为从左到右,从上往下,且左边或上面没有白格(可能是黑格或越界),如下图: 注意: ①除第一次输出答案外,其余每次输 ...
- JavaScript中本地对象、内置对象和宿主对象（转）
首先解释下宿主环境:一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序.如:web浏览器,一些桌面应用系统等.即由web浏览器或是这些桌面应用系统早就的环境即宿主环境. ...
- [python]Flask-migrate简单入门
Flask-Migrate是用于处理SQLAlchemy 数据库迁移的扩展工具.当Model出现变更的时候,通过migrate去管理数据库变更. Migrate主要有3个动作,init.migrate ...