HTML and CSS Reference
In-Depth Information
Note that the single Webcam capability is sufficient for the purposes of writing an instant photo
application. However, if you were writing an application that uses the webcam to capture a video
stream, you would probably also want to add the Microphone capability. The Webcam capability
alone provides access to the video stream, but not to the audio stream.
Configuring the webcam
The Windows 8 API provides a common dialog to deal with the webcam. All you need to do is get an
instance of the CameraCaptureUI object and then launch it.
var dialog = new Windows.Media.Capture.CameraCaptureUI();
The CameraCaptureUI object deals with photos and video, so it exposes two distinct properties by
which you can configure video and photo settings: photoSettings and videoSettings . For the purpose
of this exercise, you'll focus only on photoSettings .
The photoSettings object offers a few properties to define the size (in pixels) of the resulting image,
its aspect ratio, and the file format in which you want to store the image. Here's what you need to do
to ensure a 16:9 aspect ratio and store the image bits as a JPEG image.
var dialog = new Windows.Media.Capture.CameraCaptureUI();
var aspectRatio = { width: 16, height: 9 };
dialog.photoSettings.croppedAspectRatio = aspectRatio;
dialog.photoSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.jpeg;
If you don't like the JPEG format, you can choose the PNG format instead:
dialog.photoSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
In general the JPEG format results in a slightly more compact file that requires fewer resources and
less time to transfer over the wire, and it also takes less space when stored on disk. In contrast, the
PNG format ensures a somewhat better image quality; the tradeoff is a larger file size—a PNG image
is usually nearly double the size of a JPEG image.
Accessing the webcam programmatically
After you have configured the webcam, you're ready to launch the dialog that will guide the user to take
the picture. The following listing shows the complete code you need to have in instantPhotoApp.js to
capture an image. To be precise, the listing below doesn't yet include the code to display the captured
image.
instantPhotoApp.takePicture = function () {
try {
var dialog = new Windows.Media.Capture.CameraCaptureUI();
var aspectRatio = { width: 16, height: 9 };
Search WWH ::




Custom Search