本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
连接到 NICE DCV 服务器并获取第一帧
以下教程向您展示了如何为自定义 Web 客户端准备 HTML 页面、如何进行身份验证并连接到 NICE DCV 服务器,以及如何从 NICE DCV 会话接收第一帧流媒体内容。
第 1 步:准备您的 HTML 页面
在您的网页中,必须加载所需的JavaScript模块,并且必须添加一个有效id
的 <div>
HTML 元素,您希望 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 版本,然后在页面加载时调用main
函数。
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
回调函数将收到一组情侣,其中包括允许my_dcv_user
用户在 NICE DCV 服务器上连接的每个会话的会话 ID (sessionId
authToken
) 和授权令牌 ()。以下代码示例调用 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); }
连接到 NICE DCV 服务器。从 NICE 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
,它是一个对象数组——每个 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)); }