前端开发日报：应用canvas获取video的缩略图

、应用canvas获取video的缩略图

发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了H5的标签vidio和canvas，在这里记录下我完成该功能的过程：首先，整体思路是创建一个vidio，然后创建一个canvas和一个画笔，调用画笔的drawImage方法，将vidio作为参数，就会画出该视频的缩略图。

https://segmentfault.com/a/1190000010910097

2、MVVM开发总结——vue组件（你所需要知道的）

随着模块化开发的理念越来越被开发者所重视，如何快速高效的开发项目成为了开发中所要注意的重点。在vue.js中组件系统作为一个重要的概念，它提供的组件可以独立、重复的使用来构建大型的应用。组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。

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

3、明白 JS 模块化

模块化就是将一个大的功能拆分为多个块，每一个块都是独立的，你不需要去担心污染全局变量，命名冲突什么的。那么模块化的好处也就显然易见了解决命名冲突依赖管理代码更加可读提高复用性

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

4、Node.JS循环递归复制文件夹目录及其子文件夹下的所有文件

在Node.js中，要实现目录文件夹的循环递归复制也非常简单，使用fs模块即可，仅需几行，而且性能也不错，我们先来实现文件的复制

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

5、30 多年的软件经验，总结出 10 个编写出更好代码的技巧

好代码可以定义为易读、易懂、易调试、易改，最重要的还要少缺陷。显然，要想敲出一手好代码，是要花不少时间，但这在长久来看是有意义的，因为你可以花更少时间及精力去维护和复用你的代码。　　事实上，我们可以将好代码等同于可复用的代码，这也是下面提到的重要原则之一。代码可能只是完成了编程工作中短期目标的特定功能，但如果没人（包括你自己）愿意复用你的代码，这代码在某种程度上可以说是不足且有缺陷的。要么太复杂、要么太具体、要么在不同情况下极有可能崩掉，或者其他程序员可能不相信你的代码。

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

6、Nodejs 进阶：使用 DiffieHellman 密钥交换算法

Diffie-Hellman（简称DH）是密钥交换算法之一，它的作用是保证通信双方在非安全的信道中安全地交换密钥。目前DH最重要的应用场景之一，就是在HTTPS的握手阶段，客户端、服务端利用DH算法交换对称密钥。下面会先简单介绍DH的数理基础，然后举例说明如何在nodejs中使用DH相关的API。

https://segmentfault.com/a/1190000010917737

喜欢这篇文章的朋友，欢迎关注、收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！
喜欢前端的朋友可以点击关注一下我，每日分享精彩的前端文章！

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

者：Panda Shen

转发链接：https://www.overtaking.top/2018/06/21/20180621113025/

何通过js调用本地摄像头呢？获取后如何对视频进行截图呢？在这里跟大家做一个简易的Demo来实现以上几个功能。

涉及到的知识点

navigator.getUserMedia 可以通过该函数来打开摄像头获得流数据
canvas.drawImage 可以通过该函数来将视频的某帧画到canvas画布上
canvas.toDataURL 可以通过该函数将canvas画布生成图片url

实现的功能点

打开摄像头
暂停摄像头
对视频进行截图

html简单布局

以下先通过HTML我们来实现一个简单的布局，包括样式和按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5 canvas 调用摄像头进行绘制</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进行了隐藏，然后加上了几个按钮，还有canvas以及最底部的图片展示区域（用来存放截图图片）。

js实现功能

这里先贴下核心代码：

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);//弹窗报错
})

相关的知识点可以参考:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

然后根据页面逻辑实现事件以及其他功能，包括：截图、暂停。

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(){
            //获得当前帧的图像并拿到数据
            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();

原谅我放荡不羁的命名 ...

具体已经实现的demo可以点击 https://chrunlee.cn/demos/canvas-video/index.html

在线咨询

上一篇：直播预告攻城师的嘉年华：第四届HTML5 iWeb峰
下一篇：Power BI Desktop中SVG图标集的引用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。