HTML5 canvas实时绘画摄像头数据
2016-12-02 19:08
393 查看
第一篇博客: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>
相关文章推荐
- HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- HTML5-canvas实例:2D折线数据图与2D扇形图
- 华丽的HTML5图表 可展示实时数据
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
- HTML5实时显示摄像头视频
- Xcode中捕获iphone/ipad/ipod手机摄像头的实时视频数据
- UVC 摄像头驱动(三)配置摄像头,实时数据采集
- HTML5 Canvas+JS控制电脑或手机上的摄像头实例.
- HTML5调用手机前置摄像头或后置摄像头拍照,canvas显示,经过Android测试
- html5打开摄像头并用canvas模拟拍照
- [置顶] Android摄像头获取实时数据+Demo
- Linux 获取摄像头数据并实时显示
- html5打开摄像头并用canvas模拟拍照
- html5笔记3 — canvas绘画矩形、圆
- HTML5 Canvas绘制实时时钟
- HTML5中canvas画图之绘制数据图表
- html5 canvas 实现进度条展示统计数据
- Canvas面向对象写柱状图并实时监听数据动态效果
- Qt:实时显示大华摄像头数据到QLabel上
- html5的canvas实现实时时钟