视频直播、全景直播
不少同学未免会又些纳闷、hls直播流几乎所有的平台都支持、只需要少量的改动都可以实现hls直播、为什么还要花那么多精力去研究和支持软解直播hls流呢？
主要原因有一，hls直播流解码依赖于video标签解码、也就意味着video标签支持哪些视频编码就只能直播什么类型的视频，类似于h265就没办法支持、当然按照目前来说大部分视频编码h264基本已经足够，h265编码的视频很少。研发的成本和需求比不是很明显，但是作为一个技术人员角度、就只有一种说法，我可以不用、但是不能没有，因此也支持了软解h264，h265视频编码的功能，只要使用mxplayer的用户可以自己选择是使用video解码器还是软解码器，各有优点灵活切换。
当然了播放器支持直播，也支持视频在线播放，同时不管是直播，点播都支持，播放模式可以在普通视频模式和VR模式灵活切换。
目前市面上如果需要播放flv直播流，大部分都使用的是B站的flv.js,但是flv.js 支持设备有限，ios无法使用导致直播协议无法统一，延迟时间也因此变得不一致。因此mxplayer为解决这个痛点，开发了网页端（包括android/ios/pad/windows/linux等）设备都支持的flv直播解码器，实现了flv直播，延迟一般在1-2秒左右。当然也支持VR flv直播，但是目前还不太建议直接使用软解的方式直播vr，因为vr视频一般都10多兆码率，分辨率也在4K以上，软解比较吃力，所以flv直播流还是应用于普通视频直播，能很好解决flash停止更新导致无法继续使用rtmp低延迟直播带来的问题
目前播放器支持的直播流有webrtc、flv、hls、dash等，延迟比较从低到高依次是webrtc<rtmp<flv<hls,所以说如果觉得flv不足以满足低延迟的要求，那可以直接上webrtc，延迟比rtmp还低，唯一不足之处在于flv和hls可以很方便部署cdn，大部分cdn厂商都支持，而webrtc需要自己配置服务器环境。但是考虑差不多200ms左右的延迟也是值得一试！
本文需要mxplayer.js sdk
一对多和一对一webrtc视频直播和上一篇文章 区别点在于直播一般使用客户端软件，比如直播摄像机，obs，ffmpeg等等将视频流通过rtsp推送到服务器，然后服务器再分发直播流到客户端，然而一对一或一对多直播则直接使用客户端网页直接当前调用设备摄像头，然后将获取到的视频数据通过webrtc推送至服务器，服务器再做相应的处理，使用mxplayer播放器sdk可以很快速完成一个这样的功能，下面附上一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo - webrtc </title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
<div class="container" id="videoPlayer">
<div id="playCanvas"></div>
</div>
<script type='text/javascript' src="../../../lib/mxplayer.js"></script>
<script type='text/javascript'>
var addr = 'webrtc://rtc.mxreality.cn:443/live/livestream';
var player = new Player("playCanvas", window.innerWidth, window.innerHeight, '', function () {
//url:例如 webrtc://domain:443/live/livestream
player.player.publishWebRtc(addr);
//当准备完成开始推送，player.webRtcPublished回调方法将被触发
});
player.playBtnClick = function () {
}
</script>
</body>
</html>注意！摄像头权限需要https下才能唤起。
本文需要mxplayer.js sdk
经过我的多次多场景测试，已经实现通过webrtc技术实现毫秒延迟的h5 直播，其思路就是客户端和服务端建立通信连接，然后服务端分发直播流到个个客户端，具体服务端是如何处理推流、接收、分发、建立webrtc连接的信令服务器的，这些都可以查看srs（simple realtime server）实时高效视频服务器相关的文档，这个比较复杂就不在这里说明了。
服务器搭建完成之后会生成一个webrtc直播地址，通过mxplayer.js 播放器sdk，几行代码就可以实现毫秒级的webrtc直播功能，下面是个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo - webrtc </title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<body>
<div class="container" id="videoPlayer">
<div id="playCanvas"></div>
</div>
<script type='text/javascript' src="../../../lib/mxplayer.js"></script>
<script type='text/javascript'>
var addr = 'rtc.mxreality.cn';
var player = new Player("playCanvas", window.innerWidth, window.innerHeight, '', function () {
var url = 'webrtc://' + addr + '/live/livestream';
player.playWebRtc(url, 'plane', true);
});
player.playBtnClick = function () {
}
</script>
</body>
</html>附上运行截图,obs 推流webrtc直播延迟测试截图
一般市面上的拍摄主要有两种，一种为使用广角相机搭配脚手架，拍摄上下左右前后六个面，再通过全景图合成工具合成，这种方法缺点是合成比较复杂，优点是可以拍出高分辨率图片，后期还可以处理图片。
另外一种则是直接购买VR全景拍摄相机，从几千到上万不等，大小形状不一，自己根据拍摄具体需求选择购买。专业全景拍摄设备则直接拍摄出全景图和视频不需要做任何处理
自从flash被停止支持以后，网页端直播再也无法支持rtmp直播流，导致现有的项目收到影响，现有的直播技术分别还有hls流、http-flv直播流，dash流等
hls直播流相对应其他直播流，兼容性最好，但是延迟也是最高的，http-flv直播依赖于flv.js，dash直播依赖于dash.js,延迟相对于hls可以控制在1-6秒左右，但在ios系统又无法正常使用，如果项目对兼容性有要求那也不是最好的解决办法。
那如何才能兼顾延迟低，兼容性又好呢？