基于jsmpeg库下使用ffmpeg创建视频流连接websocket中继器传输视频并播放
这个功能的基本工作是这样的:
1.使用node运行jsmpeg库下的websocket-relay.js文件,这个文件的作用是创建一个websocket视频传输中继器
2.运行ffmpeg,将输出发送到中继的HTTP端口,这个http端口是使用node.js搭建的一个简易的http服务器
3.将浏览器中的JSMpeg连接到中继的Websocket端口,浏览器中的JSMpeg是node.js环境搭建的时候输出的一个html文件,文件里面引用了JSMpeg库, 并实例化一个新的基于JSMpeg库下的Player;
必备工具:
1)安装ffmpeg,到http://ffmpeg.org/download.html下载window版本的exe文件,需要在电脑的环境变量中的path设置ffmpeg目录所在的路径
2)安装Node.js和npm,这个安装方法就不详细介绍了
3)安装http-server,当然可以使用node.js的express()搭建一个简单的服务器,我们将使用它来提供静态文件(view-stream.html,jsmpeg.min.js),以便我们可以在浏览器中使用视频
4)安装git并克隆jsmpeg库(或者直接将它下载为ZIP并解压)
sudo apt-get install git
git clone https://github.com/phoboslab/jsmpeg.git
5)转到jsmpeg /目录 cd jsmpeg/ 安装Node.js Websocket库:
npm install ws
6)在jsmpeg目录中使用git命令行启用websocket中继器,这个中继器在jsmpeg库的websocket-delay.js中已经提供了,只需命令node websocket-delay.js videoPassword streamPort websocketPort 就可以启动,其中videoPassword就是自己定义的视频流传输的密码,在后面的ffmpeg创建视频流过程会用到,streamPort则是视频流的端口号,websocketPort是websocket中继器的端口号,需跟jsmpeg库中的view-stream.html文件创建的Player的端口保持一致
7)node启动自己搭建的简易http服务器,view-stream.html文件输出并在浏览器中打开对应的地址查看,将参见必备工具3,在浏览器中输入127.0.0.1:1023就可以看到服务器输出的view-stream.html文件
8)在git命令中使用ffmpeg生成推流视频并输出视频到自定义的websocket中继器提供的命令node websocket-delay.js videoPassword streamPort websocketPort地址,如:
ffmpeg -i "video.mp4" -f mpegts -codec:v mpeg1video -s 360x480 -b:v 150k -r 30 -bf 0 -ac 1 -b:a 128k http://127.0.0.1:1024/lpgvideo
video.mp4就是jsmpeg中视频文件,后面的http://127.0.0.1:1024/lpgvideo就是websocket中继器中自定义的视频流传输协议host+streamPort+videoPassword,参见6)跟多ffmpeg命令参见中文文档:https://xdsnet.gitbooks.io/other-doc-cn-ffmpeg/content/index.html,jsmpeg库的地址=>https://github.com/phoboslab/jsmpeg
end:不出意外的话就可以在浏览器中看到ffmpeg推过来的video.mp4视频文件在播放,当然还有许多诸如实现实时录屏直播,使用vicam实时录播等功能,就不一一介绍了!!


最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...Blender2.7给平面模型添加纹理贴图
在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...HTML5动画背后的数学2 - 仿生智能算法综述
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
更多...