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 相关文章推荐
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 NodeJs
Nodejs极简入门教程(二):定时器
Oct 25 NodeJs
初始Nodejs
Nov 08 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
Dec 18 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
Apr 14 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
NodeJS实现一个聊天室功能
Nov 25 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 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自定义函数格式化json数据示例
2016/09/14 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Python open读写文件实现脚本
2008/09/06 Python
python抓取网页内容示例分享
2014/02/24 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python 类详解及简单实例
2017/03/24 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python实现的购物车功能示例
2018/02/11 Python
python安装scipy的步骤解析
2019/09/28 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
综合测评自我鉴定
2013/10/08 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
环保倡议书怎么写
2014/05/16 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
电力培训学习心得体会
2016/01/11 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫