m3u8编码视频webgl、threejs渲染视频纹理demo

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>fz-live</title>
  <link href="./css/video.css" rel="stylesheet">
  <script src="./js/video.js"></script>
  <script src="./js/videojs-live.js"></script>
  <script src="./js/three.min.js"></script>
</head>
<body>
  <video id="my_video_1" autoplay=true class="video-js vjs-default-skin"  preload="auto" width="300" height="200"
  data-setup=‘{}‘>
    <source src="./src/z.m3u8" type="application/x-mpegURL">
  </video>

  <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( 400, 400);
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.PlaneGeometry( 10, 10 );

            var video = document.getElementById( ‘my_video_1‘ );

            var texture = new THREE.VideoTexture( video );
            texture.minFilter = THREE.LinearFilter;
            texture.magFilter = THREE.LinearFilter;
            texture.format = THREE.RGBFormat;
            var material =  new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture,  side: THREE.DoubleSide } );
            var plane = new THREE.Mesh( geometry, material );
            scene.add( plane );

            camera.position.z = 10;

            var animate = function () {
                requestAnimationFrame( animate );
                renderer.render(scene, camera);
            };

            animate();
  </script>

</body>
</html>

效果:

引用资源:

https://github.com/huangyaoxin/hLive

https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

https://threejs.org/docs/index.html#api/geometries/PlaneGeometry

时间: 2024-10-11 07:52:49

m3u8编码视频webgl、threejs渲染视频纹理demo的相关文章

Chromium为视频标签&lt;video&gt;渲染视频画面的过程分析

在浏览器中,<video>标签与普通标签有一个显著不同点,它们的内容不是由浏览器自己绘制出来,而是由第三方组件提供的.例如,在Android平台上,<video>标签的内容来自于系统播放器MediaPlayer的输出.然而在非全屏模式下,<video>标签的内容又需要像普通标签一样,嵌入在HTML页面中显示,也就是由浏览器进行渲染.本文接下来就分析Chromium渲染<video>标签内容的原理. 老罗的新浪微博:http://weibo.com/sheng

NeHe OpenGL教程 第三十六课:从渲染到纹理

转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第三十六课:从渲染到纹理 放射模糊和渲染到纹理: 如何实现放射状的滤镜效果呢,看上去很难,其实很简单.把渲染得图像作为纹理提取出来,在利用OpenGL本身自带的纹理过滤,就能实现这种效果,不信,你试试. 嗨,我是Dario Corn

Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能

视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能.视频格式转换.视频抓图.给视频加水印等. ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可以进行屏幕录制,同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器,支持直播应用. 1.能支持的格式 ffmpeg能解析的格式:

Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端,本地在进行拉流播放的流程.所以这个过程中,我们需要首先来把服务端这个中间环节的工作搞定,后续再弄推流和拉流功能.现在推流大部分都是使用RTMP/HLS协议的,关于这两个协议的区别: 所以我们服务端搭建就需要用这两个协议,不过本文放心了,不会去手动的编写一套协议代码的,谁叫这个世界属于开源呢? 需要的

音视频即时通讯—Android 视频开发

移动互联网随着智能手机的普及应用越来越广泛,所谓移动互联网是将移动通信和互联网整合在一起,使移动设备(包括手机和上网本.Pad平台)可以随时随地地访问互联网资源和应用获取相应的信息和处理. 从2011年开始,“三网融合”正式被国务院纳入十二五计划并开始实施.国务院十分明确的把三网融合作为全面提高信息化水平的重要手段进行定位,彰显出三网融合在国家战略层面发展不可替代的重要性,也为三网融合在十二五期间的发展提出了明确的方向和目标.在同一的治理平台下,实现音频.视频.数据信号的传输和管理,提供各种宽带

使用ffmpeg 对视频截图,和视频转换格式

//执行CMD命令方法 public static void CmdProcess(string command)//调用CMD        {            //实例化一个进程类            Process process = new Process();            process.StartInfo.FileName = "cmd.exe"; //将cmd的标准输入和输出全部重定向到.NET的程序中            process.StartI

Java Web 中使用ffmpeg实现视频转码、视频截图

转载自:[http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html] 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能.视频格式转换.视频抓图.给视频加水印等. ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可

音视频SDK包 手机视频开发方案

"SDK即时通讯平台"是一套跨平台的即时通讯解决方案,基于先进的H.264视频编码标准.AAC音频编码标准与P2P技术,支持高清视频,整合了佰锐科技在音视频编码.多媒体通讯领域领先的开发技术和丰富的产品经验而设计的高质量.宽适应性.分布式.模块化的网络音视频互动平台. "SDK即时通讯平台"包含了音视频处理模块(采集.编解码).流媒体管理模块(丢包重传.抖动平滑.动态缓冲).流媒体播放模块(多路混音.音视频同步)以及P2P网络模块(NAT穿透.UPnP支持.IP组播

干货 | VMAF视频质量评估在视频云转码中的应用

作者介绍:姜生,PP云高级技术经理,10余年视频编解码算法设计优化,流媒体应用等领域开发经验. 一 .VMAF 技术介绍: VMAF 的全称是:Visual Multimethod Assessment Fusion,视频质量多方法评价融合.这项技术是由美国Netflix公司开发的一套主观视频质量评价体系.2016年1月,VMAF 正式开源: 下载地址: https://github.com/Netflix/vmaf 二 .通行视频质量评价方法的局限: 评价一个编码后的视频流与压缩前的视频流质量