首页 > 代码库 > 用LED矩阵屏 显示网络摄像头图像

用LED矩阵屏 显示网络摄像头图像

2024-08-07 11:42:14   238人阅读

介绍

在现代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。它应该就立刻能工作了！

webcam显示

当Espruino启动时，它的IP地址将打印出来，这样你就会知道你将连接哪来分享你的Webcam了。

这个页面是从 GitHub 中自动生成的。如有任何问题及建议，请让我知道。

 

查看：原文

用LED矩阵屏 显示网络摄像头图像


联系
我们