nodejs实现截取上传视频中一帧作为预览图片


Posted in NodeJs onDecember 10, 2017

客户有个上传视频的需求,上传的视频呢,需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图,成品如下图所示:

nodejs实现截取上传视频中一帧作为预览图片

当然了,上传视频的界面就不贴出来了,毕竟我们这篇文章的重点不在于如何上传,而在于如何用nodejs截取视频中的帧!~

这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg,需要安装在服务器上由nodejs调用,

代码贴出如下:

function fecthVideoThumbnail(entryid, index){ 
 var filename = path.join(imageDir, entryid, index + videoSuffix); 
 var thumb = path.join(imageDir, entryid, "overview",index + thumbSuffix); 
 var thumbPath = path.join(imageDir, entryid, "overview"); 
 if (!fs.existsSync(thumbPath)) { 
  <span style="white-space:pre"> </span>fs.mkdirSync(thumbPath); 
 <span style="white-space:pre"> </span>} 
 var that = this; 
 filename = filename.replaceAll("\\\\","\\\\"); 
 var cmdthumb = thumb.replaceAll("\\\\","\\\\"); 
 if(!fs.existsSync(thumb)){ 
  exec("ffmpeg -ss 00:00:10 -i "+filename+" -y -f image2 -t 0.001 "+cmdthumb+"", function() { 
    console.log(arguments[0]); 
    console.log('success'); 
    readFileEntry(thumb,that.res); 
  }); 
 }else{ 
  readFileEntry(thumb,that.res); 
 } 
  
}
function readFileEntry(filename, response) { 
 path.exists(filename, function(exists) { 
  if (!filename || !exists) { 
   response.writeHead(404); 
   response.end(); 
   return; 
  } 
  fs.readFile(filename, "binary", function(err, file) { 
   if (err) { 
    response.writeHead(404); 
    response.end(); 
    return; 
   } 
 
   var contentType = 'none'; 
   var ext = path.extname(filename); 
   switch (ext) { 
   case ".xml": 
    contentType = 'application/xml;charset=utf-8'; 
    break; 
   case ".json": 
    contentType = 'application/json;charset=utf-8'; 
    break; 
   case ".png": 
    contentType = 'image/png'; 
    break; 
   case ".jpg": 
    contentType = 'image/jpeg'; 
    break; 
   case ".flv": 
    contentType = "video/flv"; 
    break; 
   } 
    
   response.writeHead(200, { 
    'Content-Type' : contentType, 
    'Content-Length' : file.length, 
    'Accept-Ranges' : 'bytes', 
    'Server' : 'Microsoft-IIS/7.5', 
    'X-Powered-By' : 'ASP.NET' 
   }); 
   response.write(file, "binary"); 
   response.end(); 
 
  }); 
 }); 
}

重点就是这段

exec("ffmpeg -ss 00:00:10 -i "+filename+" -y -f image2 -t 0.001 "+cmdthumb+"", function() { 
    console.log(arguments[0]); 
    console.log('success'); 
    readFileEntry(thumb,that.res); 
  });

exec函数可以像cmd DOS命令台一样直接执行系统命令,ffmpeg提供的正是这样的接口。具体的API可以参照ffmpeg的文档,-ss代表指定视频初始进度,-i代表入参视频文件位置,-y代表Overwrite output files without asking.直接覆盖已存在文件而不必询问,-t代表截取时长(图片的话0.001即可),-f代表
-f fmt (input/output)
Force input or output file format. The format is normally auto detected for input files and guessed from the file extension for output files, so this option is not needed in most cases.

强制输出文件格式,基本上用不到……最后cmdthumb代表输出文件名。nodejs的exec执行完成之后,会通知回调函数。此时返回生成的缩略图即可,将此过程写成rest服务,直接将url填充在img标签的src属性中即可!

nodejs写这种服务端程序非常简单,方便,轻量。比java要简洁得多,并且不需要像tomcat那么麻烦。唯一的缺点可能就是调试比较麻烦了……

另外,上图中所示的视频服务我也是用nodejs实现的,效率还不错~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
Nodejs 发送Post请求功能(发短信验证码例子)
Feb 09 NodeJs
nodejs中使用HTTP分块响应和定时器示例代码
Mar 19 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 NodeJs
nodejs操作mongodb的增删改查功能实例
Nov 09 NodeJs
nodeJS服务器的创建和重新启动的实现方法
May 12 NodeJs
nodejs实现UDP组播示例方法
Nov 04 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 #NodeJs
nodejs发送http请求时遇到404长时间未响应的解决方法
Dec 10 #NodeJs
NodeJs实现定时任务的示例代码
Dec 05 #NodeJs
windows系统下更新nodejs版本的方案
Nov 24 #NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 #NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 #NodeJs
NodeJS实现视频转码的示例代码
Nov 18 #NodeJs
You might like
php4的session功能评述(一)
2006/10/09 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
进一步理解Python中的函数编程
2015/04/13 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
领导接待方案
2014/03/13 职场文书
监督检查工作方案
2014/05/28 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Java对文件的读写操作方法
2022/04/29 Java/Android