Skip to content

Instantly share code, notes, and snippets.

@mhanuel26 mhanuel26/webcam.htm Secret
Created Mar 5, 2019

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title> Spresense Wecb Camera - Websocket Demo </title>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
</head>
<script type = "text/javascript">
var ws = null;
var r = 0;
var capturecount = 1;
var ln = 0;
var flag = 0;
var xres = 0;
var yres = 0;
var canvas;
var ctx;
var imgData;
var gcanvasid = "canvas-Q-VGA";
var camera_ip = "192.168.1.145";
function initWebSocket() {
if ("WebSocket" in window) {
if (ws != null) {
ws.close();
}
ws = new WebSocket('ws://' + camera_ip + ':9001/', ['arduino']);
if (ws == null) {
document.getElementById("connecting").innerText = "Failed to connect to camera [ " + camera_ip + " ]";
return;
}
ws.binaryType = 'arraybuffer';
// open websocket
ws.onopen = function() {
document.getElementById("canvasSpresenseCam").style.visibility = "visible";
document.getElementById("connecting").style.visibility = "hidden";
document.getElementById("constatus").innerText = "Connected to " + ws.url;
if (gcanvasid != null && gcanvasid != "") {
capture(gcanvasid);
}
};//ws.onopen
// receive message
ws.onmessage = function (evt) {
var arraybuffer = evt.data;
// console.log('onmessage receive len: ' + arraybuffer.byteLength);
if (arraybuffer.byteLength == 1) {
flag = new Uint8Array(evt.data); // Start Flag
if (flag == 0xAA) {
// console.log("Start Block");
ln = 0;
}
if (flag == 0xFF) {
// console.log("Last Block");
}
if (flag == 0x11) {
// console.log("Camera IP");
}
} else {
if (flag == 0x11) {
camera_ip = evt.data;
document.getElementById("eth-ip").innerText = camera_ip;
flag = 0;
} else {
var bytearray = new Uint8Array(evt.data);
display(bytearray, arraybuffer.byteLength, flag);
}
}
}; //ws.onmessage
// close websocket
ws.onclose = function() {
document.getElementById("canvasSpresenseCam").style.visibility = "hidden";
document.getElementById("connecting").style.visibility = "visible";
}; //ws.onclose
// websocket error handling
ws.onerror = function(evt) {
document.getElementById("canvasSpresenseCam").style.visibility = "hidden";
document.getElementById("connecting").style.visibility = "visible";
document.getElementById("connecting").innerText = "Error " + evt.data;
document.getElementById("constatus").innerText = "";
};
} else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
} // WebSocketCamera
function initCanvas() {
canvas = document.getElementById("canvas-Q-VGA");
ctx = canvas.getContext("2d");
ctx.font = "10px Comic Sans MS";
ctx.fillStyle = "#FF0000";
ctx.textAlign = "center";
ctx.fillText("320 x 240", canvas.width/2, canvas.height/2);
}
function display(pixels, pixelcount, flag) {
var i = 0;
for(y=0; y < yres; y++) {
for(x=0; x < xres; x++)
{
i = (y * xres + x) << 1;
pixel16 = (0xffff & pixels[i]) | ((0xffff & pixels[i+1]) << 8);
imgData.data[ln+0] = ((((pixel16 >> 11) & 0x1F) * 527) + 23) >> 6;
imgData.data[ln+1] = ((((pixel16 >> 5) & 0x3F) * 259) + 33) >> 6;
imgData.data[ln+2] = (((pixel16 & 0x1F) * 527) + 23) >> 6;
imgData.data[ln+3] = (0xFFFFFFFF) & 255;
ln += 4;
}
}
if (flag == 0xFF) { // last block
ln = 0;
ctx.putImageData(imgData,0,0);
ws.send("next-frame");
}
}
function reset()
{
r = 0;
capturecount = 1;
ln = 0;
flag = 0;
xres = 0;
yres = 0;
//gcanvasid = "";
initCanvas();
}
function setip(whichip) {
if (gcanvasid != null && gcanvasid != "") {
camera_ip = document.getElementById(whichip).innerText;
init();
initCanvas();
capture(gcanvasid);
}
}
function capture(canvasid)
{
if (ws.readyState != 1) {
// alert("ws.readyState " + ws.readyState);
return;
}
reset();
gcanvasid = canvasid;
canvas = document.getElementById(canvasid);
ctx = canvas.getContext('2d');
if (canvasid.indexOf("canvas-Q-VGA", 0) != -1) {
xres = 320;
yres = 120;
} else {
return;
}
imgData = ctx.createImageData(canvas.width, canvas.height);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=0xCC;
imgData.data[i+1]=0xCC;
imgData.data[i+2]=0xCC;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData, canvas.width, canvas.height);
ws.send(canvasid);
}
</script>
<!-- <body onload="onloadinit()"> -->
<body>
<div valign=center align=center style="
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #FFFFFF;" id="connecting">Connecting Camera ...
</div>
<center> <h1> Spresense Websocket Video Camera </h1> </center>
<table align=center valign=center id="canvasSpresenseCam">
<tr>
<td valign="bottom">
<canvas id="canvas-Q-VGA" width="320" height="240" style="cursor:crosshair;border:1px solid #0000FF;" onclick="capture('canvas-Q-VGA')">
Your browser does not support the HTML5 canvas tag.
</canvas>
</td>
</tr>
<tr>
<td align=center>
Q-VGA <BR>
</td>
</tr>
</table>
<br><br>
<table width=30% align=center bgcolor="#FFFF00" >
<tr align=center style="color: #fff; background: black;">
<td id="constatus" colspan=2>Websocket not connected</td>
</tr>
<tr align=center style="color: #fff; background: black;">
<td>Ethernet IP</td>
</tr>
<tr align=center bgcolor="#FFF">
<td id="eth-ip" style="cursor:pointer" onclick="setip('eth-ip')"></td>
</tr>
</table>
<br><br>
<form align=center id='submit-form' action="/submitform/whitebalance" method="post">
<select id="whitebalance" name="whitebalance">
<option value="CAM_WHITE_BALANCE_INCANDESCENT">INCANDESCENT</option>
<option value="CAM_WHITE_BALANCE_FLUORESCENT">FLUORESCENT</option>
<option value="CAM_WHITE_BALANCE_DAYLIGHT">DAYLIGHT</option>
<option value="CAM_WHITE_BALANCE_FLASH">FLASH</option>
<option value="CAM_WHITE_BALANCE_CLOUDY">CLOUDY</option>
<option value="CAM_WHITE_BALANCE_SHADE">SHADE</option>
</select>
<br><br>
<button type='submit'>Apply</button>
</form>
<script>
function getResponseVariable(response, variable)
{
var vars = response.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
$("#submit-form").submit(function(event){
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){ //
// console.log('Got response: ' + response);
});
});
$(window).on('load', function() {
initWebSocket();
})
$(document).ready(function(){
camera_ip = location.hostname;
document.getElementById("canvasSpresenseCam").style.visibility = "hidden";
document.getElementById("connecting").style.visibility = "visible";
initCanvas();
$.ajax({
url : "/variable/camera_value_get",
type: "get",
}).done(function(response){
console.log('camera_value_get response: ' + response);
var whitebalance = getResponseVariable(response, 'whitebalance');
if(whitebalance != false){
console.log("whitebalance variable value: " + whitebalance);
$("#whitebalance").val(whitebalance);
}
});
}); // End of document function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.