Processing Forum

Screen name:
FuzzyWobble
Website:
http://fuzzywobble.com

FuzzyWobble's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

The Super Hacked Processing Live Video Web Feed

[1 Reply]
- 20-Feb-2012 08:04 PM
- Forum: Share your Work
>> You Tube Video <<
(how do we embed videos in the Processing forum?)
Just wanted to share what I worked on tonight. Please post any improvements. I am surely not a pro coder or anything. Note that you can use this to share any sketch from Processing over the web (not just webcam video feeds). This method is surely a bit of a bandwidth hog, but it works! If anyone has any recommendations for how to reduce the bandwidth demand that would be helpful.

Below is the code...

Processing
//http://processing.org/reference/libraries/video/index.html

import processing.video.*;

Capture myCapture;

//http://libraries.seltar.org/postToWeb/

import processing.pdf.*;

import org.seltar.Bytes2Web.*;

PDFToWeb pdf;

void setup(){

size(600, 480);

pdf = new PDFToWeb(this);

myCapture = new Capture(this, width, height, 30);

}

void captureEvent(Capture myCapture){

myCapture.read();

}

long counter = 0;

String url = "http://example.com/example/Upload.php"; //Upload.php is inlcuded in the postToWeb library download

void draw() {

image(myCapture, 0, 0);

//pdf.addPage(); // if you want each frame to be on it's own page

if(millis()-counter>100){

ImageToWeb img = new ImageToWeb(this);

img.post("test",url,"jpg-test",true,img.getBytes(g));

counter = millis();

}

}
HTML

*jquery.js is needed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Live Feed</title>

<style type="text/css">

body{

background-color:#eee;

font-family:'Bookman Old Style', serif;

font-size:22px;

color:#000000;

}

</style>

<script type="text/javascript" src="jquery.js"></script>

<SCRIPT LANGUAGE="JavaScript">

function grabFrameA(){

$('#frameA').html("<img id='imga' src='sup.php'>");

$('#imga').load(function(){

$('#frameA').css('z-index', 100);

$('#frameB').css('z-index', 10 );

setTimeout('grabFrameB()',50);

});

}

function grabFrameB(){

$('#frameB').html("<img id='imgb' src='sup.php'>");

$('#imgb').load(function(){

$('#frameA').css('z-index', 10);

$('#frameB').css('z-index', 100);

setTimeout('grabFrameA()',50);

});

}

</SCRIPT>

</head>

<body>

The Super Hacked Processing Live Video Web Feed

<br />

<div id="frameA" style="width:600px;height:480px;background-image:none;position:absolute;left:10px;top:40px;"></div>

<div id="frameB" style="width:600px;height:480px;background-image:none;position:absolute;left:10px;top:40px;"></div>

<SCRIPT LANGUAGE="JavaScript">

grabFrameA();

</SCRIPT>

</body>

</html>
sup.php
<?php

// read contents

$img = file_get_contents('sup.jpg');

#$img = $f.read();

#$f.close();

// no-cache headers - complete set

// these copied from [php.net/header][1], tested myself - works

header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past

header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

header("Cache-Control: no-store, no-cache, must-revalidate");

header("Cache-Control: post-check=0, pre-check=0", false);

header("Pragma: no-cache");

// image related headers

header('Accept-Ranges: bytes');

header('Content-Length: '.strlen( $img )); // How many bytes we're going to send

header('Content-Type: image/jpeg'); // or image/png etc

// actual image

echo $img;

exit();

?>
Extra

Okay Upload.php needs a tweak. What it does, by default, is creates a new unique-named file every time it uploads a new image to the web. This is NOT what we want. We want it to write and replace the same temporary image file (suptemp.jpg), then rename the temporary image file to our permanent image file (sup.jpg). Here are the edits required for Upload.php:
$destinationPath = $destinationDir . 'suptemp.jpg'; //(around line 135)
rename( '/var/www/fuzzywobble/xxx/xxx/xxx/suptemp.jpg', '/var/www/fuzzywobble/xxx/xxx/xxx/sup.jpg' ); //(around line 212, inside else statement)
// '$imageURL;' //(comment this out at the very bottom)

«Prev
Next »