HTML5 canvas实时绘画摄像头数据

来源：互联网发布：黑马程序员ios资源编辑：程序博客网时间：2024/05/15 06:52

第一篇博客：HTML5 canvas实时绘画摄像头数据

拷贝代码会发现有两个视图块，左边是video呈现的，右边是canvas用定时器截取到video流一帧帧画出来的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">        <title>html5 调用本地摄像头</title></head><body>    <video id="video" autoplay="autoplay" style="background: #ccc;"></video>    <canvas id="canvas">1212</canvas>    <script type="text/javascript">        var video = document.getElementById("video");        var context = canvas.getContext("2d");        var errocb = function (code) {            alert(code);        };        if (navigator.getUserMedia) { // 标准的API        navigator.getUserMedia({ "video": true }, function (stream) {            video.src = stream;            video.play();        }, errocb);        } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API        console.log(navigator.webkitGetUserMedia);        navigator.webkitGetUserMedia({ "video": true }, function (stream) {            video.src = window.webkitURL.createObjectURL(stream);            video.play();        }, errocb);    }    window.setInterval(function(){        context.drawImage(video, 0, 0, 375, 180);    },15);    </script>    <style type="text/css">        html,body{            position: relative;            width: 100%;            height: 100%;            padding: 0px;            margin: 0px;        }        video{            width: 30%;            height: 30%;        }        canvas{            width: 30%;            height: 30%;                position: absolute;            left: 200px;            top: 0px;            z-index: 100;        }    </style></body></html>

0 0