Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

How to use the Camera WebWorks API

Wanted to share the following tip about how to use the camera WebWorks JavaScript API to take a photo or video, and then display that media in your application.

 

Step 1: Create your HTML

 

This example provides two buttons to launch the camera or video player, as well as DIV containers that will be used to display the photo or video:

 

<h2>Photo Demo</h2>
<div id="photoDetails">
	<button onclick="takePicture()">Take Photo</button>
</div>

<h2>Video Demo</h2>
<div id="videoDetails">
	<button onclick="takeVideo()">Take Video</button>
</div>

 

Step 2: Define JavaScript handlers to launch camera

 

Call either the takeVideo() or takePicture() methods and provide the names of call-back methods raised when certain camera events occur:

 

function takeVideo()
{
   var result = blackberry.media.camera.takeVideo(onVideoCaptured, onCameraClosed, onError);
}

function takePicture()
{
   var result = blackberry.media.camera.takePicture(onPhotoCaptured, onCameraClosed, onError);
}

 

Step 3: Define JavaScript call back methods to handle camera events

 

When a photo is taken, add a new HTML image element to the "photoDetails" DIV.  When a video is recorded, add a new HTML video element to the "videoDetails" DIV.

 

function onPhotoCaptured(filePath)
{
   var img = new Image();
   img.src=filePath
   img.width = Math.round(screen.width / 2);
	
   document.getElementById("photoDetails").appendChild(img);
}
function onVideoCaptured(filePath)
{
   var video = document.createElement('video');
   video.src=filePath
   video.controls = "controls";
   video.width = Math.round(screen.width / 2);

   document.getElementById("videoDetails").appendChild(video);
}
function onCameraClosed(closedEvent)
{
   alert("onCameraClosed: " + closedEvent);
}
function onError(errorEvent)
{
   alert("onError: " + errorEvent);
}

 

Hope this helps - good luck!

 

Adam

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
New Contributor
Posts: 4
Registered: ‎09-12-2011
My Device: Torch
My Carrier: Rogers

Re: How to use the Camera WebWorks API

Hey Adam,

 

Excellent sample. It was very helpful in getting me started. However there are two things you did not bring up that caused me some headaches:

 

1. If a WebWorks application wants to access a file in the device's filesystem, it must whitelist that location in the config file. For example:

 

<access subdomains="true" uri="file://path/to/images/"/>

 

2. When a file is accessed off of the device, the path must begin with "file://". So a minor correction to your sample code is:


function onPhotoCaptured(filePath)
{
   var img = new Image();
   img.src="file://" + filePath
   img.width = Math.round(screen.width / 2);
	
   document.getElementById("photoDetails").appendChild(img);
}
function onVideoCaptured(filePath)
{
   var video = document.createElement('video');
   video.src="file://" + filePath
   video.controls = "controls";
   video.width = Math.round(screen.width / 2);

   document.getElementById("videoDetails").appendChild(video);
}

 

Developer
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: How to use the Camera WebWorks API

@tszepesi

 

I don't get the points you mentioned here.

 

1) To my knowledge I think only external files need to be whitelisted in config.xml. For device's files the application must be given access_shared permission.

 

2) Functions onPhotoCaptured and onVideoCaptured returns the complete file path. This is the path at which the file is found in device. These function never bring a path outside the device memory in this scenario.

New Contributor
Posts: 4
Registered: ‎09-12-2011
My Device: Torch
My Carrier: Rogers

Re: How to use the Camera WebWorks API

@praveen_rajan

 

My points come from trying the provided code and it not working. In the process of determining why it was not working, I came across the following posts:

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Common-BlackBerry-WebWorks-devel...

 

The key part of this post is:

"Applications created using the BlackBerry WebWorks platform can make HTTP requests to resources (such as HTML, Image, CSS or JavaScript files) embedded within the application using the local:/// protocol or to pages saved on the BlackBerry file system or SDCard using the "file:///" protocol."

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/File-Browser-Explorer-in-WebWork...

 

The key part of this post is (found in the first reply):

"You will need to make sure you whitelist the proper file:// root path to ensure that the WebWorks frameworks will allow loading content from that protocol/domain"

 

These were the two steps I took to make the sample code work. If you have some time, give it a try for yourself, and let me know if I am miss understanding something.

Developer
Posts: 78
Registered: ‎05-17-2012
My Device: 9900 - OS 7.0 Torch device
My Carrier: Reliance

Is there image uploading support in Webworks for BB OS 5,6 &7

Hi All,

 

Can you guys please update me that there is any support for image uploading using javascript in Webworks for BB OS 5, 6 & 7. There is filetransfer API which will support for BB10 but not below versions. Can you guys update me if there is any alternative for the same.

Contributor
Posts: 16
Registered: ‎08-01-2013
My Device: Bold 9900
My Carrier: Vodacom

Re: How to use the Camera WebWorks API

OMG I LOVE YOU!!! You just fixed a problem a spent my entire day worrying and trying to fix on the most tight of deadlines!!!