介绍
在现代Web浏览器中，JavaScript公开了一些非常强大的特性。其中之一就是webkitGetUserMedia 功能，它可以让你访问一个电脑的webcam（在允许的情况下）
在这个例子中，我们将用Espruino板子来将服务器连接一个可以访问Webcam的页面，并发送一个低像素的图片给Espruino板，然后就可以显示在一个LED矩阵屏上。
你将需要
- 一个 RGB123 矩阵 — 我用的是16*16的
- 一个 WIZnet W5500模块
- 一个带有Webcam的笔记本/平板电脑
连线
- 连接 RGB123 如 RGB123 页所示
- 连接 WIZnet W5500如 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
// we store a character between A (char code 65) and P (char code 80)
var s = “”;
for(n=0; n<data.width*data.height; n++) {
s += String.fromCharCode(65+data.data[n*4+2]/16);
s += String.fromCharCode(65+data.data[n*4]/16);
s += String.fromCharCode(65+data.data[n*4+1]/16);
}
// finally send the data down HTTP, using the ‘special’ webpage ‘/set’
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( “GET”, “/set?rgb=”+s, false );
xmlHttp.send( null );
}, 5000);
</script>
</body>
</html>
并保存在Espruino中。你可以保存成一个文件，放在一个SD卡中，但是将页面存成一个字符串意味着Espruino不需要一个卡来操作。我简单的删除了评论（为了节省空间）并在le Converter] 页打开文件。
这是用于Espruino本身的代码 — 看到内联注释：
// The webpage from above
继续阅读：http://www.iwiznet.cn/blog/?p=6673
- 上一篇： 基于W5500的实时远程温湿度监控系统
- 下一篇： 基于W5500+Yeelink的远程灯光控制设计
-
第三代功率半导体器件测试解决方案 直播时间： 03月06日 10:00
/1 
文章评论（0条评论）
登录后参与讨论