用LED矩陣屏 顯示網絡攝像頭圖像

介紹

在現代Web瀏覽器中,JavaScript公開了一些非常強大的特性。其中之一就是webkitGetUserMedia 功能,它可以讓你訪問一個電腦的webcam(在允許的情況下)

在這個例子中,我們將用Espruino板子來將服務器連接一個可以訪問Webcam的頁面,並發送一個低像素的圖片給Espruino板,然後就可以顯示在一個LED矩陣屏上。

你將需要

  • 一個 RGB123 矩陣 — 我用的是16*16的
  • 一個 WIZnet W5500模塊
  • 一個帶有Webcam的筆記本/平板電腦

連線

軟件

第一步是做一個頁面,可以獲取從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

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 = window.webkitURL.createObjectURL(stream); \n }, function(e) { console.log(\”error\”); } \n ); \n} \n\nsetInterval(function() {\n var video = document.querySelector(‘video’); \n var canvas = document.getElementById(‘canvas’); \n var ctx = canvas.getContext(‘2d’); \n ctx.drawImage(video,0,0,16,16); \n var data = ctx.getImageData(0,0,16,16); \n var s = \”\”;\n for(n=0; n<data.width*data.height; n++) { \n s += String.fromCharCode(65+data.data[n*4+2]/16);\n s += String.fromCharCode(65+data.data[n*4]/16); \n s += String.fromCharCode(65+data.data[n*4+1]/16); \n } \n var xmlHttp = new XMLHttpRequest();\n xmlHttp.open( \”GET\”, \”/set?rgb=\”+s, false );\n xmlHttp.send( null );\n}, 5000);\n</script>\n</body>\n</html>\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。它應該就立刻能工作了!

webcam顯示

當Espruino啟動時,它的IP地址將打印出來,這樣你就會知道你將連接哪來分享你的Webcam了。

這個頁面是從 GitHub 中自動生成的。如有任何問題及建議,請讓我知道

 

查看:原文