Ask Learn
Preview
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign inThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
In this post we will see how quickly and easily we can transform any web application into Windows 10 app using Hosted Web Apps concept.
Hosted Web App is the new concept to convert any website into a fully functional windows 10 app and allow developers to access features like Camera, sending toast notifications, updating live tiles etc. through Universal Windows Platform APIs.
I will first go through some steps by converting an ASP.NET MVC application hosted on Azure to Windows 10 app and then access camera to capture snapshot and display it on the webpage.
To start, first of all you have to install Visual Studio 2015 and Windows 10 standalone SDK
Steps:
Now, lets access the camera using Windows Platform API directly from JavaScript. We can access the camera using CameraCaptureUI JavaScript object available in Windows.Media.Capture namespace.
if (window.Windows) {
function CaptureCamera() {
var notifications = Windows.UI.Notifications;
var dialog = new Windows.Media.Capture.CameraCaptureUI();
var aspectRatio = { width: 1, height: 1 };
dialog.photoSettings.croppedAspectRatio = aspectRatio;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) {
if (file) {
var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true });
//Do whatever when the photo captured
}
else {
WinJS.log && WinJS.log("No photo captured", "sample", "status");
}
}, function (err) {
WinJS.log && WinJS.log(err, "sample", "error");
});
}
} else{
function CaptureCamera() {
alert("Can't access camera, you have to run this in native app");
}
}
This function checks if the website is running as native Windows app and opens up the camera otherwise, display an alert if running from browser..
bundles.Add(new ScriptBundle("~/bundles/UWPScripts")
.Include("~/Scripts/demo.js")
);
<div class="col-md-4">
<input type="button" value="Capture" onclick="return CaptureCamera();" />
</div>
<img id="imgPhoto" />
//Do whatever when the photo captured
document.getElementById("imgPhoto").src = photoBlobUrl;
Hope this helps!
Ask Learn is an AI assistant that can answer questions, clarify concepts, and define terms using trusted Microsoft documentation.
Please sign in to use Ask Learn.
Sign in