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实现的,效率还不错~

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

(0)

相关推荐

  • js获取 gif 的帧数的代码实例

    使用 javascript 获取 GIF 图的帧数,如果帧数过大,则不让传到服务器 这里是使用一个插件: github地址为: https://github.com/buzzfeed/libgif-js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" con

  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析

    本文实例讲述了JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能.分享给大家供大家参考,具体如下: 根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系. 测试例子: var test={ a:"ss", b:"dd", c:[ {dd:"css",ee:"cdd"}, {mm:"ff",nn:

  • 复杂的javascript窗口分帧解析

    什么是窗口分帧? 窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件,每个帧(即页面)都有自己的url. 帧窗口该如何创建? 帧通常是由<frameset>和<frame>标记创建的.但在HTML 4中,<iframe>标记也可以用来在文档中创建"内联帧".就JavaScript来说,<iframe>创建的帧与<frameset>和<frame>创建的帧一样. 在HTML中用<

  • 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com","text":"test","orgId":123,"dataType":"curry","activeClass":"haha"}]'; JSON.parse(str); 结果

  • 使用JS和canvas实现gif动图的停止和播放代码

    HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现图片马赛克,模糊,色值过滤等很多图片特效.我们这里不用那么复杂,只要读取我们的图片,重绘下就可以. HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn

  • javascript帧动画(实例讲解)

    前面的话 帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容.本文将详细介绍javascript帧动画 概述 [分类] 常见的帧动画的方式有三种,包括gif.CSS3 animation和javascript git和CSS3 animation不能灵活地控制动画的暂停和播放.不能对帧动画做更加灵活地扩展.另外,gif图不能捕捉动画完成的事件.所以,

  • 详解关于JSON.parse()和JSON.stringify()的性能小测试

    JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象.至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的.本文要探究的是,这行代码的执行效率如何?如果随意使用会不会造成一些问题? 先上两个js性能测试的依赖函数 /** * 一个简单的断言函数 * @param value {Boolean} 断言条件 *

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

    客户有个上传视频的需求,上传的视频呢,需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图,成品如下图所示: 当然了,上传视频的界面就不贴出来了,毕竟我们这篇文章的重点不在于如何上传,而在于如何用nodejs截取视频中的帧!~ 这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg,需要安装在服务器上由nodejs调用, 代码贴出如下: function fecthVideoThumbnail(entryid, index){ var filename = p

  • php图片上传存储源码并且可以预览

    复制代码 代码如下: <?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('image/jpg', //上传文件类型列表 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'application/x-shockwave-flash', 'image/x-png', 'application/msword

  • JavaScript中使用webuploader实现上传视频功能(demo)

    之前有人让我做一个webuploader上传视频,但是一直没有时间,现在抽出了时间来.来完成以下这个简单的demo 第一步,上传视频和上传 图片有什么区别么? 其实是没有的,因为执行的操作都是上传,所以说我们并不用担心上传的问题. 但是webuploader实际上是限制了你上传的参数(这里指的是限制了你的文件扩展名) 我们找到webuploader中的js参数accept中的extensions accept: { title: 'Images', extensions: 'gif,jpg,jp

  • java使用ffmpeg实现上传视频的转码提取视频的截图等功能(代码操作)

    ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可以进行屏幕录制,同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器,支持直播应用.ffmpeg能解析的格式和不能解析的格式都一一给大家说明了,具体内容详情跟随一起看看吧, 1.能支持的格式 ffmpeg能解析的格式:(asx,asf,mpg,wmv,3gp,mp4,mov,avi,flv等) 2.不能支持的格式 对ffmpeg无法解析的文件格式(wmv9,rm,rmvb等),可以先用别的工具(menco

  • 使用canvas实现仿新浪微博头像截取上传功能

    最近看到微博头像上传功能很感兴趣,于是就使用canvas写了一个,本文写的不好还请见谅.本程序目前在谷歌浏览器和火狐浏览器测试可用,ie浏览器无法支持. 因为ie的安全机制不允许img使用本地路径,所以若想ie支持本程序,必须先将图片上传,然后给img对象上传后的图片地址. 我在这里没写,是因为暂时没写上传功能的后端代码,并且还不确定有没有更好的解决办法. 如下是新浪的 如下是我做的截取部分 代码: var canvas = document.getElementById('canvas'),

  • 微信上传视频文件提示(推荐)

    晚上要下班了老板发来一个任务:把一个300M左右的视频压缩到100M以内,以便在微信上发送.这倒不是难事,狸窝咱又不是没用过,开搞!!! 就是这么邪气,恰好100.18M 视频质量:低等质量,音频质量:低等质量,自定义视频尺寸:1280*720.咔咔一波操作,100.18M,这神马鬼这么巧,导出一下试试,四舍五入正好100M.上传微信试试. 文件大于100M不能上传 试试还真不行,要说也是,程序的规则是很严格的,要求不能大于100M,多一个bit就不行.本来想着立马交差,那就再调调! 可别看这0

  • 解决YYC松鼠短视频系统上传视频会被压缩的问题

    具体代码如下所示: uni.chooseVideo({ count: 1, compressed: false, sourceType: ['album', 'camera'], success: (res) => { 这是songshu-video-uniapp\pages\index\publish.vue 文件196行 原先 compress:ture 我们把ture 改成false 同样songshu-video-uniapp\pages\index\publish.1.0.vue 11

  • vue实现移动端input上传视频、音频

    vue移动端input上传视频.音频,供大家参考,具体内容如下 html部分 <div class="title">现场视频</div> <div class="upLoad"> <label for="pop_video" id="labelr"> <video id="videoId" controls width="100%"&

  • 小程序实现上传视频功能

    本文实例为大家分享了小程序实现上传视频功能的具体代码,供大家参考,具体内容如下 .js文件 // miniprogram/pages/message/messageForm/messageForm.js Page({ /** * 页面的初始数据 */ data: { webServer: 'https://xxxx.xxx.com', src: '', webviewshow: 'hide', webviewurl: '', gid: "", uid: '', duration: ''

  • 微信小程序实现上传视频功能

    本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下 微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法. 1.调用官方提供的方法(wx.chooseMedia) choosevideo(){     let that=this     console.log("上传视频的方法")     wx.chooseMedia({       count: 1,  //上传视频的个数       mediaType:['video'],  //限制上传的类型为vide

随机推荐