The Super Hacked Processing Live Video Web Feed
in
Share your Work
•
1 year ago
(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)