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

 更新时间:2017年12月10日 15:48:31   作者:yanglang1987500  
这篇文章主要为大家详细介绍了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读取本地json文件,输出json数据接口方式

    Nodejs读取本地json文件,输出json数据接口方式

    这篇文章主要介绍了Nodejs读取本地json文件,输出json数据接口方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • node.js连接mongoDB数据库 快速搭建自己的web服务

    node.js连接mongoDB数据库 快速搭建自己的web服务

    这篇文章主要为大家详细介绍了node.js连接mongoDB数据库,如何快速搭建自己的web服务,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Node.js视频流应用创建之后端的全过程

    Node.js视频流应用创建之后端的全过程

    这篇文章主要给大家介绍了关于创建Node.js视频流应用之后端的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • window系统管理多版本node的实现

    window系统管理多版本node的实现

    存在不同项目使用npm时所需要的版本不一致,又不想每次都卸载又重新安装node,这时候就需要多版本管理器,本文主要介绍了window系统管理多版本node的实现,感兴趣的可以了解一下
    2024-02-02
  • 使用GruntJS构建Web程序之Tasks(任务)篇

    使用GruntJS构建Web程序之Tasks(任务)篇

    任务(Tasks)是grunt的核心概念,你所做的很多工作比如资源合并(concat)、压缩(uglify)都是在配置任务。 每次grunt运行的时候,你指定的一个或多个任务也在运行,如果你没有指定任务,那么一个默认名为“default”的任务将自动运行。
    2014-06-06
  • nodejs中内置模块fs,path常见的用法说明

    nodejs中内置模块fs,path常见的用法说明

    这篇文章主要介绍了nodejs中内置模块fs,path常见的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • npm install -g @vue/cli常见问题解决汇总

    npm install -g @vue/cli常见问题解决汇总

    这篇文章主要给大家介绍了关于npm install -g @vue/cli常见问题解决的相关资料,文中通过实例代码将解决的方式介绍的非常详细,对遇到这个问题的朋友具有一定的参考学习价值,需要的朋友可以参考下
    2022-08-08
  • socket.io学习教程之深入学习篇(三)

    socket.io学习教程之深入学习篇(三)

    这篇文章更加深入的给大家介绍了socket.io的相关资料,之前已经介绍了socket.io的基本教程和应用,本文更为深入的来介绍下socket.io的使用,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Nodejs关于gzip/deflate压缩详解

    Nodejs关于gzip/deflate压缩详解

    本文主要向大家介绍了nodejs中关于gzip/deflate压缩的2种方法,分别是管道压缩和非管道压缩,十分详细,并附带示例,这里推荐给大家参考下。
    2015-03-03
  • Node.js开发 path路径模块详解

    Node.js开发 path路径模块详解

    path 模块是 Node.js 官方提供的、用来处理路径的模块,它提供了一系列的方法和属性,用来满足用户对路径的处理需求,这篇文章主要介绍了Node.js开发 path路径模块,需要的朋友可以参考下
    2024-02-02

最新评论