Connect 到 NICE DCV 服务器并获取第一帧 - NICE DCV
第 1 步：准备您的 HTML 页面第 2 步：验证、连接并获取第一帧奖金：自动创建 HTML 登录表单
AWS 文档中描述的 AWS 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅中国的 AWS 服务入门。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

Connect 到 NICE DCV 服务器并获取第一帧

以下教程介绍如何为自定义 Web 客户端准备 HTML 页面，如何验证并连接到 NICE DCV 服务器，以及如何从 NICE DCV 会话接收流内容的第一帧。

第 1 步：准备您的 HTML 页面

在您的网页中，您必须加载所需的 JavaScript 模块，并且必须添加<div>带有有效id，您希望 NICE DCV Web 客户端 SDK 从远程 NICE DCV 服务器绘制内容流。

例如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>DCV first connection</title>
    </head>
    <body>
        <script type="module" src="main.js"></script>
        <div id="dcv-display"></div>
    </body>
</html>

第 2 步：验证、连接并获取第一帧

本节介绍如何完成用户身份验证过程，如何连接 NICE DCV 服务器，以及如何从 NICE DCV 服务器接收第一帧内容。

首先，导入 NICE DCV Web 客户端 SDK 作为通用模块定义 (UMD) 模块。

import "./dcvjs/dcv.js"

定义用于存储身份验证对象、连接对象和 NICE DCV 服务器 URL 的变量。

let auth,
    connection,
    serverUrl;

在脚本加载时，记录 NICE DCV Web 客户端 SDK 版本，并在页面加载时调用mainfunction. 

console.log("Using NICE DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);

这些区域有：main函数设置日志级别并启动身份验证过程。 

function main () {
    console.log("Setting log level to INFO");
    dcv.setLogLevel(dcv.LogLevel.INFO);

    serverUrl = "https://your-dcv-server-url:port/";

    console.log("Starting authentication with", serverUrl);

    auth = dcv.authenticate(
        serverUrl,
        {
            promptCredentials: onPromptCredentials,
            error: onError,
            success: onSuccess
        }
    );
}

这些区域有：promptCredentials、error, 和success函数是必须在身份验证过程中定义的强制回调函数。

如果 NICE DCV 服务器提示输入凭据，promptCredentials回调函数从 NICE DCV 服务器接收请求的凭据质询。如果 NICE DCV 服务器配置为使用系统身份验证，则必须以用户名和密码的形式提供凭据。以下代码示例假定用户名是my_dcv_user并且密码是my_password。

如果身份验证失败，error回调函数从 NICE DCV 服务器接收错误对象。

如果身份验证成功，则success回调函数接收包含会话 ID（sessionId）和授权令牌（authToken）为每个会话my_dcv_user用户可以连接到 NICE DCV 服务器上。以下代码示例调用 connect 函数并连接到数组中返回的第一个会话。 

function onPromptCredentials(auth, challenge) {
    // Let's check if in challege we have a username and password request
    if (challengeHasField(challenge, "username") && challengeHasField(challenge, "password")) {
        auth.sendCredentials({username: "my_dcv_user", password: "my_password"})
    } else {
        // Challenge is requesting something else...
    }
}

function challengeHasField(challenge, field) {
    return challenge.requiredCredentials.some(credential => credential.name === field);
}

function onError(auth, error) {
    console.log("Error during the authentication: ", error.message);
}

// We connect to the first session returned
function onSuccess(auth, result) {
    let {sessionId, authToken} = {...result[0]};

    connect(sessionId, authToken);
}

Connect NICE DCV 服务器。这些区域有：firstFrame从 NICE DCV 服务器接收第一帧时调用回调方法。 

function connect (sessionId, authToken) {
    console.log(sessionId, authToken);

    dcv.connect({
        url: serverUrl,
        sessionId: sessionId,
        authToken: authToken,
        divId: "dcv-display",
        callbacks: {
            firstFrame: () => console.log("First frame received")
        }
    }).then(function (conn) {
        console.log("Connection established!");
        connection= conn;
    }).catch(function (error) {
        console.log("Connection failed with error " + error.message);
    });
}

奖金：自动创建 HTML 登录表单

这些区域有：challenge对象时返回promtCredentials回调函数。它包含一个名为requiredCredentials这是一个对象数组-NICE DCV 服务器请求的每个凭据一个对象。每个对象都包括所请求凭据的名称和类型。您可以将challenge和requiredCredentials对象来自动创建 HTML 登录表单。

以下代码示例演示如何执行此操作。

function submitCredentials (e) {
    var credentials = {};
    fieldSet.childNodes.forEach(input => credentials[input.id] = input.value);
    auth.sendCredentials(credentials);
    e.preventDefault();
}

function createLoginForm () {
    var submitButton = document.createElement("button");

    submitButton.type = "submit";
    submitButton.textContent = "Login";

    form = document.createElement("form");
    fieldSet = document.createElement("fieldset");

    form.onsubmit = submitCredentials;
    form.appendChild(fieldSet);
    form.appendChild(submitButton);

    document.body.appendChild(form);
}

function addInput (name) {
    var type = name === "password" ? "password" : "text";

    var inputField = document.createElement("input");
    inputField.name = name;
    inputField.id = name;
    inputField.placeholder = name;
    inputField.type = type;
    fieldSet.appendChild(inputField);
}

function onPromptCredentials (_, credentialsChallenge) {
    createLoginForm();
    credentialsChallenge.requiredCredentials.forEach(challenge => addInput(challenge.name));
}