Siebel Open UI – Webcam integration

This question got raised by a consumer goods customer I recently worked with: “how could we integrate the webcam on our Windows Tablet PCs to point & click and generate attachments?”. The consumer goods business can be characterized in that sense that Siebel customers have traditionally (and pretty much continue to do so) deployed on Siebel Remote clients. Reason is their sales reps need to have full disconnected functionality and the data which goes along. These implementations traditionally tend to run on Windows Tablet PCs, also quite specific for this industry. Sales reps need the ability to easily take pictures and store them against the visited account or visit itself for matters of retail audits. So I set my mind to think and come to a working solution with just a bit of code.

First the teaser…

A bit Googling revealed a nice plug-in called WebcamJS and initial tests plus reading the documentation stemmed positive.

So, next step. Integrate it within Open UI. I took the challenge to use a IP14 pre-release. The WebcamJS code comes with a stand-alone JScript library.

I took the vanilla “Account Attachment View” as a starting point and added a “no-menu applet”. Basically a regular list applet but with particular applet web template.


Added the applet to the existing Account Attachment view. Nothing fancy.


Next I created an empty shell physical renderer using Duncan’s code generator, called “DesktopWebcamPR”. I associated both my physical renderer as well as the “webcam.js” to my “Webcam JS Applet” I just created. This ensures that the webcam.js will be downloaded alongside the DesktopWebcamPR physical renderer.


Next, I put the necessary code in the DesktopWebcamPR. I added three <div> elements to hold the webcam canvas, the result and a bunch of buttons (#mycam, #myresult, #buttons). I added three buttons to Take a snapshot, Clear the snapshot and Save the snapshot. Each button invoking its own function, respectively take_snapshot(), clear_snapshot() and save_snapshot().

Initializing the webcam is just a matter of a single line:



Next, implementation of the three functions.

To generate a snapshot it requires just a few lines:

function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementById('myresult').innerHTML = '<img src="'+data_uri+'"/>';

To clear the snapshot I choose a simplistic approach:

function clear_snapshot() {
$("#myresult").find("img").attr("src", "")

To save the snapshot obviously required a bit more work. I considered couple of options. One was to actually invoke a Webservice, the other to invoke a server-side business service. A Webservice could also be invoked locally on a Mobile Web Client, and would be kind of transparent when working with a Web Client to invoke the service against the EAI OM. Since the data is already Base64 it would make sense and we would not need a single line of eScript. Anyways, I opted for the quickest which would be an eScripted business service “ORCL Create Attachment”.

It does a few things:

1) It generates a SiebelMessage based on the OOTB “CRMDesktopAccountIO” Integration object
2) It retrieves the next available ROW_ID to act as an unique file name for the attachment
3) It adds the Base64 payload
4) It invokes the EAI Siebel Adapter to Upsert the SiebelMessage

And well… that more or less is what is need to make this to work. Obviously, the solution has some rough edges but serves its purpose.

You can grab the necessary code here.

– Jeroen


10 thoughts on “Siebel Open UI – Webcam integration

  1. Could you please advise if in the solution provided the photo size is hardcoded. Is it dependent on the camera resolution?

  2. i tried to do this how ever getting error cannot get service ORCL attachment Error code:-SBL00275.I compiled it on SRF..Do we have to associate it at application user property side.

  3. .its erroring out on this line I checked on developer tools
    var result = $(“#myresult”).find(“img”).attr(“src”).substr(23);
    Console Says:-
    Uncaught TypeError: Cannot read property ‘substr’ of undefined.

  4. hi Jeroen. How “Id” field value fetched in desktopwebcAam.Js File in save function.Do we have hide Account Id field on form applet and access it in js file and pass to business service with below logic var controls = this.GetPM().Get(“GetControls”); and var AccountControl = controls[“Account Id”];

    or do we have to use rawrecord set method?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s