连接到 Amazon DCV 服务器并获取第一帧 - Amazon DCV
第 1 步：准备HTML页面步骤 2：验证身份、连接并获取第一帧奖励：自动创建HTML登录表单

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

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

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

第 1 步：准备HTML页面

在您的网页中，您必须加载所需的 JavaScript 模块，并且必须在您希望亚马逊DCV网络客户端SDK从远程亚马逊DCV服务器提取内容流的id位置添加一个有效的<div>HTML元素。

例如：

<!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：验证身份、连接并获取第一帧

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

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

import "./dcvjs/dcv.js"

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

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

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

let auth,
    connection,
    serverUrl;

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

console.log("Using Amazon 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 函数是在身份验证过程中必须定义的必需回调函数。

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

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

如果身份验证成功，success回调函数将收到一组情侣，其中包括允许my_dcv_user用户在 Amazon 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);
}

连接到 Amazon DCV 服务器。当从 Amazon 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，该属性是一个对象数组，Amazon 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));
}