Added WinRT 8.1 Modern Desktop JavaScript sample

samples/winrt/ImageManipulations/MediaExtensions/OcvTransform/OcvTransform.cpp

@@ -120,13 +120,24 @@ HRESULT OcvImageManipulations::SetProperties(ABI::Windows::Foundation::Collectio
 
     if (found)
     {
-        IInspectable* value;
-        spSetting->Lookup(key, &value);
+        Microsoft::WRL::ComPtr<ABI::Windows::Foundation::IPropertyValue> spPropVal;
+        Microsoft::WRL::ComPtr<IInspectable> spInsp;
+
+        spSetting->Lookup(key, spInsp.ReleaseAndGetAddressOf());
+
+        hr = spInsp.As(&spPropVal);
+        if (hr != S_OK) 
+        {
+            return hr;
+        }
+
+        INT32 effect;
+        hr = spPropVal->GetInt32(&effect);
+        if (hr != S_OK)
+        {
+            return hr;
+        }
 
-        Microsoft::WRL::ComPtr<ABI::Windows::Foundation::IReference<int>> ref;
-        hr = value->QueryInterface(IID_PPV_ARGS(&ref));
-        int effect = InvalidEffect;
-        hr = ref->get_Value(&effect);
         if ((effect >= 0) && (effect < InvalidEffect))
         {
             m_TransformType = (ProcessingType)effect;

samples/winrt/JavaScript/MediaCaptureJavaScript.jsproj

+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|AnyCPU">
+      <Configuration>Debug</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x86">
+      <Configuration>Debug</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|AnyCPU">
+      <Configuration>Release</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x86">
+      <Configuration>Release</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>d70a3790-48ce-4e58-af60-ebefc22e9c7a</ProjectGuid>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '12.0'">
+    <VisualStudioVersion>12.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+  <PropertyGroup>
+    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+    <TargetPlatformVersion>8.1</TargetPlatformVersion>
+    <RequiredPlatformVersion>8.1</RequiredPlatformVersion>
+    <MinimumVisualStudioVersion>$(VersionNumberMajor).$(VersionNumberMinor)</MinimumVisualStudioVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <PackageCertificateKeyFile>MediaCaptureJavaScript_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="default.html" />
+    <Content Include="html\AdvancedCapture.html" />
+    <Content Include="images\logo.scale-100.png" />
+    <Content Include="images\microsoft-sdk.png" />
+    <Content Include="images\smalllogo.scale-100.png" />
+    <Content Include="images\smallTile-sdk.png" />
+    <Content Include="images\splash-sdk.png" />
+    <Content Include="images\splashscreen.scale-100.png" />
+    <Content Include="images\squareTile-sdk.png" />
+    <Content Include="images\storeLogo-sdk.png" />
+    <Content Include="images\storelogo.scale-100.png" />
+    <Content Include="images\tile-sdk.png" />
+    <Content Include="images\windows-sdk.png" />
+    <Content Include="js\AdvancedCapture.js" />
+    <Content Include="js\default.js" />
+    <Content Include="css\default.css" />
+    <Content Include="sample-utils\sample-utils.css" />
+    <Content Include="sample-utils\sample-utils.js" />
+    <Content Include="sample-utils\scenario-select.html" />
+    <None Include="MediaCaptureJavaScript_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.2.0, Version=1.0" />
+  </ItemGroup>
+  <PropertyGroup Label="UserMacros">
+    <OpenCV_Bin>$(OPENCV_WINRT_INSTALL_DIR)WS\8.1\$(PlatformTarget)\$(PlatformTarget)\vc12\bin\</OpenCV_Bin>
+    <OpenCV_Lib>$(OPENCV_WINRT_INSTALL_DIR)WS\8.1\$(PlatformTarget)\$(PlatformTarget)\vc12\lib\</OpenCV_Lib>
+    <OpenCV_Include>$(OPENCV_WINRT_INSTALL_DIR)WS\8.1\$(PlatformTarget)\include\</OpenCV_Include>
+    <!--debug suffix for OpenCV dlls and libs -->
+    <DebugSuffix Condition="'$(Configuration)'=='Debug'">d</DebugSuffix>
+    <DebugSuffix Condition="'$(Configuration)'!='Debug'">
+    </DebugSuffix>
+  </PropertyGroup>
+  <ItemGroup>
+    <!--Add required OpenCV dlls here-->
+    <Content Include="$(OpenCV_Bin)opencv_core300$(DebugSuffix).dll">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="$(OpenCV_Bin)opencv_imgproc300$(DebugSuffix).dll">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\ImageManipulations\MediaExtensions\OcvTransform\OcvTransform.vcxproj" />
+  </ItemGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+  <!-- To modify your build process, add your task inside one of the targets below then uncomment
+       that target and the DisableFastUpToDateCheck PropertyGroup. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>
\ No newline at end of file

samples/winrt/JavaScript/MediaCaptureJavaScript.sln

+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 2013
+VisualStudioVersion = 12.0.31101.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "OcvTransform", "..\ImageManipulations\MediaExtensions\OcvTransform\OcvTransform.vcxproj", "{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}"
+EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "MediaCaptureJavaScript", "MediaCaptureJavaScript.jsproj", "{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Debug|ARM = Debug|ARM
+		Debug|Win32 = Debug|Win32
+		Debug|x64 = Debug|x64
+		Release|Any CPU = Release|Any CPU
+		Release|ARM = Release|ARM
+		Release|Win32 = Release|Win32
+		Release|x64 = Release|x64
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|Any CPU.ActiveCfg = Debug|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|ARM.ActiveCfg = Debug|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|ARM.Build.0 = Debug|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|ARM.Deploy.0 = Debug|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|Win32.ActiveCfg = Debug|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|Win32.Build.0 = Debug|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|Win32.Deploy.0 = Debug|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|x64.ActiveCfg = Debug|x64
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|x64.Build.0 = Debug|x64
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Debug|x64.Deploy.0 = Debug|x64
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|Any CPU.ActiveCfg = Release|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|ARM.ActiveCfg = Release|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|ARM.Build.0 = Release|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|ARM.Deploy.0 = Release|ARM
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|Win32.ActiveCfg = Release|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|Win32.Build.0 = Release|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|Win32.Deploy.0 = Release|Win32
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|x64.ActiveCfg = Release|x64
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|x64.Build.0 = Release|x64
+		{C5B886A7-8300-46FF-B533-9613DE2AF637}.Release|x64.Deploy.0 = Release|x64
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|Any CPU.ActiveCfg = Debug|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|ARM.ActiveCfg = Debug|ARM
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|ARM.Build.0 = Debug|ARM
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|Win32.ActiveCfg = Debug|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|Win32.Build.0 = Debug|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|x64.ActiveCfg = Debug|x64
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Debug|x64.Build.0 = Debug|x64
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|Any CPU.ActiveCfg = Release|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|ARM.ActiveCfg = Release|ARM
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|ARM.Build.0 = Release|ARM
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|Win32.ActiveCfg = Release|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|Win32.Build.0 = Release|Win32
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|x64.ActiveCfg = Release|x64
+		{BA69218F-DA5C-4D14-A78D-21A9E4DEC669}.Release|x64.Build.0 = Release|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|ARM.ActiveCfg = Debug|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|ARM.Build.0 = Debug|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|ARM.Deploy.0 = Debug|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Win32.ActiveCfg = Debug|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Win32.Build.0 = Debug|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|Win32.Deploy.0 = Debug|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|x64.ActiveCfg = Debug|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|x64.Build.0 = Debug|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Debug|x64.Deploy.0 = Debug|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|ARM.ActiveCfg = Release|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|ARM.Build.0 = Release|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|ARM.Deploy.0 = Release|ARM
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Win32.ActiveCfg = Release|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Win32.Build.0 = Release|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|Win32.Deploy.0 = Release|x86
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|x64.ActiveCfg = Release|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|x64.Build.0 = Release|x64
+		{D70A3790-48CE-4E58-AF60-EBEFC22E9C7A}.Release|x64.Deploy.0 = Release|x64
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal

samples/winrt/JavaScript/css/default.css

+/* styles */
+
+#featureLabel
+{
+	padding-top: 50px;
+}
\ No newline at end of file

samples/winrt/JavaScript/default.html

+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>OpenCV for Windows RT</title>
+
+    <!-- WinJS references -->
+    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
+
+    <!-- SDK sample framework references -->
+    <link rel="stylesheet" href="/sample-utils/sample-utils.css" />
+    <link rel="stylesheet" href="/css/default.css" />
+    <script src="/sample-utils/sample-utils.js"></script>
+    <script src="/js/default.js"></script>
+</head>
+<body role="application">
+    <div id="rootGrid">
+        <div id="content">
+			<h4>
+				<img src="images/windows-sdk.png"  />
+				<span>OpenCV for Windows RT</span>
+			</h4>
+            <h1 id="featureLabel"></h1>
+            <div id="contentHost"></div>
+        </div>
+    </div>
+</body>
+</html>

samples/winrt/JavaScript/html/AdvancedCapture.html

+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+    <link rel="stylesheet" href="/css/default.css" />
+    <script src="/js/AdvancedCapture.js"></script>
+</head>
+<body>
+    <div data-win-control="SdkSample.ScenarioInput">
+        <p>
+            This scenario shows how to enumerate cameras in the system.
+            Choose a camera from the list to start previewing from that camera. You can add additional effect
+            using the dropdown provided.
+        </p>
+        <select id="cameraSelect" aria-labelledby="listLabel"></select>
+        <button id="btnStartDevice" disabled="disabled">Start Device</button>
+        <button id="btnStartPreview" disabled="disabled">Start Preview</button>
+		<select id="videoEffect" disabled="disabled">
+			<option>Preview</option>
+			<option>Grayscale</option>
+			<option>Canny</option>
+			<option>Sobel</option>
+			<option>Histogram</option>
+		</select>
+    </div>
+    <div data-win-control="SdkSample.ScenarioOutput">
+        <table>
+            <tr>
+                <td>Preview</td>
+            </tr>
+            <tr>
+                <td>
+                    <video width="320" height="240" id="previewVideo" style="border: 1px solid black">
+                    </video>
+                </td>
+            </tr>
+        </table>
+    </div>
+</body>
+</html>

samples/winrt/JavaScript/js/AdvancedCapture.js

+//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
+//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
+//// PARTICULAR PURPOSE.
+////
+//// Copyright (c) Microsoft Corporation. All rights reserved
+
+(function () {
+    "use strict";
+
+    var cameraList = null;
+    var mediaCaptureMgr = null;
+    var captureInitSettings = null;
+    
+    var page = WinJS.UI.Pages.define("/html/AdvancedCapture.html", {
+
+        ready: function (element, options) {
+            scenarioInitialize();
+        },
+
+        unload: function (element, options) {
+            // release resources
+            releaseMediaCapture();
+        }
+    });
+
+    function scenarioInitialize() {
+    	// Initialize the UI elements
+    	id("btnStartDevice").disabled = false;
+    	id("btnStartDevice").addEventListener("click", startDevice, false);
+    	id("btnStartPreview").disabled = true;
+    	id("videoEffect").disabled = true;
+    	id("btnStartPreview").addEventListener("click", startPreview, false);
+    	id("cameraSelect").addEventListener("change", onDeviceChange, false);
+
+    	id("videoEffect").addEventListener('change', addEffectToImageStream, false);
+
+    	enumerateCameras();
+    }
+
+    function initCameraSettings() {
+    	captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
+    	captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.video
+
+        // If the user chose another capture device, use it by default
+        var selectedIndex = id("cameraSelect").selectedIndex;
+        var deviceInfo = cameraList[selectedIndex];
+        captureInitSettings.videoDeviceId = deviceInfo.id;
+    }
+
+    // this function takes care of releasing the resources associated with media capturing
+    function releaseMediaCapture() {
+		if (mediaCaptureMgr) {
+			mediaCaptureMgr.close();
+			mediaCaptureMgr = null;
+		}
+    }
+
+    //Initialize media capture with the current settings
+    function startDevice() {
+        displayStatus("Starting device");
+        releaseMediaCapture();
+        initCameraSettings();
+
+        mediaCaptureMgr = new Windows.Media.Capture.MediaCapture();
+        mediaCaptureMgr.initializeAsync(captureInitSettings).done(function (result) {
+        	// Update the UI
+        	id("btnStartPreview").disabled = false;
+        	id("btnStartDevice").disabled = true;
+        	displayStatus("Device started");
+        });
+    }
+
+    function startPreview() {
+        displayStatus("Starting preview");
+        id("btnStartPreview").disabled = true;
+        id("videoEffect").disabled = false;
+        var video = id("previewVideo");
+        video.src = URL.createObjectURL(mediaCaptureMgr, { oneTimeOnly: true });
+        video.play();
+        displayStatus("Preview started");
+    }
+
+    function addEffectToImageStream() {
+    	var effectId = id("videoEffect").selectedIndex;
+    	var props = new Windows.Foundation.Collections.PropertySet();
+    	props.insert("{698649BE-8EAE-4551-A4CB-3EC98FBD3D86}", effectId);
+
+    	mediaCaptureMgr.clearEffectsAsync(Windows.Media.Capture.MediaStreamType.videoPreview).then(function () {
+    		return mediaCaptureMgr.addEffectAsync(Windows.Media.Capture.MediaStreamType.videoPreview, 'OcvTransform.OcvImageManipulations', props);
+    	}).then(function () {
+    		displayStatus('Effect has been successfully added');
+    	}, errorHandler);
+    }
+
+    function enumerateCameras() {
+        displayStatus("Enumerating capture devices");
+        var cameraSelect = id("cameraSelect");
+        cameraList = null;
+        cameraList = new Array();
+
+        // Clear the previous list of capture devices if any
+        while (cameraSelect.length > 0) {
+            cameraSelect.remove(0);
+        }
+
+        // Enumerate cameras and add them to the list
+        var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
+        deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).done(function (cameras) {
+            if (cameras.length === 0) {
+                cameraSelect.disabled = true;
+                displayError("No camera was found");
+                id("btnStartDevice").disabled = true;
+                cameraSelect.add(new Option("No cameras available"));
+            } else {
+                cameras.forEach(function (camera) {
+                    cameraList.push(camera);
+                    cameraSelect.add(new Option(camera.name));
+                });
+            }
+        }, errorHandler);                      
+    }
+
+    function onDeviceChange() {
+        releaseMediaCapture();
+        id("btnStartDevice").disabled = false;
+        id("btnStartPreview").disabled = true;
+        id("videoEffect").disabled = true;
+        displayStatus("");
+    }
+
+    function suspendingHandler(suspendArg) {
+        displayStatus("Suspended");
+        releaseMediaCapture();
+    }
+
+    function resumingHandler(resumeArg) {
+        displayStatus("Resumed");
+        scenarioInitialize();
+    }
+
+    function errorHandler(err) {
+        displayError(err.message);
+    }
+
+    function failedEventHandler(e) {
+    	displayError("Fatal error", e.message);
+    }
+
+    function displayStatus(statusText) {
+    	SdkSample.displayStatus(statusText);
+    }
+
+    function displayError(error) {
+    	SdkSample.displayError(error);
+    }
+
+    function id(elementId) {
+    	return document.getElementById(elementId);
+    }
+})();

samples/winrt/JavaScript/js/default.js

+//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
+//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
+//// PARTICULAR PURPOSE.
+////
+//// Copyright (c) Microsoft Corporation. All rights reserved
+
+
+(function () {
+    "use strict";
+
+    var sampleTitle = "OpenCV Image Manipulations sample";
+
+    var scenarios = [
+        { url: "/html/AdvancedCapture.html", title: "Enumerate cameras and add a video effect" },        
+    ];
+
+    function activated(eventObject) {
+        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
+            // Use setPromise to indicate to the system that the splash screen must not be torn down
+            // until after processAll and navigate complete asynchronously.
+            eventObject.setPromise(WinJS.UI.processAll().then(function () {
+                // Navigate to either the first scenario or to the last running scenario
+                // before suspension or termination.
+                var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
+                return WinJS.Navigation.navigate(url);
+            }));
+        }
+    }
+
+    WinJS.Navigation.addEventListener("navigated", function (eventObject) {
+        var url = eventObject.detail.location;
+        var host = document.getElementById("contentHost");
+        // Call unload method on current scenario, if there is one
+        host.winControl && host.winControl.unload && host.winControl.unload();
+        WinJS.Utilities.empty(host);
+        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
+            WinJS.Application.sessionState.lastUrl = url;
+        }));
+    });
+
+    WinJS.Namespace.define("SdkSample", {
+        sampleTitle: sampleTitle,
+        scenarios: scenarios,
+        mediaCaptureMgr: null,
+        photoFile: "photo.jpg",
+        deviceList: null,
+        recordState: null,
+        captureInitSettings: null,
+        encodingProfile: null,
+        storageFile: null,
+        photoStorage: null,
+        cameraControlSliders: null,
+
+
+        displayStatus: function (statusText) {
+            WinJS.log && WinJS.log(statusText, "MediaCapture", "status");
+        },
+
+        displayError: function (error) {
+            WinJS.log && WinJS.log(error, "MediaCapture", "error");
+        },
+
+        id: function (elementId) {
+            return document.getElementById(elementId);
+        },
+
+    });
+
+    WinJS.Application.addEventListener("activated", activated, false);
+    WinJS.Application.start();
+    Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", SdkSample.suspendingHandler, false);
+    Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", SdkSample.resumingHandler, false);
+})();

samples/winrt/JavaScript/package.appxmanifest

+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest" xmlns:m2="http://schemas.microsoft.com/appx/2013/manifest">
+  <Identity Name="d70a3790-48ce-4e58-af60-ebefc22e9c7a" Version="1.0.0.0" Publisher="CN=Sergei" />
+  <Properties>
+    <DisplayName>MediaCaptureJavaScript</DisplayName>
+    <PublisherDisplayName>Sergei</PublisherDisplayName>
+    <Logo>images\storelogo.png</Logo>
+  </Properties>
+  <Prerequisites>
+    <OSMinVersion>6.3.0</OSMinVersion>
+    <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
+  </Prerequisites>
+  <Resources>
+    <Resource Language="x-generate" />
+  </Resources>
+  <Applications>
+    <Application Id="App" StartPage="default.html">
+      <m2:VisualElements DisplayName="MediaCaptureJavaScript" Description="MediaCaptureJavaScript" ForegroundText="light" BackgroundColor="#464646" Square150x150Logo="images\Logo.png" Square30x30Logo="images\SmallLogo.png">
+        <m2:SplashScreen Image="images\splashscreen.png" />
+      </m2:VisualElements>
+    </Application>
+  </Applications>
+  <Capabilities>
+    <Capability Name="internetClient" />
+    <DeviceCapability Name="webcam" />
+  </Capabilities>
+  <Extensions>
+    <Extension Category="windows.activatableClass.inProcessServer">
+      <InProcessServer>
+        <Path>OcvTransform.dll</Path>
+        <ActivatableClass ActivatableClassId="OcvTransform.OcvImageManipulations" ThreadingModel="both" />
+      </InProcessServer>
+    </Extension>
+  </Extensions>
+</Package>
\ No newline at end of file

samples/winrt/JavaScript/sample-utils/sample-utils.css

+/* Copyright (c) Microsoft Corporation. All rights reserved. */
+html
+{
+    cursor: default;
+}
+
+#featureLabel
+{
+    font: 20pt/24pt "Segoe UI Semilight";
+    margin:0;
+    padding:5px 0 10px 0;
+    font-weight: normal;
+}
+
+#inputLabel, #outputLabel
+{
+    font: 11pt/15pt "Segoe UI";
+    margin:0;
+    padding:0;
+    font-weight: normal;
+}
+
+#listLabel, #descLabel
+{
+    font: 11pt/15pt "Segoe UI Semilight";
+    font-weight:normal;
+}
+
+#rootGrid
+{
+    width: 100%;
+    height: 100%;
+    display: -ms-grid;
+    -ms-grid-columns: 100px 1fr 100px;
+    -ms-grid-rows: 20px auto 1fr auto 20px;
+}
+
+#header
+{
+    -ms-grid-column: 2;
+    -ms-grid-row: 2;
+}
+
+#content
+{
+    padding-right:20px;
+    padding-bottom:20px;
+    overflow:auto;
+    display:-ms-grid;
+    -ms-grid-columns:1fr;
+    -ms-grid-rows: auto 1fr;
+    -ms-grid-column: 2;
+    -ms-grid-row: 3;
+}
+
+#footer
+{
+    -ms-grid-column: 2;
+    -ms-grid-row: 4;
+    padding-bottom:10px;
+}
+
+#featureLabel
+{
+    -ms-grid-row: 1;
+}
+
+#contentHost
+{
+    display:-ms-grid;
+    -ms-grid-columns:1fr;
+    -ms-grid-rows: auto auto auto 1fr;
+    -ms-grid-row: 2;
+}
+
+#inputLabel
+{
+    -ms-grid-row: 1;
+}
+
+
+#input
+{
+    -ms-grid-row: 2;
+    display: -ms-grid;
+    -ms-grid-columns: auto auto;
+    -ms-grid-rows: auto;
+    margin-top:10px;
+}
+
+#outputLabel
+{
+    -ms-grid-row: 3;
+    padding-top:10px;
+    padding-bottom:10px;
+}
+
+#output
+{
+    height:100%;
+    -ms-grid-row: 4;
+    -ms-grid-row-align:stretch;
+}
+
+.clear
+{
+    clear:both;
+}
+
+
+#footer span
+{
+    font-size:12px;
+}
+
+#footer .company
+{
+    float:left;
+}
+
+#footer .links
+{
+    float:right;
+}
+
+#footer .links a
+{
+    font-size:12px;
+    margin-left:8px;
+    text-decoration:none;
+}
+
+#footer .links .pipe
+{
+    font-size:9px;
+    margin-left:8px;
+}
+
+#statusMessage
+{
+    margin-bottom:5px;
+}
+
+#input .options
+{
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+}
+
+#input .details
+{
+    -ms-grid-row: 1;
+    -ms-grid-column: 2;
+    cursor:text;
+}
+
+.imageHolder
+{
+    max-width:382px;
+}
+
+.imageHolder.withText
+{
+     float:left;
+     margin-right:10px;
+}
+
+#scenarios
+{
+    margin-right:20px;
+}
+
+
+
+@media screen and (min-width: 800px) and (max-width: 1024px)
+{
+    #rootGrid
+    {
+        -ms-grid-columns: 40px 1fr 40px;
+    }
+}
+
+@media screen and (max-width: 799px)
+{
+    #rootGrid
+    {
+        -ms-grid-columns: 20px 1fr 20px;
+    }
+
+    #output
+    {
+        padding-bottom:20px;
+    }
+    
+    #input
+    {
+        -ms-grid-columns: auto;
+        -ms-grid-rows: auto auto;
+    }
+
+    #input .options
+    {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+        margin-bottom:10px;
+    }
+
+    #input .details
+    {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+    }
+}
+
+

samples/winrt/JavaScript/sample-utils/sample-utils.js

+//// Copyright (c) Microsoft Corporation. All rights reserved
+
+// This file is a part of the SDK sample framework. For code demonstrating scenarios in this particular sample,
+// please see the html, css and js folders.
+
+(function () {
+
+    //
+    // Helper controls used in the sample pages
+    //
+
+    // The ScenarioInput control inserts the appropriate markup to get labels & controls
+    // hooked into the input section of a scenario page so that it's not repeated in
+    // every one.
+
+    var lastError = "";
+    var lastStatus = "";
+    var ScenarioInput = WinJS.Class.define(
+        function (element, options) {
+        element.winControl = this;
+        this.element = element;
+
+        new WinJS.Utilities.QueryCollection(element)
+                    .setAttribute("role", "main")
+                    .setAttribute("aria-labelledby", "inputLabel");
+        element.id = "input";
+
+        this.addInputLabel(element);
+        this.addDetailsElement(element);
+        this.addScenariosPicker(element);
+    }, {
+        addInputLabel: function (element) {
+            var label = document.createElement("h2");
+            label.textContent = "Input";
+            label.id = "inputLabel";
+            element.parentNode.insertBefore(label, element);
+        },
+        addScenariosPicker: function (parentElement) {
+            var scenarios = document.createElement("div");
+            scenarios.id = "scenarios";
+            var control = new ScenarioSelect(scenarios);
+
+            parentElement.insertBefore(scenarios, parentElement.childNodes[0]);
+        },
+
+        addDetailsElement: function (sourceElement) {
+            var detailsDiv = this._createDetailsDiv();
+            while (sourceElement.childNodes.length > 0) {
+                detailsDiv.appendChild(sourceElement.removeChild(sourceElement.childNodes[0]));
+            }
+            sourceElement.appendChild(detailsDiv);
+        },
+        _createDetailsDiv: function () {
+            var detailsDiv = document.createElement("div");
+
+            new WinJS.Utilities.QueryCollection(detailsDiv)
+                        .addClass("details")
+                        .setAttribute("role", "region")
+                        .setAttribute("aria-labelledby", "descLabel")
+                        .setAttribute("aria-live", "assertive");
+
+            var label = document.createElement("h3");
+            label.textContent = "Description";
+            label.id = "descLabel";
+
+            detailsDiv.appendChild(label);
+            return detailsDiv;
+        },
+    }
+    );
+
+    // The ScenarioOutput control inserts the appropriate markup to get labels & controls
+    // hooked into the output section of a scenario page so that it's not repeated in
+    // every one.
+
+    var ScenarioOutput = WinJS.Class.define(
+        function (element, options) {
+        element.winControl = this;
+        this.element = element;
+        new WinJS.Utilities.QueryCollection(element)
+                    .setAttribute("role", "region")
+                    .setAttribute("aria-labelledby", "outputLabel")
+                    .setAttribute("aria-live", "assertive");
+        element.id = "output";
+
+        this._addOutputLabel(element);
+        this._addStatusOutput(element);
+    }, {
+        _addOutputLabel: function (element) {
+            var label = document.createElement("h2");
+            label.id = "outputLabel";
+            label.textContent = "Output";
+            element.parentNode.insertBefore(label, element);
+        },
+        _addStatusOutput: function (element) {
+            var statusDiv = document.createElement("div");
+            statusDiv.id = "statusMessage";
+            statusDiv.setAttribute("role", "textbox");
+            element.insertBefore(statusDiv, element.childNodes[0]);
+        }
+    }
+    );
+
+
+    // Sample infrastructure internals
+
+    var currentScenarioUrl = null;
+
+    WinJS.Navigation.addEventListener("navigating", function (evt) {
+        currentScenarioUrl = evt.detail.location;
+    });
+
+    WinJS.log = function (message, tag, type) {
+        var isError = (type === "error");
+        var isStatus = (type === "status");
+
+        if (isError || isStatus) {
+            var statusDiv = /* @type(HTMLElement) */ document.getElementById("statusMessage");
+            if (statusDiv) {
+                statusDiv.innerText = message;
+                if (isError) {
+                    lastError = message;
+                    statusDiv.style.color = "blue";
+                } else if (isStatus) {
+                    lastStatus = message;
+                    statusDiv.style.color = "green";
+                }
+            }
+        }
+    };
+
+    // Control that populates and runs the scenario selector
+
+    var ScenarioSelect = WinJS.UI.Pages.define("/sample-utils/scenario-select.html", {
+        ready: function (element, options) {
+            var that = this;
+            var selectElement = WinJS.Utilities.query("#scenarioSelect", element);
+            this._selectElement = selectElement[0];
+
+            SdkSample.scenarios.forEach(function (s, index) {
+                that._addScenario(index, s);
+            });
+
+            selectElement.listen("change", function (evt) {
+                var select = evt.target;
+                if (select.selectedIndex >= 0) {
+                    var newUrl = select.options[select.selectedIndex].value;
+                    WinJS.Navigation.navigate(newUrl);
+                }
+            });
+            selectElement[0].size = (SdkSample.scenarios.length > 5 ? 5 : SdkSample.scenarios.length);
+            if (SdkSample.scenarios.length === 1) {
+                // Avoid showing down arrow when there is only one scenario
+                selectElement[0].setAttribute("multiple", "multiple");
+            }
+
+            // Use setImmediate to ensure that the select element is set as active only after
+            // the scenario page has been constructed.
+            setImmediate(function () {
+                that._selectElement.setActive();
+            });
+        },
+
+        _addScenario: function (index, info) {
+            var option = document.createElement("option");
+            if (info.url === currentScenarioUrl) {
+                option.selected = "selected";
+            }
+            option.text = (index + 1) + ") " + info.title;
+            option.value = info.url;
+            this._selectElement.appendChild(option);
+        }
+    });
+
+    function activated(e) {
+        WinJS.Utilities.query("#featureLabel")[0].textContent = SdkSample.sampleTitle;
+    }
+
+    WinJS.Application.addEventListener("activated", activated, false);
+
+    // Export public methods & controls
+    WinJS.Namespace.define("SdkSample", {
+        ScenarioInput: ScenarioInput,
+        ScenarioOutput: ScenarioOutput
+    });
+
+    // SDK Sample Test helper
+    document.TestSdkSample = {
+        getLastError: function () {
+            return lastError;
+        },
+
+        getLastStatus: function () {
+            return lastStatus;
+        },
+
+        selectScenario: function (scenarioID) {
+            scenarioID = scenarioID >> 0;
+            var select = document.getElementById("scenarioSelect");
+            var newUrl = select.options[scenarioID - 1].value;
+            WinJS.Navigation.navigate(newUrl);
+        }
+    };
+})();

samples/winrt/JavaScript/sample-utils/scenario-select.html

+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title></title>
+    </head>
+    <body>
+        <div class="options">
+             <h3 id="listLabel">Select scenario:</h3>
+            <select id="scenarioSelect" aria-labelledby="listLabel">
+                <!-- scenario list is inserted here -->
+            </select>
+        </div>
+    </body>
+</html>