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上，并输出到文件。最终保存。