Connectez-vous à un serveur Amazon DCV et obtenez la première trame - Amazon DCV
Étape 1 : Préparez votre page HTMLÉtape 2 : Authentification, connexion et obtention de la première imageBonus : créez automatiquement un formulaire de connexion HTML

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Connectez-vous à un serveur Amazon DCV et obtenez la première trame

Le didacticiel suivant explique comment préparer votre page HTML pour votre client Web personnalisé, comment vous authentifier et vous connecter à un serveur Amazon DCV, et comment recevoir la première image de contenu diffusé en continu depuis la session Amazon DCV.

Étape 1 : Préparez votre page HTML

Dans votre page Web, vous devez charger les JavaScript modules nécessaires et ajouter un élément <div> HTML avec un code valide à l'idendroit où vous souhaitez que le SDK Amazon DCV Web Client trace le flux de contenu depuis le serveur Amazon DCV distant.

Par exemple :

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

Étape 2 : Authentification, connexion et obtention de la première image

Cette section explique comment terminer le processus d'authentification utilisateur, comment connecter le serveur Amazon DCV et comment recevoir la première trame de contenu du serveur Amazon DCV.

Tout d'abord, à partir du index.js fichier, importez le SDK Amazon DCV Web Client. Il peut être importé soit en tant que module UMD (Universal Module Definition), comme suit : 

import "./dcvjs/dcv.js"

Sinon, à partir de la version1.1.0, il peut également être importé en tant que ECMAScript module (ESM) à partir du package correspondant, comme suit : 

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

Définissez les variables à utiliser pour stocker l'objet d'authentification, l'objet de connexion et l'URL du serveur Amazon DCV.

let auth,
    connection,
    serverUrl;

Lors du chargement du script, enregistrez la version du SDK Amazon DCV Web Client, et lors du chargement de la page, appelez la main fonction. 

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

La main fonction définit le niveau de journalisation et lance le processus d'authentification. 

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

Les fonctions promptCredentialserror, et sont success des fonctions de rappel obligatoires qui doivent être définies dans le processus d'authentification.

Si le serveur Amazon DCV demande des informations d'identification, la fonction de promptCredentials rappel reçoit la demande d'identification du serveur Amazon DCV. Si le serveur Amazon DCV est configuré pour utiliser l'authentification du système, les informations de connexion doivent être fournies. Les exemples de code suivants supposent que le nom d'utilisateur est my_dcv_user et que le mot de passe estmy_password.

Si l'authentification échoue, la fonction de error rappel reçoit un objet d'erreur du serveur Amazon DCV.

Si l'authentification réussit, la fonction de success rappel reçoit un tableau de couples comprenant l'identifiant de session (sessionId) et les jetons d'autorisation (authToken) pour chaque session à laquelle l'my_dcv_userutilisateur est autorisé à se connecter sur le serveur Amazon DCV. L'exemple de code suivant appelle la fonction de connexion et se connecte à la première session renvoyée dans le tableau.

Note

Dans l'exemple de code suivant, remplacez-le MY_DCV_USER par votre propre nom d'utilisateur et MY_PASSWORD par votre propre mot de passe.

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

Connectez-vous au serveur Amazon DCV. La méthode de firstFrame rappel est appelée lorsque la première trame est reçue du serveur Amazon 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);
  });
}

Bonus : créez automatiquement un formulaire de connexion HTML

L'challengeobjet est renvoyé lorsque la fonction de promptCredentials rappel est appelée. Il inclut une propriété nommée requiredCredentials qui est un tableau d'objets, un objet par identifiant demandé par le serveur Amazon DCV. Chaque objet inclut le nom et le type de l'identifiant demandé. Vous pouvez utiliser les requiredCredentials objets challenge et pour créer automatiquement un formulaire de connexion HTML.

L'exemple de code suivant vous montre comment procéder.

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