基于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实时录播等功能,就不一一介绍了!!
最新评论
- 相关文章
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
HTML5动画背后的数学2 - 仿生智能算法综述
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
更多...