介绍

在现代Web浏览器中，JavaScript公开了一些非常强大的特性。其中之一就是webkitGetUserMedia 功能，它可以让你访问一个电脑的webcam（在允许的情况下）

在这个例子中，我们将用Espruino板子来将服务器连接一个可以访问Webcam的页面，并发送一个低像素的图片给Espruino板，然后就可以显示在一个LED矩阵屏上。

你将需要

• 一个RGB123矩阵 — 我用的是16*16的

• 一个WIZnetW5500模块

• 一个带有Webcam的笔记本/平板电脑

连线

• 连接RGB123如RGB123页所示

• 连接WIZnetW5500如WIZnet页所示

软件

第一步是做一个页面，可以获取从webcam来的图像。如下的代码是比较基础的，基本没有错误。

然后，你需要打包成一个字符串，并保存在Espruino中。你可以保存成一个文件，放在一个SD卡中，但是将页面存成一个字符串意味着Espruino不需要一个卡来操作。我简单的删除了评论（为了节省空间）并在le Converter] 页打开文件。

这是用于Espruino本身的代码 — 看到内联注释：

// The webpage from above

var page = “\n\n \n \n\n

\n\n”;

// 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中自动生成的。如有任何问题及建议，请让我知道。

查看：原文