首页 > 代码库 > 用LED矩阵屏 显示网络摄像头图像
用LED矩阵屏 显示网络摄像头图像
介绍
在现代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 = http://www.mamicode.com/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 = http://www.mamicode.com/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
var page = “<html>\n<body>\n<video autoplay></video> \n<canvas id=’canvas’ width=’16′ height=’16′></canvas> \n<script language=’javascript’> \nif(navigator.webkitGetUserMedia!=null) { \n var options = { video:true,audio:false }; \n navigator.webkitGetUserMedia(options, \n function(stream) { \n var video = document.querySelector(‘video’); \n video.src = http://www.mamicode.com/window.webkitURL.createObjectURL(stream); /n }, function(e) { console.log(/”error/”); } /n ); /n} /n/nsetInterval(function() {/n var video = document.querySelector(‘video’);>
// This is called whenever a webpage is requested
function onPageRequest(req,res) {
res.writeHead(200, {‘Content-Type’: ‘text/html’});
// work out what page was requested
var rurl = url.parse(req.url,true);
if (rurl.pathname==”/”) {
// If the page was the main webpage, send it out
res.write(page);
}else if (rurl.pathname==”/set”) {
// if the page was our ‘/set’ webpage…
// Create a 16×16 image structure
var img = {
width : 16, height : 16, bpp : 24,
buffer : new Uint8Array(16*16*3)
};
// Fill it with the data we got sent
var s = rurl.query.rgb;
for (var i=0;i<768;i++)
img.buffer[i] = s.charCodeAt(i)-65;
// Draw it onto the LED display’s buffer
leds.drawImage(img, 0, 0);
// Finally send the data to the display
leds.flip();
}
// Finish sending our webpage response
res.end();
}
// Set up LEDs
SPI2.setup({baud:3200000, mosi:B15});
var leds = Graphics.createArrayBuffer(16,16,24,{zigzag:true});
leds.flip = function() { SPI2.send4bit(leds.buffer, 0b0001, 0b0011); };
leds.clear();
// Set up ethernet and our webserver var eth;
function onInit() {
var eth = require(“WIZnet”).connect();
console.log(eth.getIP()); require(“http”).createServer(onPageRequest).listen(80);
}
onInit();
只要将这些代码复制并粘贴到右手边的WEB IDE中，并点击 Send to Espruino。它应该就立刻能工作了！
当Espruino启动时，它的IP地址将打印出来，这样你就会知道你将连接哪来分享你的Webcam了。
这个页面是从 GitHub 中自动生成的。如有任何问题及建议，请让我知道。
查看：原文
用LED矩阵屏 显示网络摄像头图像