前端開發(fā)日報：應(yīng)用canvas獲取video的縮略圖

、應(yīng)用canvas獲取video的縮略圖

發(fā)布視頻時候，經(jīng)常需要上傳同時上傳視頻的縮略圖，近日，應(yīng)產(chǎn)品經(jīng)理的的要求，需要做一個發(fā)布視頻動態(tài)的功能，我第一反應(yīng)就想到了H5的標(biāo)簽vidio和canvas，在這里記錄下我完成該功能的過程：首先，整體思路是創(chuàng)建一個vidio，然后創(chuàng)建一個canvas和一個畫筆，調(diào)用畫筆的drawImage方法，將vidio作為參數(shù)，就會畫出該視頻的縮略圖。

https://segmentfault.com/a/1190000010910097

2、MVVM開發(fā)總結(jié)——vue組件（你所需要知道的）

隨著模塊化開發(fā)的理念越來越被開發(fā)者所重視，如何快速高效的開發(fā)項(xiàng)目成為了開發(fā)中所要注意的重點(diǎn)。在vue.js中組件系統(tǒng)作為一個重要的概念，它提供的組件可以獨(dú)立、重復(fù)的使用來構(gòu)建大型的應(yīng)用。組件可以擴(kuò)展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素。

https://juejin.im/post/59a4bc7c518825244c0cfc10

3、明白 JS 模塊化

模塊化就是將一個大的功能拆分為多個塊，每一個塊都是獨(dú)立的，你不需要去擔(dān)心污染全局變量，命名沖突什么的。那么模塊化的好處也就顯然易見了解決命名沖突依賴管理代碼更加可讀提高復(fù)用性

https://juejin.im/post/59a575b06fb9a0247c6eee02

4、Node.JS循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件

在Node.js中，要實(shí)現(xiàn)目錄文件夾的循環(huán)遞歸復(fù)制也非常簡單，使用fs模塊即可，僅需幾行，而且性能也不錯，我們先來實(shí)現(xiàn)文件的復(fù)制

http://ourjs.com/detail/59a53a1ff1239006149617c6

5、30 多年的軟件經(jīng)驗(yàn)，總結(jié)出 10 個編寫出更好代碼的技巧

好代碼可以定義為易讀、易懂、易調(diào)試、易改，最重要的還要少缺陷。顯然，要想敲出一手好代碼，是要花不少時間，但這在長久來看是有意義的，因?yàn)槟憧梢曰ǜ贂r間及精力去維護(hù)和復(fù)用你的代碼。　　事實(shí)上，我們可以將好代碼等同于可復(fù)用的代碼，這也是下面提到的重要原則之一。代碼可能只是完成了編程工作中短期目標(biāo)的特定功能，但如果沒人（包括你自己）愿意復(fù)用你的代碼，這代碼在某種程度上可以說是不足且有缺陷的。要么太復(fù)雜、要么太具體、要么在不同情況下極有可能崩掉，或者其他程序員可能不相信你的代碼。

http://geek.csdn.net/news/detail/234132

6、Nodejs 進(jìn)階：使用 DiffieHellman 密鑰交換算法

Diffie-Hellman（簡稱DH）是密鑰交換算法之一，它的作用是保證通信雙方在非安全的信道中安全地交換密鑰。目前DH最重要的應(yīng)用場景之一，就是在HTTPS的握手階段，客戶端、服務(wù)端利用DH算法交換對稱密鑰。下面會先簡單介紹DH的數(shù)理基礎(chǔ)，然后舉例說明如何在nodejs中使用DH相關(guān)的API。

https://segmentfault.com/a/1190000010917737

喜歡這篇文章的朋友，歡迎關(guān)注、收藏、分享、評論，幫我上熱門，你的支持，是我每日更新的動力！
喜歡前端的朋友可以點(diǎn)擊關(guān)注一下我，每日分享精彩的前端文章！

今日更多精彩文章：http://caibaojian.com/fe-daily-20170830.html

者：Panda Shen

轉(zhuǎn)發(fā)鏈接：https://www.overtaking.top/2018/06/21/20180621113025/

何通過js調(diào)用本地?cái)z像頭呢？獲取后如何對視頻進(jìn)行截圖呢？在這里跟大家做一個簡易的Demo來實(shí)現(xiàn)以上幾個功能。

涉及到的知識點(diǎn)

navigator.getUserMedia 可以通過該函數(shù)來打開攝像頭獲得流數(shù)據(jù)
canvas.drawImage 可以通過該函數(shù)來將視頻的某幀畫到canvas畫布上
canvas.toDataURL 可以通過該函數(shù)將canvas畫布生成圖片url

實(shí)現(xiàn)的功能點(diǎn)

打開攝像頭
暫停攝像頭
對視頻進(jìn)行截圖

html簡單布局

以下先通過HTML我們來實(shí)現(xiàn)一個簡單的布局，包括樣式和按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5 canvas 調(diào)用攝像頭進(jìn)行繪制</title>
    <style>
        html,body{
            width:100%;
            height:100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }
        #canvas{
            width:500px;
            height:300px;
        }
        #video{
            width:500px;
            height:300px;
        }
        .btn{
            display:inline-block;
            text-align: center;
            background-color: #333;
            color:#eee;
            font-size:14px;
            padding:5px 15px;
            border-radius: 5px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <video id="video" autoplay="true" style="background-color:#ccc;display:none;"></video>
    <div style="width:500px;height:300px;margin:30px auto;">
        <canvas id="canvas" width="500px" height="300px">您的瀏覽器不支持H5 ,請更換或升級!</canvas>
        <span class="btn" filter="screenshot">截圖</span>
        <span class="btn" filter="close">暫停</span>
        <span class="btn" filter="open">打開</span>
    </div>
    <div style="width:500px;height:300px;margin:40px auto;" id="show"></div>
</body>
</html>

樣子差不多是這樣的:

hahiahia 空白一片

我們將video進(jìn)行了隱藏，然后加上了幾個按鈕，還有canvas以及最底部的圖片展示區(qū)域（用來存放截圖圖片）。

js實(shí)現(xiàn)功能

這里先貼下核心代碼：

navigator.getUserMedia({
    video : {width:500,height:300}
},function(stream){
    LV.video.srcObject=stream;
    LV.video.onloadedmetadata=function(e) {
        LV.video.play();
    };
},function(err){
    alert(err);//彈窗報錯
})

相關(guān)的知識點(diǎn)可以參考:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

然后根據(jù)頁面邏輯實(shí)現(xiàn)事件以及其他功能，包括：截圖、暫停。

navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    var events={
        open : function(){
            LV.open();
        },
        close : function(){
            console.log(LV.timer);
            clearInterval(LV.timer);
        },
        screenshot : function(){
            //獲得當(dāng)前幀的圖像并拿到數(shù)據(jù)
            var image=canvas.toDataURL('jpeg');
            document.getElementById('show').innerHTML='<img src="'+image+'" style="width:500px;height:300px;" />'
        }
    };
    var LV={
        video : document.getElementById('video'),
        canvas : document.getElementById('canvas'),
        timer : null,
        media : null,
        open :function(){
            if(!LV.timer){
                navigator.getUserMedia({
                    video : {width:500,height:300}
                },function(stream){
                    LV.video.srcObject=stream;
                    LV.video.onloadedmetadata=function(e) {
                        LV.video.play();
                    };
                },function(err){
                    alert(err);//彈窗報錯
                })
            }
            if(LV.timer){
                clearInterval(LV.timer);
            }
            //將畫面繪制到canvas中
            LV.timer=setInterval(function(){
                LV.ctx.drawImage(LV.video,0,0,500,300);
            },15);
        },
        init : function(){
            LV.ctx=LV.canvas.getContext('2d');
            //綁定事件
            document.querySelectorAll('[filter]').forEach(function(item){
                item.onclick=function(ev){
                    var type=this.getAttribute('filter');
                    events[type].call(this,ev);
                }
            });
            return LV;
        }
    };
    LV.init();

原諒我放蕩不羈的命名 ...

具體已經(jīng)實(shí)現(xiàn)的demo可以點(diǎn)擊 https://chrunlee.cn/demos/canvas-video/index.html

在線咨詢

上一篇：直播預(yù)告攻城師的嘉年華：第四屆HTML5 iWeb峰
下一篇：Power BI Desktop中SVG圖標(biāo)集的引用

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。