|
| 1 | +--- |
| 2 | +title: "Quickstart: Computer Vision client library for Node.js | Microsoft Docs" |
| 3 | +description: Get started with the Computer Vision client library for Node.js... |
| 4 | +services: cognitive-services |
| 5 | +author: PatrickFarley |
| 6 | +manager: nitinme |
| 7 | +ms.service: cognitive-services |
| 8 | +ms.subservice: computer-vision |
| 9 | +ms.topic: quickstart |
| 10 | +ms.date: 09/18/2019 |
| 11 | +ms.author: pafarley |
| 12 | +--- |
| 13 | + |
| 14 | +# Quickstart: Computer Vision client library for Node.js |
| 15 | + |
| 16 | +Get started with the Computer Vision client library for Node.js. Follow these steps to install the package and try out the example code for basic tasks. |
| 17 | + |
| 18 | +Use the Computer Vision client library for Node.js to: |
| 19 | + |
| 20 | +* [Analyze an image](#analyze-an-image) |
| 21 | +* [Read printed and handwritten text](#read-printed-and-handwritten-text) |
| 22 | + |
| 23 | +[Reference documentation](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest) | [Library source code](https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/cognitiveservices/cognitiveservices-computervision) | [Package (npm)](https://www.npmjs.com/package/azure-cognitiveservices-computervision) | [Samples](https://azure.microsoft.com/resources/samples/?service=cognitive-services&term=vision&sort=0) |
| 24 | + |
| 25 | +## Prerequisites |
| 26 | + |
| 27 | +* Azure subscription - [Create one for free](https://azure.microsoft.com/free/) |
| 28 | +* The current version of [Node.js](https://nodejs.org/) |
| 29 | + |
| 30 | +## Setting up |
| 31 | + |
| 32 | +### Create a Computer Vision Azure resource |
| 33 | + |
| 34 | +Azure Cognitive Services are represented by Azure resources that you subscribe to. Create a resource for Computer Vision using the [Azure portal](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account) or [Azure CLI](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account-cli) on your local machine. You can also: |
| 35 | + |
| 36 | +* Get a [trial key](https://azure.microsoft.com/try/cognitive-services/#decision) valid for seven days for free. After you sign up, it will be available on the [Azure website](https://azure.microsoft.com/try/cognitive-services/my-apis/). |
| 37 | +* View your resource on the [Azure portal](https://portal.azure.com/). |
| 38 | + |
| 39 | +After you get a key from your trial subscription or resource, [create environment variables](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account#configure-an-environment-variable-for-authentication) for the key and endpoint URL, named `COMPUTER_VISION_SUBSCRIPTION_KEY` and `COMPUTER_VISION_ENDPOINT` respectively. |
| 40 | + |
| 41 | +### Create a new Node.js application |
| 42 | + |
| 43 | +In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it. |
| 44 | + |
| 45 | +```console |
| 46 | +mkdir myapp && cd myapp |
| 47 | +``` |
| 48 | + |
| 49 | +Run the `npm init` command to create a node application with a `package.json` file. |
| 50 | + |
| 51 | +```console |
| 52 | +npm init |
| 53 | +``` |
| 54 | + |
| 55 | +### Install the client library |
| 56 | + |
| 57 | +Install the `ms-rest-azure` and `azure-cognitiveservices-computervision` NPM packages: |
| 58 | + |
| 59 | +```console |
| 60 | +npm install azure-cognitiveservices-computervision ms-rest-azure |
| 61 | +``` |
| 62 | + |
| 63 | +Your app's `package.json` file will be updated with the dependencies. |
| 64 | + |
| 65 | +### Prepare the Node.js script |
| 66 | + |
| 67 | +Create a new file, *index.js*, and open it in a text editor. Add the following import statements. |
| 68 | + |
| 69 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imports)] |
| 70 | + |
| 71 | +Then, define a function `computerVision` and declare an async series with primary function and callback function. You will add your quickstart code into the primary function, and call `computerVision` at the bottom of the script. |
| 72 | + |
| 73 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_functiondef_begin)] |
| 74 | + |
| 75 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_functiondef_end)] |
| 76 | + |
| 77 | +## Object model |
| 78 | + |
| 79 | +The following classes and interfaces handle some of the major features of the Computer Vision Node.js SDK. |
| 80 | + |
| 81 | +|Name|Description| |
| 82 | +|---|---| |
| 83 | +| [ComputerVisionClient](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/computervisionclient?view=azure-node-latest) | This class is needed for all Computer Vision functionality. You instantiate it with your subscription information, and you use it to do most image operations.| |
| 84 | +|[VisualFeatureTypes](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/visualfeaturetypes?view=azure-node-latest)| This enum defines the different types of image analysis that can be done in a standard Analyze operation. You specify a set of **VisualFeatureTypes** values depending on your needs. | |
| 85 | + |
| 86 | +## Code examples |
| 87 | + |
| 88 | +These code snippets show you how to do the following tasks with the Computer Vision client library for Node.js: |
| 89 | + |
| 90 | +* [Authenticate the client](#authenticate-the-client) |
| 91 | +* [Analyze an image](#analyze-an-image) |
| 92 | +* [Read printed and handwritten text](#read-printed-and-handwritten-text) |
| 93 | + |
| 94 | +## Authenticate the client |
| 95 | + |
| 96 | +Create variables for your resource's Azure endpoint and key. If you created the environment variable after you launched the application, you will need to close and reopen the editor, IDE, or shell running it to access the variable. |
| 97 | + |
| 98 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_vars)] |
| 99 | + |
| 100 | +Instantiate a client with your endpoint and key. Create a [ApiKeyCredentials](https://docs.microsoft.com/python/api/msrest/msrest.authentication.apikeycredentials?view=azure-python) object with your key and endpoint, and use it to create a [ComputerVisionClient](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/computervisionclient?view=azure-node-latest) object. |
| 101 | + |
| 102 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_client)] |
| 103 | + |
| 104 | +## Analyze an image |
| 105 | + |
| 106 | +The code in this section analyzes remote images to extract various visual features. You can do these operations as part of the **analyzeImage** method of the client object, or you can call them using individual methods. See the [reference documentation](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest) for details. |
| 107 | + |
| 108 | +> [!NOTE] |
| 109 | +> You can also analyze a local image. See the sample code on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js) for scenarios involving local images. |
| 110 | +
|
| 111 | +### Get image description |
| 112 | + |
| 113 | +The following code gets the list of generated captions for the image. See [Describe images](../concept-describing-images.md) for more details. |
| 114 | + |
| 115 | +First, define the URL of an image to analyze: |
| 116 | + |
| 117 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_describe_image)] |
| 118 | + |
| 119 | +Then add the following code to get the image description and print it to the console. |
| 120 | + |
| 121 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_describe)] |
| 122 | + |
| 123 | +### Get image category |
| 124 | + |
| 125 | +The following code gets the detected category of the image. See [Categorize images](../concept-categorizing-images.md) for more details. |
| 126 | + |
| 127 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_categories)] |
| 128 | + |
| 129 | +Define the helper function `formatCategories`: |
| 130 | + |
| 131 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_categories_format)] |
| 132 | + |
| 133 | +### Get image tags |
| 134 | + |
| 135 | +The following code gets the set of detected tags in the image. See [Content tags](../concept-tagging-images.md) for more details. |
| 136 | + |
| 137 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_tags)] |
| 138 | + |
| 139 | +Define the helper function `formatTags`: |
| 140 | + |
| 141 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_tagsformat)] |
| 142 | + |
| 143 | +### Detect objects |
| 144 | + |
| 145 | +The following code detects common objects in the image and prints them to the console. See [Object detection](../concept-object-detection.md) for more details. |
| 146 | + |
| 147 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_objects)] |
| 148 | + |
| 149 | +Define the helper function `formatRectObjects`: |
| 150 | + |
| 151 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_objectformat)] |
| 152 | + |
| 153 | +### Detect brands |
| 154 | + |
| 155 | +The following code detects corporate brands and logos in the image and prints them to the console. See [Brand detection](../concept-brand-detection.md) for more details. |
| 156 | + |
| 157 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_brands)] |
| 158 | + |
| 159 | +### Detect faces |
| 160 | + |
| 161 | +The following code returns the detected faces in the image with their rectangle coordinates and select face attributes. See [Face detection](../concept-detecting-faces.md) for more details. |
| 162 | + |
| 163 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_faces)] |
| 164 | + |
| 165 | +Define the helper function `formatRectFaces`: |
| 166 | + |
| 167 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_formatfaces)] |
| 168 | + |
| 169 | +### Detect adult or racy content |
| 170 | + |
| 171 | +The following code prints the detected presence of adult or racy content in the image. See [Adult and racy content](../concept-detecting-adult-content.md) for more details. |
| 172 | + |
| 173 | +Define the URL of the image to use: |
| 174 | + |
| 175 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_adult_image)] |
| 176 | + |
| 177 | +Then add the following code to detect adult content and print the results to the console. |
| 178 | + |
| 179 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_adult)] |
| 180 | + |
| 181 | +### Get image color scheme |
| 182 | + |
| 183 | +The following code prints the detected color attributes in the image, like the dominant colors and accent color. See [Color schemes](../concept-detecting-color-schemes.md) for more details. |
| 184 | + |
| 185 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_colors)] |
| 186 | + |
| 187 | +Define the helper function `printColorScheme` to print the details of the color scheme to the console. |
| 188 | + |
| 189 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_colors_print)] |
| 190 | + |
| 191 | +### Get domain-specific content |
| 192 | + |
| 193 | +Computer Vision can use specialized model to do further analysis on images. See [Domain-specific content](../concept-detecting-domain-content.md) for more details. |
| 194 | + |
| 195 | +First, define the URL of an image to analyze: |
| 196 | + |
| 197 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_domain_image)] |
| 198 | + |
| 199 | +The following code parses data about detected landmarks in the image. |
| 200 | + |
| 201 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_landmarks)] |
| 202 | + |
| 203 | +Define the helper function `formatRectDomain` to parse the location data about detected landmarks. |
| 204 | + |
| 205 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_landmarks_rect)] |
| 206 | + |
| 207 | +### Get the image type |
| 208 | + |
| 209 | +The following code prints information about the type of image—whether it is clip art or line drawing. |
| 210 | + |
| 211 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imagetype)] |
| 212 | + |
| 213 | +Define the helper function `describeType`: |
| 214 | + |
| 215 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imagetype_describe)] |
| 216 | + |
| 217 | +## Read printed and handwritten text |
| 218 | + |
| 219 | +Computer Vision can read visible text in an image and convert it to a character stream. |
| 220 | + |
| 221 | +> [!NOTE] |
| 222 | +> You can also read text from a local image. See the sample code on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js) for scenarios involving local images. |
| 223 | +
|
| 224 | +### Set up test images |
| 225 | + |
| 226 | +Save a reference the URL of the images you want to extract text from. |
| 227 | + |
| 228 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_images)] |
| 229 | + |
| 230 | +### Call the Recognize API |
| 231 | + |
| 232 | +Add the code below, which calls the `recognizeText` function for the given images. |
| 233 | + |
| 234 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_call)] |
| 235 | + |
| 236 | +Define the `recognizeText` function. This calls the **recognizeText** method on the client object, which returns an operation ID and starts an asynchronous process to read the content of the image. Then it uses the operation ID to check the operation at one-second intervals until the results are returned. It then returns the extracted results. |
| 237 | + |
| 238 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_helper)] |
| 239 | + |
| 240 | +Then, define the helper function `printRecText`, which prints the results of a Recognize operation to the console. |
| 241 | + |
| 242 | +[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_print)] |
| 243 | + |
| 244 | +## Run the application |
| 245 | + |
| 246 | +Run the application with the `node` command on your quickstart file. |
| 247 | + |
| 248 | +```console |
| 249 | +node index.js |
| 250 | +``` |
| 251 | + |
| 252 | +## Clean up resources |
| 253 | + |
| 254 | +If you want to clean up and remove a Cognitive Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. |
| 255 | + |
| 256 | +* [Portal](../../cognitive-services-apis-create-account.md#clean-up-resources) |
| 257 | +* [Azure CLI](../../cognitive-services-apis-create-account-cli.md#clean-up-resources) |
| 258 | + |
| 259 | +## Next steps |
| 260 | + |
| 261 | +> [!div class="nextstepaction"] |
| 262 | +>[Computer Vision API reference (Node.js)](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest) |
| 263 | +
|
| 264 | +* [What is the Computer Vision API?](../Home.md) |
| 265 | +* The source code for this sample can be found on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js). |
0 commit comments