guoguicheng / mxreality.js

mxreality.js是一款支持普通视频，全景VR视频，直播普通视频，直播全景视频，支持hls，flv，webrtc直播协议，支持全景图的h5播放器,支持cubemap视频和图片。

covideo.cn(酷视频) 专注研究web VR视频和普通视频低延迟解决方案｜focus on web VR video and general video low latency solutions

当前github版本为社区版免费版，开放源码，社区共同维护

// 安装依赖
npm install

// 编译源码
gulp build

// 启动服务查看测试例子
http-server -p 8080

播放器sdk分为免费版和收费版，收费版有mxreality.js进取版(Plus)和mxplayer.js旗舰版（Pro）， 如果对直播和VR交互要求不高，只用于普通hls直播，mp4视频播放，全景图，当前免费版完全可以满足您的需要； 如果觉得mxreality.js库基本可以满足，但是需要对播放器功能需要扩充，如支持普通平面视频播放器功能，VR功能增强等需求或需要技术支援服务则可以选 用mxplayer.js进取版（Plus）。 如果对直播要求低延迟，支持flv直播，支持h264、h265解码、支持webrtc，支持ts，立体电影等功能，有更好的清晰度，更好的兼容性， 则推荐购买mxplayer.js授权版本（Pro）； 授权版本对这些功能都支持的很友好，直接购买授权版本可免除大量开发时间和开发成本

The player SDK is divided into free version (Basic) and paid version. The paid version has MxRealite.js Enterprise (Plus) and MxPlayer.js Ultimate (Pro). If the live broadcast and VR interaction requirements are not high, only used for general HLS live broadcast, MP4 video playback, panorama, the current free version can fully meet your needs; If you think that the MxReality. Js library can basically meet, but the player functions need to be expanded, such as support for ordinary flat video player functions, VR function enhancement and other requirements or need technical support services, you can choose Use mxplayer.js for jq-version. If low delay is required for live broadcasting, support FLV live broadcasting, support H264, H265 decoding, support WEBRTC, support websocket, stereo film and other functions, with better clarity, better compatibility, It is recommended to purchase the authorized version of mxplayer.js (Pro); The licensed versions support these functions very friendly, Buying the licensed version directly eliminates a lot of development time and development costs

---

check support (Chinese)

	探索版（当前版本）	进取版A	进取版B	旗舰版A	旗舰版B	旗舰版C	旗舰版D	旗舰版E
hls直播	支持	支持	支持	不支持	不支持	支持	支持	支持
flv直播	部分支持	部分支持	部分支持	支持	支持	支持	支持	支持
webrtc直播	否	否	否	否	否	否	否	支持
websocket直播	否	否	否	否	否	否	否	支持
延迟	高	中	中	低	低	低	低	低
全景图	支持	支持	支持	支持	支持	支持	支持	支持
VR视频	支持	支持	支持	支持	支持	支持	支持	支持
普通视频	不支持	不支持	支持	不支持	不支持	不支持	支持	支持
CubeMap	支持	支持	支持	支持	支持	支持	支持	支持
CubeMap自定义面的位置	不支持	不支持	不支持	支持	支持	支持	支持	支持
渲染加速	CPU	CPU	CPU	GPU	GPU	GPU	GPU	GPU
立体视频	不支持	不支持	支持	不支持	不支持	不支持	不支持	支持
影院模式	不支持	不支持	支持	-	-	-	-	-
技术支持	无	1年	1年	1年	1年	1年	1年	1年
视频编码	h264	h264	h264	h264	h264,h265	h264,h265	h264,h265	h264,h265
清晰度	2k	4k	4k	4k	4k	4k	4k	4k
价格	免费	询价	询价	询价	询价	询价	询价	询价

---

check support (English)

	Basic(current version)	Plaus-A	Plus-B	Pro-A	Pro-B	Pro-C	Pro-D	Pro-E
Enable hls	supported	supported	supported	not supported	not supported	supported	supported	supported
Enable flv	Part	Part	Part	supported	supported	supported	supported	supported
Enable webrtc	not supported	not supported	not supported	not supported	not supported	not supported	not supported	supported
websocket	not supported	not supported	not supported	not supported	not supported	not supported	not supported	supported
Delay	slow	slowish	slowish	fast	fast	fast	fast	fast
Panorama image	supported	supported	supported	supported	supported	supported	supported	supported
Panorama video	supported	supported	supported	supported	supported	supported	supported	supported
Normal video	not supported	not supported	supported	not supported	not supported	not supported	supported	supported
CubeMap	supported	supported	supported	supported	supported	supported	supported	supported
Change CubeMap face	not supported	not supported	not supported	supported	supported	supported	supported	supported
Booster	CPU	CPU	CPU	GPU	GPU	GPU	GPU	GPU
Stereo video	not supported	not supported	supported	not supported	not supported	not supported	not supported	supported
Cinema mode	not supported	not supported	supported	-	-	-	-	-
Free support	none	one year	one year	one year	one year	one year	one year	one year
Enable decoder	h264	h264	h264	h264	h264,h265	h264,h265	h264,h265	h264,h265
Enable resolution	2k	4k	4k	4k	4k	4k	4k	4k
Buy license	free	?	?	?	?	?	?	?

---

• 中文在线文档

• English Documents

• 有问题可进入社区提问

• Any questions?please check discuss

---

• 查看官方例子 在线地址
• Check examples examples

---

• 🐡本站提供全面的VR全景视频、普通2D和3D视频是在线免费上传分享功能，支持免费在线直播。
• 🐡Support VR video,VR video live,panorama images

---

• 🎈提供VR视频和普通视频直播技术支持
• 🎈Provide business support

---

• 🌼加入QQ群863363544交流行业技术心得
• 🌼Follow Twitter

---

Business support

Connect on Twitter

(商务合作请咨询）

---

mxreality.js's Issues

请问我替换了全景图之后为什么您的案例文件显示不出来呢？ 而且它好像不支持某些浏览器

有完整的api使用说明吗

有完整的api使用说明吗？

你好，请问一下mouse event那个模板的自动旋转那个按钮点击按钮怎么没反应

微信

跨域视频播放不了是什么原因啊

本地播放也有这个错误可以播放，跨域视频播放不了请问怎么解？

移动端手机旋转怎么设置跟随手机角度变化而变化

你好！我见官网上的例子是可以根据手机的旋转镜头也随之旋转，但是demo上提供的没有这个效果

怎么在toolbar上调出全屏按钮

怎么在toolbar上调出全屏按钮

大文件加载页面直接崩溃

测试大文件图片发现一个问题：大文件图片加载成功但material渲染失败，报错信息为：THREE.WebGLRenderer: Context Lost，THREE.WebGLRenderer: image is too big (21000x10500). Resized to 16384x8192

能实现全景里面，测量面积，测量长度功能吗？

陀螺仪打开了，安卓可以正常使用，苹果手机不行

<title>测试视频</title> <style>

    #example {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

</style>

<script src="../build/three.js"></script> <script src="./js/renderers/CanvasRenderer.js"></script> <script src="./js/renderers/Projector.js"></script> <script src="../build/mxreality.js"></script> <script>

window.onload=function () {
    init();
}
//var vr=new VR(scene,renderer,container);
function init() {
    var  scene, renderer;
    var container;
    
    //renderer = new THREE.WebGLRenderer();
    AVR.debug=true;
    if( !AVR.Broswer.isIE() && AVR.Broswer.webglAvailable() ) {
        renderer = new THREE.WebGLRenderer();
    }else {
        renderer = new THREE.CanvasRenderer();
    }
    renderer.setPixelRatio( window.devicePixelRatio );
    container = document.getElementById('example');
    container.appendChild(renderer.domElement);
    scene = new THREE.Scene();
    var vr=new VR(scene,renderer,container,{"fov":50});
    vr.vrbox.radius=600;
    if(AVR.isCrossScreen()) {
        vr.effect.separation=1.2;
    }
    vr.loadProgressManager.onLoad=function () {
        console.log('ssssssssssss')
        vr.video.muted=true;
        vr.controls.gyroUnfreeze()
        vr.VRObject.getObjectByName("__mxrealityDefault").visible = true;
    }
    //AVR.useGyroscope=false;
    vr.init(function () {
        
    });

    vr.playPanorama('1.mp4',vr.resType.video);
    vr.video.setAttribute("loop","loop");
    vr.video.crossOrigin="Anonymous";



    vr.video.onended=function () {
    }

}

</script>

在移动 Safari 中sliceVideo hls直播 似乎存在问题

请问，如何默认隐藏底部控制栏或者自定义样式？

我想默认隐藏底部控制栏，以及自定义一个按钮控制陀螺仪是否启用。

rtmp的直播源无法播放

vr_vedio.html案例会报错。

Error in mounted hook: "TypeError: Hls is not a constructor"

在 vue 中
import * as Hls from 'mxreality.js/build/hls';
window.Hls = Hls
报错
改为import Hls from 'mxreality.js/build/hls';
window.Hls = Hls
正常

或者
import * as Hls from 'mxreality.js/build/hls';
window.Hls = Hls.default;

请教一下bindCameraEvent在ios显示不正常的问题

请教一下，我用set_icon_button_in_pano_obj.html作测试，发现在我的一加手机(android 6)的微信中，能够显示出中心视觉点(cameraPointer)和移动到按钮上时出现了圆形图案(wait)。这代表成功的。
但是在其他设备上就显示不正常，pc,ios和华为(android 8)都不显示cameraPointer和wait。后来我修改了一下源码强制用分屏模式渲染，在pc chrome中断点发现最终有进入updatePosition函数中，cameraPointer和wait的visible都是true了，但是还是看不见它们。
请问如何解决？

ios13，Safari动作与方向权限没选项了，水平陀螺仪不能用

有什么办法
用的是https，能否跳出弹窗向safari请求动作与方向权限

移动端 点击 vr按钮 会出现 “请取消屏幕翻转锁定后装入VR盒子中”

Google浏览器访问出现问题

我在用Google访问的时候页面一片黑，没有效果，换成IE的话就有效果，试着改了下
if( !AVR.Broswer.isIE() && AVR.Broswer.webglAvailable() ) { renderer = new THREE.WebGLRenderer(); }else { renderer = new THREE.CanvasRenderer(); }
好像也不得行

insertRule css报错

Cannot access StyleSheet to insertRule 是什么原因

横屏出现两个画面的问题

1. 横屏会出现两个画面，可能是用于vr模式吧，
   如果不需要vr模式，怎么控制其不显示两个画面，就一个。

2. 另外在移动端上有没有手势来缩放功能(PC上有滚轮缩放)，在开启重力感应后，画面内的焦点容易找不到，希望能讲镜头拉远一些~~

ios上自动调出全屏播放

集成在ios上，点击播放按钮就全屏了，黑乎乎的

pc端如何进入VR模式

webpack

求一个webpack打包的例子啊，一直报 THREE is not defined

华为手机微信端播放m3u8，有声音，没图像，原生可播放。官网在微信中打开测试m3u8直播，卡在第一帧，声音正常

相关配置

• 手机型号： p30
• 微信版本：7.0.14
• 测试使用demo: 'mxreality.js\examples\vr_live_video.html'
• 测试直播流：'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
• 官网卡第一帧:'https://vs1.baduziyuan.com/20180228/LLCEX1pN/index.m3u8'('#盲井 HD720P中字')

---

代码片段

参考例子examples\vr_live_video.html仅修改了直播流

vr.playPanorama('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',vr.resType.sliceVideo);

---

问题

1. 在微信播放器中，黑屏但有声音。切换到原生播放器没有问题。
2. 用微信访问官网,m3u8文件，仅有('#盲井 HD720P中字')会有静止画面，声音正常。原生播放正常。(推断可能是卡在第一帧)。

---

希望官方能尽快修复该问题。

播放视频时有报错，但是功能正常？

前辈您好！请问您的项目能够实现自然特征追踪的AR么（即不用marker而是直接识别图片，然后在图片上做AR做呈现）？

齿距非常高~~怎么办？

vr全景视频大于Gb以上只显示播放时长没显示画面

直播支持m3u8嘛?

直播支持m3u8嘛?

用video标签播放网络视频资源没有问题，但用mxreality播放网络视频资源就会出现跨域问题

后台接口调用的跨域已经打开，接口调用都没问题，就是网络资源放入mxreality就会出现跨域问题

无法运行vr_video的例子

直接在360极速浏览器下运行DEMO，如vr_video.html，播放进度条出现00:00/00:NaN的显示，更换成本地视频，如vr.playPanorama('shark.mp4',vr.resType.video); 同样是NaN的显示； 看console的错误 “Uncaught (in promise) DOMException: Failed to load because no supported source was found.” 请教这如何处理？

ios移动端（chrome safari）无法进入全屏 安卓移动端测试无问题

ios移动端（chrome safari）无法进入全屏 安卓移动端测试无问题

移动端无法横屏

如图所示，移动端无法横屏。环境是在 易班app下面的webview加载

关于在移动端贴图发糊的问题

我用three.js写了一个全景图，在移动端，贴图明显的会糊。所以想请教一下怎么解决。
这个是demo的地址：https://dev-admin.mankuhome.com/test/index.html

通过样例测试微信打开有声音没视频画面

我的手机是华为mate9，浏览器打开正常，手机微信打开有声音没有视频，我需要怎么调哪，方便了可以加一下，看看有没有 机会合作。qq276104951

视屏流码率切换

你好，请问下怎么进行视屏流码率切换，可以集成进去么？

你好，请问如何找到热点标记在图上的坐标

点击全景图时，可以得到点击的地方距离左上角的x,y像素，请问我该如何在该位置上添加一个热点标记呢，也就是如何确定热点标记添加到这个点的x,y坐标，谢谢了，这个框架资料很少啊

建议：在移动端点击VR进入全屏模式，菜单追加陀螺仪开启功能。

建议：在移动端点击VR进入全屏模式，菜单中追加陀螺仪开启功能，这样一方面与PC能实现一样的同步显示，一方面方便用户或使用VR眼镜或用手式操作。
请问作者这样是否可行？

m3u8格式的视频和直播在安卓无法正常播放

同一个m3u8链接，在ios正常播放，在安卓的qq浏览器内只有第一帧图片点击播放没有反应，在安卓自带的浏览器内只有声音画面是一片黑，在安卓微信内正常播放

auto_fix_top_and_bottom 自己定义图片数组 出来的效果图倒置

vr.playPanorama(sliceArray, vr.resType.slice); 自己防止图片数组 出来的效果图倒置 请问图片如何旋转个180?

您好 为什么在手机上面会变黑，自动把全景图变黑了！！！？

您好 为什么在手机上面会变黑，自动把全景图变黑了！！！？

能否设定播放器显示的宽和高？

能否设定播放器显示的宽和高？

手机开启vr提示开启旋屏

前辈您好，项目地址在qq上打开，开启vr模式提示需要取消锁定屏幕，但是我手机本身已经开启了旋屏，可能是qq锁定了屏幕，这种怎么处理呢

视频清晰度

您好，

请问有没有静音的选项

滚动页面的问题

我把默认的代码导入之后，发现页面无法滚动，而且被禁用了鼠标右键。因为设置播放器下方还有内容。不知有没有关闭这些限制的方法

热点样式在ios系统下有问题

直接用ios手机查看带热点的demo都只能显示图片,不显示上面热点名

使用小程序开发 但是navigator.userAgent找不到

mxreality里面的判定客户端的navigator.userAgent好像找不到

直播问题

请问哪个例子能播放直播流，我看到都是播放MP4,放上m3u8都是黑屏，谢谢了

全景播放器如何设置手机陀螺仪控制视角的功能

请问在全景播放时，如何设置手机陀螺仪控制视角的功能，能通过移动手机位置来观看不同角度的图片