VR视频直播播放器
采用 three.js 作为框架的VR视频播放器,支持hls,rtmp-flv直播流播放,可作为直播网站的VR增强版。
- three.js 框架构造,易于扩展
- 配合VR内点击功能,可以简单交互
- 采用HLS/rtmp-flv播放直播流
- 适配手机浏览器/微信
项目地址
VR直播网页播放器
lhbxxx / vr-stream-web-player
虚拟场景搭建
基本场景用three.js进行构建,其中包括以下元素
1. VR抠像视频与背景视频结合
2. VR文字
3. VR 3D动画模型
4. 基于pandatv的直播画面
VR背景视频球体
利用背景视频和绿幕视频进行合成,使抠像视频中的内容可以显示在背景视频中.
- 利用getContentVideo()获取对应的视频球体
function getContentVideo(){
var contentBox;
//读取id为video_content的视频作为抠像视频
video_content = document.getElementById( 'video_content' );
texture_content = new THREE.VideoTexture( video_content );
texture_content.minFilter = THREE.LinearFilter;
texture_content.magFilter = THREE.LinearFilter;
//生成球状背景
var geometry = new THREE.SphereBufferGeometry( 50, 32, 32);
//生成对应参数的材质
v_shaderMaterial = new THREE.ShaderMaterial( {
uniforms: {
//uSampler为抠像视频源
'uSampler':{
value:texture_content
},
//uSource为背景视频源
'uSource':{
value:texture
},
'uRotate':{
value:effectController.bg_rotate
},
'uTop':{
value:effectController.c_top
},
'uScale':{
value:effectController.c_scale
},
'uDiff':{
value:effectController.c_diff
}
},
//利用vertextShader与fragmentShader进行抠像合成,将背景与抠像视频合成为同一个视频流输出
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide
} );
v_shaderMaterial.extensions.derivatives = true;
//生成场景物体
contentBox = new THREE.Mesh( geometry, v_shaderMaterial);
//位置及角度修正
contentBox.position.set(0, cont