How to access the camera from inside the webview in Titanium Appcelerator

Question

I've very nearly finished developing a HTML5 app with Appcelerator, and I have one function left to add which is a function to allow the user to take a photo when sending the client a message through the app. There is a specific div that is displayed which contains the message form, and I'd like the user to be able to take a photo with their phone, and have it automatically attached to the message which is then submitted to our server.

However, after hunting around I'm stumped as to how to get it working. While the API shows the Javascript to make the camera work, I can't seem to access it, and I don't know where the API call should be located. Does it go in the app.js file, or it's own file, or does it not really matter where it's called? Any help/advice would be appreciated on this.

EDIT
Thanks to Dragon, I've made the following changes to my code:

index.html

        <div class="col-square">
            <a href="#" onclick="Ti.App.fireEvent('app:fromWebView');"><i class="fa fa-camera fa-squareBlock"></i><br />Take Photo</a>
        </div>

<script type="text/javascript">
    Ti.App.addEventListener("app:fromTitanium", function(e) {
        alert(e.message);
    });
</script>

app.js

Ti.App.addEventListener('app:fromWebView', function(e){

  Titanium.Media.showCamera({

    success:function(event)
    {       
        var image = event.media;
        var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,"userImg.jpg");
        file.write(image);
        var data = file.nativePath;

        Ti.App.fireEvent('app:fromTitanium', {message: "photo taken fine"});

    },
    cancel:function()
    {
    },
    error:function(error)
    {
      var a = Titanium.UI.createAlertDialog({title:'Camera'});
      if (error.code == Titanium.Media.NO_CAMERA)
      {
        a.setMessage('Please run this test on device');
      }
      else
      {
        a.setMessage('Unexpected error: ' + error.code);
      }
      a.show();
    },
    showControls:false, // don't show system controls
    mediaTypes:Ti.Media.MEDIA_TYPE_PHOTO,
    autohide:false  // tell the system not to auto-hide and we'll do it ourself
  });
});

However, in this case the the button opens the camera up fine. But, when the photo is taken, and selected, it returns to the screen but nothing happens. It then gives this error in the debug - "Ti is undefined". When I then define Ti, it will return "App is undefined".

The peculiar thing with this is that if I remove the code that will handle data being sent from app.js to the webview, it works fine, even though the code to open the camera from the webview is near enough the same code?

Answer 1

here is what you can do :

Inside your webview call and Event and write the event listener inside the parent of webview. Something like this will go inside webview:

<button onclick="Ti.App.fireEvent('app:fromWebView', { message: 'event fired from WebView, handled in Titanium' });">fromWebView</button>

Followed by something like this inside the parent js of webview :

Ti.App.addEventListener('app:fromWebView', function(e) {
    alert(e.message);
    //Here you can call the camera api.
})

for sending the image to the webview follow the reverse process.

Don't forget to check the Docs.

Hope it helps.