基于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实时录播等功能,就不一一介绍了!!
最新评论
- 相关文章
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
更多...