node.js 实现html5视频播放截图

最近在做一个视频会议项目相关的预研，要实现桌面端的视频播放和截图等。
所有的js , html5 , css,electron 的技术对我来说都是全新的技术点，所以在开始前请先了解这些基本的语法和框架。

考虑到前期的投入时间短，技术点多，所以实现选择的是一个做桌面应用的的框架Electron。不打算部署B/S架构。直接在前端中用html5的video来实现，很简单，后期再考虑用Ext.js等框架来做。

先简单实现：
html:

         <div id="video_area">             <!--video的样式可以自定义 -->            <link rel="stylesheet" type="text/css" href="../../css/video.css" />            <video id="video" autoplay="autoplay" style="width:100%;height:100%">                <!--本地测试一个视频，可以改为其他网络地址，但是直接的rtsp的源是不支持的，需要转换，这个后面在研究通过ffmpeg怎么转换之类的。-->                <source src="./test.mp4" type='video/mp4'/>                你不支持这个视频播放！            </video>        </div>      <div id="foot">            <link rel="stylesheet" type="text/css" href="../../css/function.css" />            <button id="home_btn" onclick="return Exit_function()" style="margin-top:5px;margin-left:15px;border-radius:20px;height:50px;width:12%;">主界面</button>            <button id="record_btn" onclick="return start()" style="height:50px;width:16%;;font-size:15px ">录像</button>            <button id="shoot_btn" onclick="return shoot()" style="height:50px;width:16%;;font-size:15px ">截屏</button>            <button id="dial_btn" onclick="show_hide()" style="height:50px;width:16%;;font-size:15px ">拨号盘</button>            <button id="address_book_btn" onclick="" style="height:50px;width:16%;;font-size:15px ">通讯录</button>            <button id="back_btn" onclick="return Exit_function()" style="margin-top:5px;margin-right:15px;float:right;border-radius: 20px;height:50px;width:12%;">返回</button>        </div>

截图按键绑定shoot函数，通过js中的shoot来实现图片保存到本地。

> /*视频截图 */ shoot = function() {>     var player = document.getElementById("video");>     var canvas = document.createElement("canvas");>     canvas.width = 500;>     canvas.height = 400;>     canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height);>     var img = document.createElement("img");>     img.src = canvas.toDataURL('image/png');> >     console.log(img.src);>     console.log("shoot cut one!");> >     //文件名>     var filename = 'image_' + (new Date()).getTime() + '.' + 'png';> >     //去掉前缀信息的图片内容>     var base64Data = img.src.replace(/^data:image\/\w+;base64,/, "");> >     var pictureBuff = new Buffer(base64Data, 'base64');> >     //判断目录是否存在，不存在则创建>     fs.exists(__dirname, function(exists) {>         var ret = exists ? ret = '文件夹存在' : '文件夹不存在';>         console.log(ret);>         if (exists) {> >         } else {>             fs.mkdir(__dirname + m_dir, function(err) {>                 if (err) {>                     console.log("创建目录失败！");>                 } else {>                     console.log("创建目录成功！");>                 }>             });>         }>     });> >     //将图片数据写入文件>     fs.writeFile(path.join(__dirname, filename), pictureBuff, function(err) {>         if (err) {>             console.log("保存失败");>             alert("保存失败");>         } else {>             console.log("保存成功！");>             alert("截图" + filename + "保存成功！");>         }>     }); }

后期可以修改把目录设置为配置文件中读取。
当前是HTML中读取本地的视频资源，通过按键截图，并把截图绘制到canvas上，并输出到文件。最终保存。