Merge pull request #275431 from nabilat/main

Updating liveness tutorial with web sdk

Author: ShannonLeavitt

articles/ai-services/computer-vision/Tutorials/liveness.md

@@ -28,17 +28,18 @@ The liveness detection solution successfully defends against various spoof types
 - Once you have your Azure subscription, <a href="https://portal.azure.com/#create/Microsoft.CognitiveServicesFace"  title="Create a Face resource"  target="_blank">create a Face resource</a> in the Azure portal to get your key and endpoint. After it deploys, select **Go to resource**. 
     - You need the key and endpoint from the resource you create to connect your application to the Face service. You'll paste your key and endpoint into the code later in the quickstart.
     - You can use the free pricing tier (`F0`) to try the service, and upgrade later to a paid tier for production.
-- Access to the Azure AI Vision Face Client SDK for mobile (IOS and Android). To get started, you need to apply for the [Face Recognition Limited Access features](https://customervoice.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR7en2Ais5pxKtso_Pz4b1_xUQjA5SkYzNDM4TkcwQzNEOE1NVEdKUUlRRCQlQCN0PWcu) to get access to the SDK. For more information, see the [Face Limited Access](/legal/cognitive-services/computer-vision/limited-access-identity?context=%2Fazure%2Fcognitive-services%2Fcomputer-vision%2Fcontext%2Fcontext) page.
+- Access to the Azure AI Vision Face Client SDK for mobile (IOS and Android) and web. To get started, you need to apply for the [Face Recognition Limited Access features](https://customervoice.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR7en2Ais5pxKtso_Pz4b1_xUQjA5SkYzNDM4TkcwQzNEOE1NVEdKUUlRRCQlQCN0PWcu) to get access to the SDK. For more information, see the [Face Limited Access](/legal/cognitive-services/computer-vision/limited-access-identity?context=%2Fazure%2Fcognitive-services%2Fcomputer-vision%2Fcontext%2Fcontext) page.
 
 ## Perform liveness detection
 
-The liveness solution integration involves two different components: a mobile application and an app server/orchestrator.
+The liveness solution integration involves two different components: a frontend mobile/web application and an app server/orchestrator.
 
 ### Integrate liveness into mobile application 
 
-Once you have access to the SDK, follow instruction in the [azure-ai-vision-sdk](https://github.com/Azure-Samples/azure-ai-vision-sdk) GitHub repository to integrate the UI and the code into your native mobile application. The liveness SDK supports both Java/Kotlin for Android and Swift for iOS mobile applications:
+Once you have access to the SDK, follow instruction in the [azure-ai-vision-sdk](https://github.com/Azure-Samples/azure-ai-vision-sdk) GitHub repository to integrate the UI and the code into your native mobile application. The liveness SDK supports Java/Kotlin for Android mobile applications, Swift for iOS mobile applications and JavaScript for web applications:
 - For Swift iOS, follow the instructions in the [iOS sample](https://aka.ms/azure-ai-vision-face-liveness-client-sdk-ios-readme) 
 - For Kotlin/Java Android, follow the instructions in the [Android sample](https://aka.ms/liveness-sample-java) 
+- For JavaScript Web, follow the instructions in the [Web sample](https://aka.ms/liveness-sample-web) 
 
 Once you've added the code into your application, the SDK handles starting the camera, guiding the end-user to adjust their position, composing the liveness payload, and calling the Azure AI Face cloud service to process the liveness payload.
 
@@ -48,9 +49,9 @@ The high-level steps involved in liveness orchestration are illustrated below:
 
 :::image type="content" source="../media/liveness/liveness-diagram.jpg" alt-text="Diagram of the liveness workflow in Azure AI Face." lightbox="../media/liveness/liveness-diagram.jpg":::
 
-1. The mobile application starts the liveness check and notifies the app server. 
+1. The frontend application starts the liveness check and notifies the app server. 
 
-1. The app server creates a new liveness session with Azure AI Face Service. The service creates a liveness-session and responds back with a session-authorization-token.
+1. The app server creates a new liveness session with Azure AI Face Service. The service creates a liveness-session and responds back with a session-authorization-token. More information regarding each request parameter involved in creating a liveness session is referenced in [Liveness Create Session Operation](https://aka.ms/face-api-reference-createlivenesssession).
 
     ```json
     Request:
@@ -70,9 +71,9 @@ The high-level steps involved in liveness orchestration are illustrated below:
     }
     ```
 
-1. The app server provides the session-authorization-token back to the mobile application. 
+1. The app server provides the session-authorization-token back to the frontend application. 
 
-1. The mobile application provides the session-authorization-token during the Azure AI Vision SDK’s initialization. 
+1. The frontend application provides the session-authorization-token during the Azure AI Vision SDK’s initialization. 
 
     ```kotlin
     mServiceOptions?.setTokenCredential(com.azure.android.core.credential.TokenCredential { _, callback ->
@@ -84,11 +85,15 @@ The high-level steps involved in liveness orchestration are illustrated below:
     serviceOptions?.authorizationToken = "<INSERT_TOKEN_HERE>"
     ```
 
+    ```javascript
+    azureAIVisionFaceAnalyzer.token = "<INSERT_TOKEN_HERE>"
+    ```
+
 1. The SDK then starts the camera, guides the user to position correctly and then prepares the payload to call the liveness detection service endpoint. 
 
 1. The SDK calls the Azure AI Vision Face service to perform the liveness detection. Once the service responds, the SDK notifies the mobile application that the liveness check has been completed. 
 
-1. The mobile application relays the liveness check completion to the app server. 
+1. The frontend application relays the liveness check completion to the app server. 
 
 1. The app server can now query for the liveness detection result from the Azure AI Vision Face service. 
 
@@ -122,7 +127,7 @@ The high-level steps involved in liveness orchestration are illustrated below:
                             "width": 409,
                             "height": 395
                         },
-                        "fileName": "video.webp",
+                        "fileName": "content.bin",
                         "timeOffsetWithinFile": 0,
                         "imageType": "Color"
                     },
@@ -175,7 +180,7 @@ Use the following tips to ensure that your input images give the most accurate r
 
 The high-level steps involved in liveness with verification orchestration are illustrated below:
 1.	Provide the verification reference image by either of the following two methods:
-    - The app server provides the reference image when creating the liveness session.
+    - The app server provides the reference image when creating the liveness session. More information regarding each request parameter involved in creating a liveness session with verification is referenced in [Liveness With Verify Create Session Operation](https://aka.ms/face-api-reference-createlivenesswithverifysession).
 
         ```json
         Request:
@@ -204,7 +209,7 @@ The high-level steps involved in liveness with verification orchestration are il
 
         ```
 
-    - The mobile application provides the reference image when initializing the SDK.
+    - The mobile application provides the reference image when initializing the SDK. This is not a supported scenario in the web solution.
 
         ```kotlin
         val singleFaceImageSource = VisionSource.fromFile("/path/to/image.jpg")
@@ -227,7 +232,7 @@ The high-level steps involved in liveness with verification orchestration are il
     --header 'Content-Type: multipart/form-data' \
     --header 'apim-recognition-model-preview-1904: true' \
     --header 'Authorization: Bearer.<session-authorization-token> \
-    --form 'Content=@"video.webp"' \
+    --form 'Content=@"content.bin"' \
     --form 'Metadata="<insert-metadata>"
 
     Response:
@@ -255,7 +260,7 @@ The high-level steps involved in liveness with verification orchestration are il
                             "width": 409,
                             "height": 395
                         },
-                        "fileName": "video.webp",
+                        "fileName": "content.bin",
                         "timeOffsetWithinFile": 0,
                         "imageType": "Color"
                     },
@@ -291,6 +296,7 @@ See the Azure AI Vision SDK reference to learn about other options in the livene
 
 - [Kotlin (Android)](https://aka.ms/liveness-sample-java)
 - [Swift (iOS)](https://aka.ms/azure-ai-vision-face-liveness-client-sdk-ios-readme)
+- [JavaScript (Web)](https://aka.ms/azure-ai-vision-face-liveness-client-sdk-web-readme)
 
 See the Session REST API reference to learn more about the features available to orchestrate the liveness solution.
 

articles/ai-services/computer-vision/overview-identity.md

@@ -91,6 +91,7 @@ Concepts
 Face liveness SDK reference docs:
 - [Java (Android)](https://aka.ms/liveness-sdk-java)
 - [Swift (iOS)](https://aka.ms/liveness-sdk-ios)
+- [JavaScript (Web)](https://aka.ms/liveness-sdk-web)
 
 ## Face recognition
 

articles/ai-services/computer-vision/toc.yml

@@ -378,6 +378,8 @@ items:
         href: https://aka.ms/azure-ai-vision-face-liveness-client-sdk-android-api-reference
       - name: Swift (iOS)
         href: https://aka.ms/azure-ai-vision-face-liveness-client-sdk-ios-api-reference
+      - name: JavaScript (Web)
+        href: https://aka.ms/azure-ai-vision-face-liveness-client-sdk-web-api-reference
 - name: Video Analysis
   items:
   - name: Video Analysis overview