Connect 到 NICE DCV 服务器并获得第一帧 - NICE DCV
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 客户端 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 客户端 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对象在promptCredentials调用回调函数。它包括一个名为requiredCredentials这是一组对象-NICE DCV 服务器请求的每个凭据一个对象。每个对象都包含所请求的凭据的名称和类型。您可以使用challengerequiredCredentials对象以自动创建 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)); }