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

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

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

以下教程向您展示了如何为自定义 Web 客户端准备 HTML 页面、如何进行身份验证并连接到 NICE DCV 服务器，以及如何从 NICE DCV 会话接收第一帧流媒体内容。

第 1 步：准备您的 HTML 页面

在您的网页中，必须加载所需的JavaScript模块，并且必须添加一个有效id的 <div> HTML 元素，您希望 NICE DCV Web Client SDK 从远程 NICE DCV 服务器提取内容流。

例如：

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <title>DCV first connection</title>
  </head>
  <body style="height: 100%;">
    <div id="root" style="height: 100%;"></div>
    <div id="dcv-display"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

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

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

首先，从index.js文件中导入 NICE DCV Web 客户端 SDK。它可以作为通用模块定义 (UMD) 模块导入，如下所示：

import "./dcvjs/dcv.js"

否则，从版本开始1.1.0，也可以将其作为 ECmaScript 模块 (ESM) 从相应的包中导入，如下所示：

import dcv from "./dcvjs/dcv.js"

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

let auth,
    connection,
    serverUrl;

加载脚本时，记录 NICE DCV Web Client SDK 版本，然后在页面加载时调用main函数。

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
    }
  );
}

promptCredentialserror、和success函数是必需的回调函数，必须在身份验证过程中定义。

如果 NICE DCV 服务器提示输入凭据，则promptCredentials回调函数会收到来自 NICE DCV 服务器的请求凭证质询。如果 NICE DCV 服务器配置为使用系统身份验证，则必须提供登录凭据。以下代码示例假设用户名是my_dcv_user，密码是my_password。

如果身份验证失败，error回调函数会收到来自 NICE DCV 服务器的错误对象。

如果身份验证成功，success回调函数将收到一组情侣，其中包括允许my_dcv_user用户在 NICE DCV 服务器上连接的每个会话的会话 ID (sessionIdauthToken) 和授权令牌 ()。以下代码示例调用 connect 函数并连接到数组中返回的第一个会话。

注意

在以下代码示例中，MY_DCV_USER替换为您自己的用户名MY_PASSWORD和您自己的密码。

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);
}

连接到 NICE DCV 服务器。从 NICE DCV 服务器收到第一帧时，将firstFrame调用回调方法。

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 登录表单

当调用回promptCredentials调函数时，将返回该challenge对象。它包括一个名为的属性requiredCredentials，它是一个对象数组——每个 NICE DCV 服务器请求的凭证对应一个对象。每个对象都包含所请求凭证的名称和类型。您可以使用challenge和requiredCredentials对象自动创建 HTML 登录表单。

以下代码示例向您展示了如何执行此操作。

let form,
    fieldSet;

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));
}