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

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 DCV serveur Amazon et obtenez le premier cadre

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

Étape 1 : Préparez votre HTML page

Dans votre page Web, vous devez charger les JavaScript modules nécessaires et ajouter un <div> HTML élément valide à l'idendroit où vous souhaitez que le client DCV Web Amazon SDK trace le flux de contenu depuis le DCV serveur Amazon 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 des utilisateurs, comment connecter le DCV serveur Amazon et comment recevoir le premier cadre de contenu du DCV serveur Amazon.

Tout d'abord, à partir du index.js fichier, importez le client DCV Web AmazonSDK. Il peut être importé soit en tant que module Universal Module Definition (UMD), 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 le DCV serveur AmazonURL.

let auth,
    connection,
    serverUrl;

Lors du chargement du script, enregistrez la SDK version d'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 DCV serveur Amazon demande des informations d'identification, la fonction de promptCredentials rappel reçoit la demande d'identification du serveur Amazon. DCV Si le DCV serveur Amazon 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 DCV serveur Amazon.

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

Bonus : créez automatiquement un formulaire HTML de connexion

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 DCV serveur Amazon. 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 HTML de connexion.

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