could anybody please guide how to display photo on screen after capturing the photo using javascript??

Question

I want to display captured photo on camera screen as a small icon on bottom left or right??please anybody guide me in this issue....thanks in advance

Answer 1

Hi Satish sagar,

i think the sample present in the url will be useful for you, Please check it once.

http://code.msdn.microsoft.com/windowsapps/Metro-style-device-app-for-4f39b7bf

---

raja

Answer 2

Hi satish,

When you use the Windows.Media.Capture.MediaCapture object to take photo, you can either get the photo's stream or save it to file on certain folders (known folders or temp folders). In any case, you can further call "URL.createObjectURL" function to get a resource url pointing to the photo file/stream.

#How to reference content (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/Hh781215.aspx

#createObjectURL method (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx

After you get the resource url, you can assign it to an html <img> element (the "src" attribute) in js code. Here is a blog article which also mentioned how to get the photo/video stream from mediacapture and display them on UI:

#Tutorial Series: using WinJS & WinRT to build a fun HTML5 Camera Application for Windows 8 (1/4)
http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 3

hi chengthanks for your reply but after implementing that links I can display first photo capture on UI but when I captured second photo,that first photo had been removed by this second photo.i want to display my photos as a list according to recent to old photos like that.I am using below code to capture the photo and to dispay on UI.please help me in this issue 

(

function() {

   

"use strict";

   

varphotoKey = "capturedPhoto";

   

   

varlocalSettings = Windows.Storage.ApplicationData.current.localSettings;

   

   

varpage = WinJS.UI.Pages.define("/html/capturephoto.html", {

        ready:

function(element, options) {

            document.getElementById(

"captureButton").addEventListener("click", capturePhoto, false);

            document.getElementById(

"resetButton").addEventListener("click", reset, false);

            document.getElementById(

"resetButton").style.visibility = "hidden";

           

if(localSettings.values[photoKey]) {

                document.getElementById(

"captureButton").disabled = true;

                reloadPhoto();

            }

        }

    });

   

functioncapturePhoto() {

        WinJS.log && WinJS.log(

"", "sample", "status");

       

// Using Windows.Media.Capture.CameraCaptureUI API to capture a photo

       

vardialog = newWindows.Media.Capture.CameraCaptureUI();

       

varaspectRatio = { width: 1, height: 1 };

        dialog.photoSettings.croppedAspectRatio = aspectRatio;

        dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(

function(file) {

           

if(file) {

               

varphotoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true});

                document.getElementById(

"capturedPhoto").src = photoBlobUrl;

               

                document.getElementById(

"resetButton").style.visibility = "visible";

                localSettings.values[photoKey] = file.path;

                localSettings.values[photoKey1] = file.path;

            }

else{

                WinJS.log && WinJS.log(

"No photo captured.", "sample", "status");

            }

        },

function(err) {

            WinJS.log && WinJS.log(err,

"sample", "error");

        });

    }

   

functionreset() {

        WinJS.log && WinJS.log(

"", "sample", "status");

        document.getElementById(

"capturedPhoto").src = "/images/placeholder-sdk.png";

        document.getElementById(

"resetButton").style.visibility = "hidden";

        localSettings.values.remove(photoKey);

    }

   

functionreloadPhoto() {

       

// Resume user's state

        Windows.Storage.StorageFile.getFileFromPathAsync(localSettings.values[photoKey]).done(

function(file) {

            document.getElementById(

"capturedPhoto").src = URL.createObjectURL(file, { oneTimeOnly: true});

            document.getElementById(

"resetButton").style.visibility = "visible";

            document.getElementById(

"captureButton").disabled = false;

        },

function(err) {

            localSettings.values.remove(photoKey);

            document.getElementById(

"captureButton").disabled = false;

            WinJS.log && WinJS.log(err,

"sample", "error");

        });

    }

})();

Answer 4

Hi satish,

Thanks for your quick reply.

Well, if you want to maintain a recent image list (captured by camera), I'd
recommend you consider the following method:

• create a dedicated folder (either in well-known folder such as
  picturelibrary or app's temp folder) for storing images captured by camera in
  your windows  store app
• when you want to show recent image list (captured by camera in your windows
  store app), just use fileIO api to lookup all the image files saved in the
  dedicated folder and create a file path list
• then you can use either listview or flipview to show the images (loaded
  from disk file and converted to url by URL.createObjectURL) one by one

BTW, since the original question is addressed, you can start a new thread on
the new question :)

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.