VR视频直播播放器

最新推荐文章于 2021-06-17 09:10:50 发布

langhaoben

最新推荐文章于 2021-06-17 09:10:50 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： VR直播文章标签： VR vr直播 three-js 直播 webVR

本文链接：https://blog.youkuaiyun.com/langhaoben/article/details/70257019

本文介绍了一个基于three.js的VR视频直播播放器，支持HLS和rtmp-flv直播流，适用于手机浏览器和微信。项目包括虚拟场景搭建，如VR背景视频球体、VR文字、3D动画模型和Pandatv直播画面的集成。同时，介绍了简单的交互功能和如何处理直播列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VR视频直播播放器

采用 three.js 作为框架的VR视频播放器，支持hls,rtmp-flv直播流播放，可作为直播网站的VR增强版。

three.js 框架构造，易于扩展
配合VR内点击功能，可以简单交互
采用HLS/rtmp-flv播放直播流
适配手机浏览器/微信

VR视频直播播放器

项目地址

VR直播网页播放器
lhbxxx / vr-stream-web-player

虚拟场景搭建

项目基于 [ WebVR Boilerplate ]

基本场景用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, controls.userHeight,