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

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

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

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

第 1 步：准备您的 HTML 页面

在您的网页中，您必须加载所需的 JavaScript 模块，你必须添加一个<div>具有有效的 HTML 元素id你想让 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 版本，然后在页面加载时调用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, 和successfunctions 是必需的回调函数，必须在身份验证过程中定义。

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

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

如果身份验证成功，successcallback 函数接收包含会话 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对象在以下情况下返回promptCredentials回调函数被调用。它包含一个名为的属性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));
}