Use Webcam in Web Pages

Use Webcam in Web Pages 2012
Use Webcam in Web Pages
Contents
Introduction .................................................................................................................................................. 2
Preparation of using jpegcam ....................................................................................................................... 2
Create a PHP web project ......................................................................................................................... 2
Add JavaScript Library ............................................................................................................................... 3
Add library files ..................................................................................................................................... 3
Prepare folder for saving uploaded file ................................................................................................ 4
UI for Working with Webcam ....................................................................................................................... 5
Add JavascriptFiles Component .................................................................................................................... 5
Include JavaScript Library to Web Page ........................................................................................................ 6
Use of jpegcam JavaScript Library ................................................................................................................ 8
Setup webcam .......................................................................................................................................... 8
Webcam Configure ................................................................................................................................. 10
Take webcam snapshot and upload to web server ................................................................................ 12
Use uploaded file .................................................................................................................................... 15
Create a client event ........................................................................................................................... 16
Create upload completion handler method ....................................................................................... 16
Handling file upload ............................................................................................................................ 18
Hook Upload Handling ............................................................................................................................ 30
Show Live Webcam ................................................................................................................................. 32
Test.......................................................................................................................................................... 35
Save uploaded files to database ................................................................................................................. 38
Remember Uploaded File URL ................................................................................................................ 38
Execute Database Action ........................................................................................................................ 41
Test.......................................................................................................................................................... 43
Longflow Enterprises Ltd.
Page 1
Use Webcam in Web Pages 2012
Introduction
jpegcam (http://code.google.com/p/jpegcam/ ) is a JavaScript library for using webcam in web pages.
This document presents an example of using this library. It uses a web page to display and capture live
webcam image and uploads it to web server.
It demonstrates of using JavaScript libraries via a component named JavascriptFiles. The technologies
used in each JavaScript library may be outdated in time but the ways of using JavaScript libraries in your
web pages demonstrated in this sample will stay. You need to pay attention to see how a JavaScript
library is merged into the rest of your web application, as demonstrated in this document.
Preparation of using jpegcam
Create a PHP web project
We create a PHP web project first because we need to explain where the files go.
Rename the web page file name and web page name:
Longflow Enterprises Ltd.
Page 2
Use Webcam in Web Pages 2012
Compile the project so that a WebFiles folder will be generated under the project folder:
Add JavaScript Library
Add library files
The files needed by jpegcam library can be downloaded from
http://www.limnor.com/studio/jpegWebCam.zip
Unzip the files to WebFiles folder:
Longflow Enterprises Ltd.
Page 3
Use Webcam in Web Pages 2012
Prepare folder for saving uploaded file
The folder name for saving uploaded files is specified in a PHP file saveUploadFile.php. You may use the
Notepad to open it and modified it:
You need to create the folder under WebFiles folder:
Longflow Enterprises Ltd.
Page 4
Use Webcam in Web Pages 2012
UI for Working with Webcam
We use a button to configure webcam and a button to take snapshot and upload it to web server. We
use one HtmlContent to show live webcam image. We use another HtmlContent to show operation
messages. We use an HtmlImage to display the last image uploaded to the web server.
Add JavascriptFiles Component
JavascriptFiles component is used to interface with JavaScript libraries.
Longflow Enterprises Ltd.
Page 5
Use Webcam in Web Pages 2012
Drop a JavascriptFiles to the web page:
Include JavaScript Library to Web Page
JavaScript libraries usually are *.js files. Two properties of JavascriptFiles component can be used to
include *.js files in web pages:
Longflow Enterprises Ltd.
Page 6
Use Webcam in Web Pages 2012
•
•
ExternalJavascriptFiles – The files added to this property will be copied to libJs folder under
WebFiles folder during compiling. Therefore the *.js files must exist in your hard disk. Any
support files needed by the *.js files also need to be copied to folders relative to folder libJs.
ExternalJavascriptIncludes – The files added to this property will be included in the web page as
it is. No file copying is performed during compiling. It can be used to include files from other
web servers. For example, it can be used to include Google Maps library.
Here we use ExternalJavascriptIncludes to include jpegcam file, webcam.js. It is not because webcam.js
is in another web server. It is because we unzipped webcam.js and supporting files to WebFiles folder
and we do not want the compiler to copy webcam.js to libJs folder.
The js file is added to the property:
Longflow Enterprises Ltd.
Page 7
Use Webcam in Web Pages 2012
Use of jpegcam JavaScript Library
Sample web pages are the best way of learning the use of a JavaScript library. jpegcam contains some
samples. We take its test.html to do this sample.
Setup webcam
In test.html, it uses following code to setup webcam:
<!-- Configure a few settings -->
<script language="JavaScript">
webcam.set_api_url( 'test.php' );
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
</script>
We may create an action to execute the above code:
Longflow Enterprises Ltd.
Page 8
Use Webcam in Web Pages 2012
The code we use is as following:
webcam.set_api_url( 'saveUploadFile.php' );
// JPEG quality (1 - 100)
webcam.set_quality( 90 );
// play shutter click sound
webcam.set_shutter_sound( true );
Note that we changed test.php to saveUploadFile.php.
Be careful not put comments at the end of the code. It might damage the code following it.
Rename the action to SetupWebcam:
We may assign the action to onload event of the web page:
Longflow Enterprises Ltd.
Page 9
Use Webcam in Web Pages 2012
The action is assigned to onload:
Webcam Configure
Jpegcam uses code webcam.configure() to do webcam configuration. We may execute this code on
clicking configure button:
Longflow Enterprises Ltd.
Page 10
Use Webcam in Web Pages 2012
Rename the action to WebcamConfig:
Longflow Enterprises Ltd.
Page 11
Use Webcam in Web Pages 2012
The action is created and assigned to the button:
Take webcam snapshot and upload to web server
Jpegcam uses code webcam.snap() to take snapshot and upload it to web server. We may execute this
code on clicking “Take Snapshot” button.
Before taking snapshot, we may show waiting message on the web page:
Longflow Enterprises Ltd.
Page 12
Use Webcam in Web Pages 2012
Rename the action and click OK:
Now we may create “snap” action:
Longflow Enterprises Ltd.
Page 13
Use Webcam in Web Pages 2012
Rename the action and click OK:
Assign the above two actions to the button:
Longflow Enterprises Ltd.
Page 14
Use Webcam in Web Pages 2012
The actions are assigned to the button. Move the show message action up:
Use uploaded file
jpegcam uses a client method to handle file upload. The method takes a parameter which is a URL
representing the uploaded file. We may create such a client method for it. But if we want to use server
side functionality in our web application then we cannot do it directly in this method. The solution is to
create a client site event.
Longflow Enterprises Ltd.
Page 15
Use Webcam in Web Pages 2012
Create a client event
Create an event parameter and name it urlFileUpload to represent uploaded file:
Rename the event from Event1 to SnapshotUploaded:
Create upload completion handler method
Now we may create a web client method to handle uploaded file:
Longflow Enterprises Ltd.
Page 16
Use Webcam in Web Pages 2012
Rename the method name to onSnapshotUploaded:
Add a parameter to the method, as required by the jpegcam library:
Rename the parameter to urlFileUploaded:
Longflow Enterprises Ltd.
Page 17
Use Webcam in Web Pages 2012
Handling file upload
In this sample, we execute following actions in this method:
1. Show the URL of uploaded file on the web page or show error message
2. Display image using the URL of uploaded file
3. Fire event SnapshotUploaded
We may assign actions to event SnapshotUploaded; for example, insert a new database record to save
the URL of uploaded file to a database.
Let’s create the above actions.
Check URL
First, we need to check to see if the parameter, urlFileUploaded is really an URL. An URL should start
with “http://”. In test.html, it uses JavaScript expression, match(/(http\:\/\/\S+)/), to do this
checking. We can use JavascripFiles.Execute action execute this expression:
Rename the condition:
Set the condition to an expression:
Longflow Enterprises Ltd.
Page 18
Use Webcam in Web Pages 2012
Use a method in the expression:
Select Execute method:
Enter urlFileUploaded.match(/(http\:\/\/\S+)/) as the script to be executed:
Longflow Enterprises Ltd.
Page 19
Use Webcam in Web Pages 2012
Create a show “Success” message
Longflow Enterprises Ltd.
Page 20
Use Webcam in Web Pages 2012
Enter some html message in the first string item .Select the second stringitme and click A+ :
Select the second string item and click Property icon:
Select urlFileUploaded:
Enter html in the 3rd string item and finish the editing:
Longflow Enterprises Ltd.
Page 21
Use Webcam in Web Pages 2012
Rename the action and click OK:
Link the action to Yes port:
Longflow Enterprises Ltd.
Page 22
Use Webcam in Web Pages 2012
Create an action to show image using the URL as the image source
Longflow Enterprises Ltd.
Page 23
Use Webcam in Web Pages 2012
Link the action to the last action:
Create an action to show error message
Longflow Enterprises Ltd.
Page 24
Use Webcam in Web Pages 2012
Longflow Enterprises Ltd.
Page 25
Use Webcam in Web Pages 2012
Rename the action and click OK:
Link the action to No port:
Reset webcam
According to jpegcam sample, code webcam.reset() should be executed. Create an action to execute
it:
Longflow Enterprises Ltd.
Page 26
Use Webcam in Web Pages 2012
Link both action branches to this action:
Fire event SnapshotUploaded
Create an action to fire event SnapshotUploaded so that all actions assigned to the event will be
executed:
Longflow Enterprises Ltd.
Page 27
Use Webcam in Web Pages 2012
Longflow Enterprises Ltd.
Page 28
Use Webcam in Web Pages 2012
Link it to the last action:
Longflow Enterprises Ltd.
Page 29
Use Webcam in Web Pages 2012
Hook Upload Handling
jpegcam uses such a code to hook upload handler:
webcam.set_hook( 'onComplete', handlerName );
In our case the handlerName is “onSnapshotUploaded”. We may execute the above code at the event of
onload of the web page:
Select Execute method:
Longflow Enterprises Ltd.
Page 30
Use Webcam in Web Pages 2012
Supply the JavaScript code:
Rename the action and click OK:
Longflow Enterprises Ltd.
Page 31
Use Webcam in Web Pages 2012
The action is created and assigned to the event onload:
Show Live Webcam
jpegcam uses code webcam.get_html(320, 240) to return HTML code which shows a Flash object. We
may set it as the contents of our WebCamContainer component. We also do it at the event of onload of
the web page:
Select SetHtml method of our webcam container:
Longflow Enterprises Ltd.
Page 32
Use Webcam in Web Pages 2012
Select Math Expression to execute the JavaScript code:
Select Method icon:
Select Execute method:
Longflow Enterprises Ltd.
Page 33
Use Webcam in Web Pages 2012
Supply the JavaScript code:
Rename the action and click OK:
The action is assigned to onload:
Longflow Enterprises Ltd.
Page 34
Use Webcam in Web Pages 2012
Test
We may test the web application now.
Note that a webcam should be available on the test computer. If a webcam does not exist then we will
get an error:
Longflow Enterprises Ltd.
Page 35
Use Webcam in Web Pages 2012
Insert a webcam and reload the web page. It asks permission to access the webcam:
Longflow Enterprises Ltd.
Page 36
Use Webcam in Web Pages 2012
Click Allow. Webcam live image appears in the web page. Click “Take Snapshot” button:
A file is created in the web server and appears in the web browser:
Longflow Enterprises Ltd.
Page 37
Use Webcam in Web Pages 2012
Save uploaded files to database
Suppose we have a table with a FilePath field to record file paths. We may use an EasyUpdater
component to insert URL of uploaded file into the table.
We may assign an ExecuteWithParameterValues action at the event SnapshotUploaded.
Remember Uploaded File URL
First, let’s create a client property to remember the URL of uploaded file:
Longflow Enterprises Ltd.
Page 38
Use Webcam in Web Pages 2012
Rename it to UrlUploadedImageFile:
Set this property at the event of SnapshotUploaded:
Longflow Enterprises Ltd.
Page 39
Use Webcam in Web Pages 2012
Longflow Enterprises Ltd.
Page 40
Use Webcam in Web Pages 2012
The action appears in the method. Close the editor:
Execute Database Action
Now we may execute database updating action, also at the event of SnapshotUploaded:
Select ExecuteWithParameterValues:
Longflow Enterprises Ltd.
Page 41
Use Webcam in Web Pages 2012
Provide the property value to @url:
Longflow Enterprises Ltd.
Page 42
Use Webcam in Web Pages 2012
The action is created and assigned to the event:
Test
Launch the web application:
The web page appears. If the webcam is connected properly then live webcam image appears in the
web page. Each click of the “Take Snapshot” button will capture one snapshot and upload it to the web
server.
All files uploaded are saved under Test folder:
Longflow Enterprises Ltd.
Page 43
Use Webcam in Web Pages 2012
File path for each uploaded file is also saved in the database:
Longflow Enterprises Ltd.
Page 44
Download PDF