用用LED矩阵屏显示网络摄像头图像矩阵屏显示网络摄像头图像
在现代Web浏览器中，JavaScript公开了一些非常强大的特性。其中之一就是webkitGetUserMedia 功能，它可
以让你访问一个电脑的webcam（在允许的情况下）
在这个例子中，我们将用Espruino板子来将服务器连接一个可以访问Webcam的页面，并发送一个低像素的图片给Espruino
板，然后就可以显示在一个LED矩阵屏上。
你将需要
一个RGB123矩阵 — 我用的是16*16的 一个WIZnetW5500模块 一个带有Webcam的笔记本/平板电脑
连线
连接RGB123如RGB123页所示 连接WIZnetW5500如WIZnet 页所示
软件
第一步是做一个页面，可以获取从webcam来的图像。如下的代码是比较基础的，基本没有错误。
<html>
<body>
<!– The video element that will contain the WebCam image –>
<video autoplay></video>
<!– The canvas that we’ll use to make the WebCam image smaller – 16×16 because that’s the size of the RGB123 matrix –
>
<canvas id=’canvas’ width=’16′ height=’16′></canvas>
<!– The script to handle the processing –>
<script language=’javascript’>
// initialise the WebCam – see https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia
if(navigator.webkitGetUserMedia!=null) {
var options = { video:true,audio:false }; navigator.webkitGetUserMedia(options, function(stream) {
var video = document.querySelector(‘video’);
video.src = window.webkitURL.createObjectURL(stream);
}, function(e) { console.log(“error”); }
);
}
// Every 5 seconds…
setInterval(function() {
// find the video and canvas elements
var video = document.querySelector(‘video’);
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(’2d’);
// resample the WebCam image down to 16×16 pixels ctx.drawImage(video,0,0,16,16);
var data = ctx.getImageData(0,0,16,16);
// Now build a string from the image data. There are better ways,
// but all we do here is for each pixel’s red, green and blue values
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38546308
- 粉丝: 4
- 资源: 969
我的内容管理
展开
最新资源
- C++多态实现机制详解：虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统：无向图实现最短路径探索
- SQL2005彻底删除指南：避免重装失败
- GTD时间管理法：提升效率与组织生活的关键
- Python进制转换全攻略：从10进制到16进制
- 商丘物流业区位优势探究：发展战略与机遇
- C语言实训：简单计算器程序设计
- Oracle SQL命令大全：用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解：电路与程序设计
- 反激开关电源设计：UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程：创建员工层级结构
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
