未加星标

Using Native Windows Features from Electron

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Electron combines the convenience of coding in javascript with the unlimited power of native development, allowing users to mix and match between simple JavaScript, C, C++, Objective C, and even Rust.

Most developers are intimately familiar with macOS - many of us use Macs as our daily drivers. That said, there is a sizable number of users who might still need a USB port and are likely to run windows.

This post is a primer on how your Electron app can interact with Windows to deliver a user experience that feels truly native and integrates with the operating system.

Windows in 2017

When we talk about modern Windows development, we usually talk about Windows 10, which just received its first major update (called the Anniversary Update). If you were to build a typical Electron app as a native Windows application, you would most likely build a Universal Windows App . Most applications in the Windows Store are universal Windows apps, communicating with Windows through a set of APIs found in the Windows Runtime (usually just called WinRT) .

WinRT is the home for anything interesting happening in Windows today. If you'd like to interact with hardware, lock screens, payments, notifications, or the Siri-like Cortana, you're talking to WinRT to make it happen. Logically, this post will now summarize the ways to call WinRT from Electron.

Calling Windows with Electron's APIs

You don't have to get your hands dirty and touch WinRT yourself - Electron already comes with a number of integrated Windows features enabling you to provide a more native Windows user experience.

Consider making full use of the task bar - Electron allows you to set a custom thumbnail region , buttons , and tool tips .


Using Native Windows Features from Electron

Using Electron's own modules, you can send primitive notifications , add entries to the recent document list , or set a little icon overlay .

That said, beyond those features, Electron does not go any deeper. That's fair, too - it's a cross-platform framework that gives you all the tools to implement the "rest of the way" yourself.

Native Node Addons (without C++)

If you want to go deeper, consider the power of native Node Addons. They are dynamically-linked shared objects, written in C or C++, and can be used just as if they were an ordinary Node.js module. They are used primarily to provide an interface between JavaScript running in Node.js and C/C++ libraries.

Nadav Bar over at Microsoft built a tool that automatically generates native Node addons for each WinRT module, enabling JavaScript developers to simply require() native Windows modules. The end result is an impressive number of modules available of npm .

Let's look at an example and use one of the more powerful Windows APIs - Windows.Media.FaceAnalysis , which contains tools to track and detect faces in images and videos. In particular, we can use the FaceDetector class to scan images for faces. According to the documentation , we can use the method DetectFacesAsync() to scan a SoftwareBitmap for faces, as long as that SoftwareBitmap is in the right color mode. Working backwards, we need to do the following four things:

Get a Windows.Storage.Streams.IRandomAccessStream from a file path (like C:\images\myImage.jpg ) Turn that file stream into a Windows.Graphics.Imaging.SoftwareBitmap Convert that bitmap into a color mode the computer can check for faces, like gray8 Instantiate a FaceDetector and use it to scan for faces

That sounds like quite the heavy lifting, but using NodeRT, it really becomes quite simple. Let's load the file first:

const {FileAccessMode, StorageFile} = require([email protected]

/windows.storage') function getFileStream (file) { return new Promise((resolve, reject) => { StorageFile.getFileFromPathAsync(file, (err, storageFile) => { storageFile.openAsync(FileAccessMode.read, (err, fileStream) => { resolve(fileStream) }) }) }) }

Now that we got a fileStream , let's turn it into a SoftwareBitmap:

const {BitmapDecoder} = require([email protected]

/windows.graphics.imaging') function getSoftwareBitmap (fileStream) { return new Promise((resolve, reject) => { BitmapDecoder.createAsync(fileStream, (err, decoder) => { decoder.getSoftwareBitmapAsync((err, bitmap) => { resolve(bitmap) }) }) }) }

You should see a pattern emerging here: All the native WinRT classes and methods are turned into JavaScript classes and methods, with asynchronous methods using Node.js callbacks. I'd personally prefer Promises, but this way, you're not tied to a later version of Node.js. Let's continue by instantiating our face detector and using it to detect some faces:

const {FaceDetector} = require([email protected] /windows.media.faceanalysis') const {SoftwareBitmap, BitmapPixelFormat} = require( [emailprotected]

/windows.graphics.imaging') function detectFacesInBitmap (bitmap) { return new Promise((resolve, reject) => { const inputPixelFormat = BitmapPixelFormat.gray8 const grayBitmap = SoftwareBitmap.convert(bitmap, inputPixelFormat) FaceDetector.createAsync((err, detector) => { detector.detectFacesAsync(grayBitmap, (err, result) => { resolve(result.length) }) }) }) }

Given how easy this was, I even went ahead and added some error handling and released a little Node module that you can go ahead and use for yourself - electron-face-detection-windows .

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: WindowsJavaScriptJavaNode.jsC++Rust
分页:12
转载请注明
本文标题:Using Native Windows Features from Electron
本站链接:http://www.codesec.net/view/522350.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(59)