大部分人对直播行业应该不陌生，这行业催生和各式各样的网红，有搞笑的、卖萌的、教父的、性感的可谓试五花八门，也是这个行业早入的老板和个人只要稍有点内容输出就可以赚的盆满钵满。但是我今天要说的估计大部分人都还不是特别的了解，它虽然已经火过一阵子，但是这两年又到了行业低谷，相信不少从事这个行业的同行人士都感觉生存的很困难，但是，虽然我先泼了一把冷水，但对这个行业的认可和未来的必然性毋庸置疑。相信只有坚持到最后的人才能能看到最美的风景，犹如当下的普通直播。
好了，废话不多说，存在即有理，下面我开始讲一节做一个VR直播的HelloWorld，算是为行业做一丁点儿贡献吧。
1、直播肯定需要有个播放器，这里直讲mxreality播放器，其他我也不熟，哈哈。在这里下载https://github.com/guoguicheng/mxreality.js 也可以使用npm i mxreality.js 下载，不过为了入门降低难度，这里只讲原始js调用方法
2、创建一个简单的html页面，在页面中创建渲染播放器的DIV容器，命名为example，后面需要通过ID获取容器对象
<!DOCTYPE html>
<html lang="en">
<head>
<title>hls直播流例子</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
#example {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!-- 这里将会渲染出播放器，这个容器的宽高就是播放器的宽高，不能使用百分比设置 --!>
<div id="example"></div>
</body>
</html>2、在head中引入build文件夹里面的三个js文件，分别试3D渲染引擎库THREE.js ，VR播放器mxreality.js 和解码Hls直播流用的Hls解码库。
<script src="../build/three.js"></script>
<script src="../build/mxreality.js"></script>
<script src="../build/hls.js"></script>3、完成后初始化播放器
<script>
window.onload=function () {
init();
}
function init() {
var scene, renderer;
var container;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container = document.getElementById('example');
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
var vr=new VR(scene,renderer,container);
vr.loadProgressManager.onLoad=function () {}
vr.init(function () {});
}
</script>4、VR视频直播方法
function playLive(url){
vr.playPanorama(url,vr.resType.sliceVideo);
// 如果需要自动播放则需要设置视频静音
vr.video.muted=true;
vr.video.setAttribute("loop","loop");
vr.video.crossOrigin="Anonymous";
vr.video.onended=function () {}
}5、调用直播方法就行直播
playLive('http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8')6、创建一个本地站点进行访问，至此已经完成一个初级VR直播例子，欢迎批量留言，完整代码请查看https://github.com/guoguicheng/mxreality.js/blob/master/examples/vr_hls_live_video.html
扫一扫
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
