热度 22
2014-12-11 18:16
1145 次阅读|
0 个评论
介绍 在现代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; ndata.width*data.height; n++) { s += String.fromCharCode(65+data.data /16); s += String.fromCharCode(65+data.data /16); s += String.fromCharCode(65+data.data /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