js 调用本地摄像头通过canvas进行截图

月光魔力鸭

2018-10-15 13:05 阅读 1631 喜欢 1 调用本地摄像头 canvas截图

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

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

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

转载请注明出处: https://chrunlee.cn/article/js-local-video-canvas-screenshot.html

感谢支持!

赞赏支持

喜欢

评论信息 (请文明评论)

暂无评论，快来快来写想法...

推荐

浏览器多个tab页面之间通过localStorage进行通信

在页面中不同的frame之间进行相互调用的话，我们可以通过frame获取对应的window然后进行调用，但是如果是浏览器不同的tab之间呢？

mysql处理emoj表情导致ER_TRUNCATED_WRONG_VALUE_FOR_FIELD错误

通过修改数据库编码处理存储emoj表情导致的报错问题。

The observed PIN - my solution

Question from codewar,about all of array combinations.

javascript来计算最大公约数和最小公倍数

最大公因数，也称最大公约数、最大公因子，指两个或多个整数共有约数中最大的一个。a，b的最大公约数记为（a，b），同样的，a，b，c的最大公约数记为（a，b，c），多个整数的最大公约数也有同样的记号。求最大公约数有多种方法，常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数，a，b的最小公倍数记为[a，b]。

jquery-treegrid 控件封装

项目中需要使用treegrid,找了下easyui 和 ext都有，但是项目用的框架是 byyui，如果为了treegrid 就把这些都加载的话，感觉不太合算。找了大家常用的基于jquery的treegrid.

javascript中一些polyfill处理

问题是由一个BUG引起的，功能中有使用国际化组件，用的是jquery.i18n,在chrome上、ff上都没有什么问题，问题出在了IE上。万恶的IE..

微信公众号开发碰到的问题-scope参数错误或没有scope权限

开发的项目中有使用到微信开发，由于之前偶尔才用一次，也是用的别人的地址和测试号，这里记录下自己的操作。防止后续遗忘。

如何解决表单中的代码提交问题

web网站上总会有在文本域中提交代码的操作,那么如何处理呢？