本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
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 版本,然后在页面加载时调用main
function.
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
, 和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 服务器请求的每个凭据一个对象。每个对象都包含所请求的凭据的名称和类型。您可以使用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)); }