Connect 到 NICE DCV 服务器并获取第一帧 - NICE DCV
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 } ); }

这些区域有:promptCredentialserror, 和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 服务器请求的每个凭据一个对象。每个对象都包括所请求凭据的名称和类型。您可以将challengerequiredCredentials对象来自动创建 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)); }