Conéctate a un DCV servidor de Amazon y obtén el primer fotograma - Amazon DCV
Paso 1: Prepara tu página HTMLPaso 2: Autenticar, conectar y obtener el primer fotogramaBonificación: crea automáticamente un formulario de HTML inicio de sesión

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Conéctate a un DCV servidor de Amazon y obtén el primer fotograma

El siguiente tutorial te muestra cómo preparar tu HTML página para tu cliente web personalizado, cómo autenticarte y conectarte a un DCV servidor de Amazon y cómo recibir el primer fotograma del contenido reproducido en streaming de la sesión de AmazonDCV.

Paso 1: Prepara tu página HTML

En su página web, debe cargar los JavaScript módulos necesarios y debe añadir un <div> HTML elemento con un id lugar válido en el que desee que Amazon DCV Web Client SDK dibuje el flujo de contenido desde el DCV servidor remoto de Amazon.

Por ejemplo:

<!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>

Paso 2: Autenticar, conectar y obtener el primer fotograma

En esta sección se muestra cómo completar el proceso de autenticación de usuarios, cómo conectar el DCV servidor de Amazon y cómo recibir el primer marco de contenido del DCV servidor de Amazon.

En primer lugar, desde el index.js archivo, importe el Amazon DCV Web ClientSDK. Se puede importar como un módulo de definición de módulo universal (UMD), de la siguiente manera: 

import "./dcvjs/dcv.js"

De lo contrario, a partir de la versión1.1.0, también se puede importar como un ECMAScript Module (ESM) desde el paquete correspondiente, de la siguiente manera: 

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

Defina las variables que se utilizarán para almacenar el objeto Authentication, el objeto Connection y el DCV servidor AmazonURL.

let auth,
    connection,
    serverUrl;

Al cargar el script, registre la SDK versión de Amazon DCV Web Client y, al cargar la página, llame a la main función. 

console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);

La función main establece el nivel de registro e inicia el proceso de autenticación. 

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
    }
  );
}

Las funciones promptCredentials, error y success son funciones de devolución de llamada obligatorias que deben definirse en el proceso de autenticación.

Si el DCV servidor de Amazon solicita credenciales, la función de promptCredentials devolución de llamada recibe la impugnación de credenciales solicitada del servidor de Amazon. DCV Si el DCV servidor de Amazon está configurado para usar la autenticación del sistema, se deben proporcionar las credenciales de inicio de sesión. En los siguientes ejemplos de código se da por sentado que el nombre de usuario es my_dcv_user y que la contraseña es my_password.

Si la autenticación falla, la función de error devolución de llamada recibe un objeto de error del DCV servidor de Amazon.

Si la autenticación se realiza correctamente, la función de success devolución de llamada recibe una matriz de parejas que incluye el identificador de sesión (sessionId) y los tokens de autorización (authToken) de cada sesión a la que el my_dcv_user usuario puede conectarse en el servidor de AmazonDCV. El siguiente ejemplo de código llama a la función connect y se conecta a la primera sesión devuelta en la matriz.

nota

En el siguiente ejemplo de código, sustituya MY_DCV_USER por su propio nombre de usuario y MY_PASSWORD por su propia contraseña.

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);
}

Conéctate al DCV servidor de Amazon. El método firstFrame callback se invoca cuando se recibe el primer fotograma del DCV servidor de Amazon. 

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);
  });
}

Bonificación: crea automáticamente un formulario de HTML inicio de sesión

El objeto challenge se devuelve cuando se llama a la función de devolución de llamada promptCredentials. Incluye una propiedad denominada requiredCredentials matriz de objetos, un objeto por cada credencial que solicite el DCV servidor de Amazon. Cada objeto incluye el nombre y el tipo de la credencial solicitada. Puede usar los requiredCredentials objetos challenge y para crear automáticamente un formulario de inicio de HTML sesión.

El siguiente ejemplo de código muestra cómo hacerlo.

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));
}