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使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
nodejs入门教程三:调用内部和外部方法示例
Apr 24 NodeJs
nodejs+websocket实时聊天系统改进版
May 18 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 NodeJs
nodejs中sleep功能实现暂停几秒的方法
Jul 12 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
Nodejs技巧之Exceljs表格操作用法示例
Nov 06 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
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
通过示例彻底搞懂js闭包
2017/08/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python和go语言的区别是什么
2020/07/20 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书