最近在做一個視訊會議專案相關的預研，要實現桌面端的視訊播放和截圖等。
所有的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上，並輸出到檔案。最終儲存。