Guide d'apprentissage : Utilisation des API REST

Dans cette rubrique, vous obtiendrez d'abord une vue d'ensemble de haut niveau de l'utilisation des API REST dans les applications Web via XMLHttpRequest() et un proxy. Ensuite, plus tard dans le document, une plongée plus profonde discutera de l'exemple de code. Le premier exemple utilise le Analytics API pour récupérer et afficher dans la barre de contrôle du lecteur Brightcove le nombre de vues de la vidéo actuellement dans le lecteur. Le second exemple, légèrement plus complexe, utilise le Analytics API en conjonction avec le catalogue Brightcove Player pour récupérer les vidéos les plus populaires d'un compte et les afficher dans une liste de lecture. La discussion de code dans ce document sera centrée sur la récupération des données souhaitées à partir de l'API REST correcte.

Vue de haut niveau

Pour utiliser les API REST, vous devez avoir quelques pièces en place. En bref, ils sont :

Code client: Le code client demande des données spécifiques puis les affiche en fonction des exigences de l'application. Le code client sera discuté en détail dans ce document car c'est ce que vous devrez écrire le plus souvent.
Serveur proxy: Pour des raisons de sécurité, les API REST n'acceptent pas les demandes de données directement du client, car cela encouragerait l'envoi d'informations confidentielles, telles que les informations d'identification client, du client. Cela signifie qu'un proxy agira comme intermédiaire entre le client et l'API REST. Le proxy utilisé dans les exemples est écrit en PHP et discuté plus loin dans ce document. Le proxy doit être configuré sur un serveur sous votre contrôle et peut être écrit dans la langue de votre choix. La configuration suggérée du proxy permet de l'écrire une fois et de l'utiliser par l'une des API.
API REST: Brightcove fournit un ensemble complet d'API pour personnaliser, étendre et intégrer à la plate-forme Brightcove. Voir la présentation : Document sur les API Video Cloud pour plus d'informations.

Le diagramme suivant illustre l'interaction entre les trois entités principales du processus pour récupérer les données de l'une des API REST de Brightcove :

Vue d'ensemble des fonctionnalités client

Le code côté client change considérablement en fonction de l'API que vous demandez des données. Comme mentionné ci-dessus, le proxy est une écriture une fois et ne modifiez pas un morceau de code, et les API sont maintenues par Brightcove. C'est pourquoi l'accent dans le document sera mis sur l'apprentissage de modifier le code client pour récupérer les données souhaitées à partir de l'une des API.

Le diagramme ci-dessous met l'accent sur les parties clés du code client, à savoir :

Fonction qui rend le HTTPRequest vers le proxy. Pour éviter toute ambiguïté, la fonction est nommée makeRequest(). Il est illustré sur le côté droit du diagramme ci-dessous.
Le code qui rassemble les informations requises pour la demande. Il est illustré en haut à gauche du diagramme. Ce code est généralement assez simple et utilise des concepts bien connus des programmeurs débutants.
L'appel qui exécute la makeRequest() fonction mentionnée précédemment. Il est illustré en bas à gauche du diagramme. L'appel passe une fonction en makeRequest() tant que paramètre. Ensuite, dans makeRequest() cette fonction est appelée. Ceci est un exemple de fonction de rappel anonymement définie.

Vous voyez les deux sections du diagramme intitulées Activité asynchrone. Bien que représenté dans le diagramme à deux endroits différents, il s'agit en fait de la même activité asynchrone, et représente le temps inconnu qu'il faut pour :

Le client qui envoie la demande au proxy.
Le proxy pour demander des données à partir de l'API.
L'API pour construire le jeu de résultats et le retourner au proxy.
Le proxy pour renvoyer les données au client.

Notez que les flèches de flux logique de la boîte qui appelle makeRequest() (boîte en bas à gauche) semblent indiquer que le code est exécuté à deux moments différents, ce qui est exactement le cas. L'appel à la fonction est effectué, mais la fonction de rappel n'est pas exécutée tant qu'elle n' makeRequest() a pas fait son travail et que la fonction de rappel est exécutée, ce qui renvoie les données demandées au code appelant la fonction.

Vue d'ensemble des fonctionnalités client

Exemple de code pas à pas

Plutôt que de considérer le code comme une seule pièce, il sera présenté et discuté dans des sections. Certaines des sections se rapportent au diagramme ci-dessus.

Code de joueur standard

Cette section de code contient le code d'intégration de base Brightcove Player dans la page.

Lignes 11 à 21 : Code de lecteur Brightcove standard avec l'ajout d'un id attribut ajouté.

	<!doctype html>
	<html>
	
	<head>
		<meta charset="UTF-8">
		<title>Untitled Document</title>
	</head>
	
	<body>
	
	<video-js id="myPlayerID"
		data-video-id="3851380732001"
		data-account="1752604059001"
		data-player="HkAzSmB0l"
		data-embed="default"
		data-application-id
		class="video-js"
		controls
		width="640"
		height="360"></video-js>
	<script src="https://players.brightcove.net/1752604059001/HkAzSmB0l_default/index.min.js"></script>

Préparation à faire l'appel

Cette section de code initialise les variables et se prépare à faire l'appel à makeRequest(). En règle générale, pour une demande de lecture, vous devrez fournir les informations suivantes :

L'URL du proxy que vous utiliserez, par exemple (bien sûr, cela doit être proxy sous votre contrôle) :
```
	https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php
```

L'URL nécessaire pour la requête réelle, normalement construite dynamiquement :

	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4825279519001

La méthode HTTP, par exemple GET.

Un exemple suit :

Ligne 1 : Code standard à attendre jusqu'à ce que le joueur soit prêt à interagir avec.
Lignes 2 à 4 : Créer/définir des valeurs pour les variables nécessaires plus tard dans le code.
Lignes 7 à 12 : Attendez l' loadstart événement pour que l' mediainfo objet soit renseigné. Affectez des variables pour conserver les valeurs nécessaires pour le Analytics API point de terminaison.
Ligne 13 : Définissez la méthode HTTP pour l'appel.

	videojs.getPlayer('myPlayerID').ready(function() {
	  var myPlayer = this,
		accountId = myPlayer.bcinfo.accountId,
		options = {};
	
		// +++ Wait for loadstart event so can use mediainfo object +++
		myPlayer.on('loadstart', function() {
			var videoId = myPlayer.mediainfo.id,
			baseURL = 'https://analytics.api.brightcove.com/v1/alltime/accounts/',
			endPoint = accountId + '/videos/' + videoId;
			options.proxyURL = "https://solutions.brightcove.com/bcls/bcls-proxy/doc-samples-proxy-v2.php";
			options.url = baseURL + endPoint;
			options.requestType = "GET";

Appelez `makeRequest()`

Cette section de code fait l'appel à la makeRequest() fonction. Notez que deux paramètres sont passés. Le premier est l'objet options qui contient des informations pour le point de terminaison, et le second est la fonction de rappel. Rappelez-vous, il s'agit d'un appel asynchrone de sorte que la fonction de rappel définie anonymement ne sera pas appelée tant que les données n'ont pas été renvoyées par l'API REST à la makeRequest() fonction.

Ligne 1 : Appelez la makeRequest() fonction, en passant les valeurs requises pour l'appel dans l' options objet. Dans ce cas, l'objet contient les éléments suivants :
Lignes 3 à 13 : La fonction de rappel est définie comme une fonction anonyme (surlignée en jaune). Rappelez-vous que cette fonction est un paramètre et PAS appelée ici mais plus tard dans le code.
Lignes 6, 8, 10 : console.log() déclarations qui affichent :
- Chaîne JSON brute renvoyée par l'appel d'API.
- Objet JSON généré par la JSON.parse() méthode qui effectue la conversion de chaîne en objet.
- Les vues réelles comptent, extraites de l'objet en utilisant une object.property notation simple.
Ligne 12 : Appelle la fonction qui affiche le nombre de vues dans la barre de contrôle.

La capture d'écran suivante de la console montre les données affichées réelles des console.log instructions :

Traitement des données dans la fonction de rappel

	// +++ Make the request to the Analytics API +++
	// Extract views from data returned by Analytics API
	makeRequest(options, function(viewsRaw) {
	var viewsCount;
	// Remove console.log command for production code
	console.log('viewsRaw', viewsRaw);
	viewsObject = JSON.parse(viewsRaw);
	console.log('viewsObject', viewsObject);
	viewsCount = viewsObject.alltime_video_views;
	console.log('views', viewsCount);
	// Call function to place data in controlbar
	placeCountInControlbar(viewsCount);
	});

`makeRequest()` Fonction réelle

Cette section du document examine le code qui définit réellement la makeRequest() fonction. Le code qui définit la fonction est écrit de telle sorte qu'il n'a PAS besoin d'être modifié, mais utilisé à plusieurs reprises tel quels. Vous pouvez trouver des cas de bord que ce n'est pas vrai, mais pour la grande majorité des utilisations, ce code n'a PAS besoin d'être modifié.

Un concept clé pour comprendre la makeRequest() fonction consiste à acquérir des connaissances sur le comportement de XMLHttpRequest l'objet. Le XMLHttpRequest.onreadystatechange est un gestionnaire d'événements qui est appelé chaque fois que l' readyState attribut change. La valeur qui lui est assignée est le code de fonction du gestionnaire d'événements que vous écrivez. Le tableau suivant montre les valeurs que l' readyState attribut peut avoir et ce que chaque valeur signifie :

Montant	État	Description
`0`	`UNSENT`	Le client a été créé. `open()` pas encore appelé.
`1`	`OPENED`	`open()` a été appelé.
`2`	`HEADERS_RECEIVED`	`send()` a été appelé, et les en-têtes et l'état sont disponibles.
`3`	`LOADING`	Téléchargement ; `responseText` contient des données partielles.
`4`	`DONE`	L'opération est terminée.

Vous verrez dans le code exactement comment le gestionnaire d'événements est utilisé.

Une discussion ligne par ligne du code suit :

Lignes 1 à 6 : Définition de fonction et création de variables. Un point clé est qu'un nouvel XMLHttpRequest objet est créé.
Lignes 8, 26 : Définit la fonction de gestionnaire d'événements pour les readyState modifications.
Lignes 9, 23, 25 : Utilisez un try-catch dans le cas où la requête échoue à un niveau élevé.
Lignes 10, 11 : Utilisez if des instructions pour vous assurer que la demandereadyState est terminée (4) et que l'état est dans la plage 200. Le tableau suivant montre la journalisation de la console readyState et status valeurs dans la définition du gestionnaire d'événements:
Ligne 18 : La fonction de rappel est exécutée. Cela transmet les données renvoyées de l'API à la fonction de rappel comme indiqué dans la section Call MakeRequest () ci-dessus.
Ligne 33 : Définissez le gestionnaire d'événements pour l' XMLHttpRequest.onreadystatechange événement.
Ligne 35 : Initialise la demande sur le proxy.
Ligne 38 : Envoie la requête, qui est asynchrone.

	function makeRequest(options, callback) {
	var httpRequest = new XMLHttpRequest(),
	response,
	requestParams,
	dataString,
	proxyURL = options.proxyURL,
	// response handler
	getResponse = function() {
	try {
		if (httpRequest.readyState === 4) {
			if (httpRequest.status >= 200 && httpRequest.status < 300) {
				response = httpRequest.responseText;
				// some API requests return '{null}' for empty responses - breaks JSON.parse
				if (response === '{null}') {
					response = null;
				}
				// return the response
				callback(response);
			} else {
				alert('There was a problem with the request. Request returned ' + httpRequest.status);
			}
		}
	} catch (e) {
		alert('Caught Exception: ' + e);
	}
	};
	/**
	* set up request data
	* the proxy used here takes the following request body:
	* JSON.stringify(options)
	*/
	// set response handler
	httpRequest.onreadystatechange = getResponse;
	// open the request
	httpRequest.open('POST', proxyURL);
	// set headers if there is a set header line, remove it
	// open and send request
	httpRequest.send(JSON.stringify(options));
	}

Afficher les données renvoyées

Ce code montre comment placer les données renvoyées dans la barre de contrôle. Cette fonction est appelée à la fin de la fonction de rappel, illustrée dans la section Call makeRequest () ci-dessus.

Lignes 5, 16 : Définissez la fonction.
Ligne 6 : Créez une variable pour l' spacer élément dans la barre de contrôle.
Ligne 7 : Créez dynamiquement un div élément.
Ligne 9 : Placez une étiquette et la valeur des vues dans l' div élément nouvellement créé.
Ligne 11 : Utilisez la document.getElementsByClassName() méthode de JavaScript pour obtenir l' spacer élément de la barre de contrôle.
Ligne 13 : Stylisez le spacer pour afficher le total des vues justifiées à droite et vers le bas 10px à partir du haut de la spacer.
Ligne 15 : Ajoutez l'élément nouvellement créé, rempli et stylé au spacer.

	/**
	* Dynamically build a div that is then
	* placed in the controlbar's spacer element
	*/
	function placeCountInControlbar(viewsCount) {
	var spacer,
	newElement = document.createElement('div');
	//Place data in div
	newElement.innerHTML = "Total Views: " + viewsCount;
	//Get the spacer in the controlbar
	spacer = document.getElementsByClassName('vjs-spacer')[0];
	//Right justify content in the spacer and add top margin
	spacer.setAttribute('style', 'justify-content: flex-end; margin-top: 10px');
	//Add the dynamically built div to the spacer in the controlbar
	spacer.appendChild(newElement);
	}

Liste complète des codes

Le code complet et fonctionnel se trouve dans ce dépôt GitHub : display-views-in-controlbar.html.

Débogage simple

Comme vous le voyez, un certain nombre d'éléments sont impliqués lors de l'utilisation des API REST. Cela peut présenter des défis lorsqu'une application ne fonctionne pas correctement. Où commencez-vous le débogage ?

Quelques suggestions simples sont faites dans cette section, et sont un excellent endroit pour commencer votre aventure de débogage. Les deux sections suivantes vous donnent un moyen de voir les informations les plus élémentaires dont vous avez besoin, ce qui est transmis pour passer l'appel et ce qui est retourné.

Vérification des options d'appel

Le code côté client discuté dans ce document consiste essentiellement à fournir les bonnes options à utiliser avec le proxy, et à son tour l'API réelle. Il est donc essentiel de savoir que les options sont correctes pour le bon fonctionnement de votre code. Un moyen simple de le faire est de consigner à la console l' options objet juste avant qu'ils soient passés dans la makeRequest fonction où ils sont utilisés :

Ce que contient l'objet options variera en fonction de ce que vous essayez de faire, mais certains éléments de base seront toujours là, ceux qui sont :

L'ID du compte. Il peut s'agir d'une propriété distincte ou d'une partie de l'URL du point de terminaison de l'API.
L'URL du proxy, qui dépendra de l'endroit où vous stockez votre proxy.
Le type de méthode HTTP, par exemple GET, POST ou PATCH.

URL du point de terminaison de l'API utilisée par le proxy pour effectuer la requête réelle à partir de l'API. Par exemple :

	https://players.api.brightcove.com/v2/accounts/57838016001/players
	https://edge.api.brightcove.com/playback/v1/accounts/1752604059001/videos/5842800655001
	https://analytics.api.brightcove.com/v1/alltime/accounts/1752604059001/videos/4093643993001

D'autres propriétés peuvent être requises dans l'objet options en fonction de la demande d'API. Voici un exemple de ce que vous verriez dans la console lorsque vous enregistrez l'objet options pour faire une demande pour tous les joueurs d'un compte spécifique :

Voici un objet d'options enregistrées un peu plus complexe utilisé lors de la mise à jour des joueurs :

Affichage des données renvoyées

Ce qui est retourné varie selon les données que vous avez demandées, et si une erreur est renvoyée. Mais peu importe ce qui est renvoyé, vous voudrez probablement voir quelles données sont renvoyées. Un moyen simple de le faire est de consigner à la console les response données brutes juste après l'appel à la makeRequest fonction :

Ce qui sera retourné a des possibilités presque infinies, mais voici quelques exemples. Le premier montre le début d'une réponse lorsque vous demandez à tous les joueurs d'un compte :

réponse de débogage à la demande des joueurs

Ceci est un bon exemple de lorsque l'affichage de la réponse peut être extrêmement utile car il montre que les informations du lecteur sont stockées dans un tableau nommé items.

Voici la réponse après la mise à jour des joueurs, en utilisant la méthode PATCH HTTP :

réponse de débogage sur le patch du joueur

Voici une vue plus joliment formatée des données dans la première réponse :

	{
		"id": "1OHQdsTAr",
		"preview_url": "http://preview-players.brightcove.net/v2/accounts/.../master/index.html",
		"preview_embed_in_page": "http://preview-players.brightcove.net/v2/accounts/.../master/in_page.embed",
		"preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/.../master/index.html' ...></iframe>"
	}

Et enfin, voici une réponse très précieuse à partir du moment où une erreur s'est produite. Dans ce cas, un compte était utilisé sans les informations d'identification appropriées :

Autres conseils de dépannage

Si vous rencontrez des problèmes, voici d'autres choses à rechercher.

Obtenir aucune réponse

Il y a quelques choses à vérifier si vous obtenez une réponse vide :

Vérifiez la référence de l'API pour vous assurer que la requête renvoie une réponse. Certains ne renvoient qu'une réponse 201 ou 204 sans contenu (en particulier, mais pas seulement, les requêtes DELETE). Vous devrez ajuster votre code pour gérer ce cas.
Vérifiez la section Réseau des outils de développement de votre navigateur pour vous assurer que vous voyez un appel réussi au proxy (ce serveur peut être temporairement indisponible) :

Section Réseau des outils de développement

Je vois une réponse, mais quand j'essaie de la JSON.parse() faire, j'obtiens une exception.

Quelques possibilités ici :

Voir l'élément précédent - essayer d'analyser une piqûre vide lancera une exception JSON
Regardez la réponse et assurez-vous qu'il s'agit d'une chaîne JSON (commençant par a { ou a [). Il y a quelques cas où une requête peut ne pas retourner JSON - un Analytics API appel, par exemple, si vous définissez le format paramètre sur csv ou xlxs. Encore une fois, si vous faites ce genre de requêtes, vous devrez ajuster votre code pour gérer les réponses non-JSON.
Dans la plupart des cas, les erreurs renvoyées par les API sont également au format JSON, mais il existe quelques exceptions où l'erreur est renvoyée en texte brut ou HTML.

Code proxy

Comme mentionné précédemment, le proxy peut être écrit dans la langue de votre choix. Les exemples de documentation de l'API Brightcove utilisent un proxy écrit en PHP. Comme l'implémentation du proxy dépend donc du langage, le code PHP ci-dessous ne sera pas analysé en détail dans ce document.

Les fonctionnalités de base fournies par un proxy doivent inclure :

Accepter la demande du client.
Obtenez un jeton d'authentification à partir de l'API OAuth.
Envoyez le jeton d'authentification et la demande de données (point de terminaison) à l'API prévue.
Recevez les données de l'API.
Renvoyez les données au client.

	<?php
	/**
	 * proxy for Brightcove RESTful APIs
	 * gets an access token, makes the request, and returns the response
	 * Accessing:
	 *     (note you should **always** access the proxy via HTTPS)
	 *     Method: POST
	 *     request body (accessed via php://input) is a JSON object with the following properties
	 *
	 * {string} url - the URL for the API request
	 * {string} [requestType=GET] - HTTP method for the request
	 * {string} [requestBody] - JSON data to be sent with write requests
	 * {string} [client_id] - OAuth2 client id with sufficient permissions for the request
	 * {string} [client_secret] - OAuth2 client secret with sufficient permissions for the request
	 *
	 * Example:
	 * {
	 *    "url": "https://cms.api.brightcove.com/v1/accounts/57838016001/video",
	 *    "requestType": "PATCH",
	 *    "client_id": "0072bebf-0616-442c-84de-7215bb176061",
	 *    "client_secret": "7M0vMete8vP_Dmb9oIRdUN1S5lrqTvgtVvdfsasd",
	 *    "requestBody": "{\"description\":\"Updated video description\"}"
	 * }
	 *
	 * if client_id and client_secret are not included in the request, default values will be used
	 *
	 * @returns {string} $response - JSON response received from the API
	 */
	
	// security checks
	// if you want to do some basic security checks, such as checking the origin of the
	// the request against some white list, this would be a good place to do it
	// CORS enablement and other headers
	header("Access-Control-Allow-Origin: *");
	header("Content-type: application/json");
	header("X-Content-Type-Options: nosniff");
	header("X-XSS-Protection");
	
	// default account values
	// if you work on one Brightcove account, put in the values below
	// if you do not provide defaults, the client id, and client secret must
	// be sent in the request body for each request
	$default_client_id     = 'YOUR_CLIENT_ID';
	$default_client_secret = 'YOUR_CLIENT_SECRET';
	
	// get request body
	$requestData = json_decode(file_get_contents('php://input'));
	
	// set up access token request
	// check to see if client id and secret were passed with the request
	// and if so, use them instead of defaults
	if (isset($requestData->client_id)) {
			$client_id = $requestData->client_id;
	}
	
	if (isset($requestData->client_secret)) {
			$client_secret = $requestData->client_secret;
	}
	
	$auth_string = "{$client_id}:{$client_secret}";
	
	// make the request to get an access token
	$request = "https://oauth.brightcove.com/v4/access_token?grant_type=client_credentials";
	$curl          = curl_init($request);
	curl_setopt($curl, CURLOPT_USERPWD, $auth_string);
	curl_setopt($curl, CURLOPT_POST, TRUE);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
	curl_setopt($curl, CURLOPT_HTTPHEADER, array(
		'Content-type: application/x-www-form-urlencoded',
	));
	
	$response = curl_exec($curl);
	$curl_info = curl_getinfo($curl);
	$php_log = array(
		"php_error_info" => $curl_info
	);
	$curl_error = curl_error($curl);
	
	curl_close($curl);
	
	// Check for errors
	// it's useful to log as much info as possible for debugging
	if ($response === FALSE) {
		log_error($php_log, $curl_error);
	}
	
	// Decode the response and get access token
	$responseData = json_decode($response, TRUE);
	$access_token = $responseData["access_token"];
	// get request type or default to GET
	$method = "GET";
	if ($requestData->requestType) {
			$method = $requestData->requestType;
	}
	
	// get the URL and authorization info from the form data
	$request = $requestData->url;
	// check for a request body sent with the request
	if (isset($requestData->requestBody)) {
		$data = $requestData->requestBody;
	}
		$curl = curl_init($request);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
		curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
		curl_setopt($curl, CURLOPT_HTTPHEADER, array(
			'Content-type: application/json',
			"Authorization: Bearer {$access_token}"
		));
		switch ($method)
			{
				case "POST":
					curl_setopt($curl, CURLOPT_POST, TRUE);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "PUT":
					// don't use CURLOPT_PUT; it is not reliable
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "PATCH":
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				case "DELETE":
					curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
					if ($requestData->requestBody) {
						curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
					}
					break;
				default:
					// GET request, nothing to do;
			}
		$response = curl_exec($curl);
		$curl_info = curl_getinfo($curl);
		$php_log = array(
			"php_error_info" => $curl_info
		);
		$curl_error = curl_error($curl);
		curl_close($curl);
	
	// Check for errors and log them if any
	// note that logging will fail unless
	// the file log.txt exists in the same
	// directory as the proxy and is writable
	
	if ($response === FALSE) {
		log_error($php_log, $curl_error);
	}
	
	function log_error($php_log, $curl_error) {
		$logEntry = "\nError:\n". "\n".date("Y-m-d H:i:s"). " UTC \n" .$curl_error. "\n".json_encode($php_log, JSON_PRETTY_PRINT);
		$logFileLocation = "log.txt";
		$fileHandle      = fopen($logFileLocation, 'a') or die("-1");
		fwrite($fileHandle, $logEntry);
		fclose($fileHandle);
		echo "Error: there was a problem with your API call"+
		die(json_encode($php_log, JSON_PRETTY_PRINT));
	}
	
	// return the response to the AJAX caller
	echo $response;
	?>

Bien que le code entier du serveur proxy soit montré ci-dessus, il est également situé dans le dépôt GitHub : sample-proxy-apps dans le dossier php .

Exemple 2

Ce deuxième exemple est plus complexe que celui décrit précédemment. Cet exemple montre comment afficher les 10 vidéos les plus populaires d'un compte dans une playlist. Les principales étapes du code sont :

Demande des 10 vidéos avec Analytics API le plus grand nombre de vues dans un compte. Cette étape implique un appel asynchrone utilisant une fonction de rappel.
À partir des Analytics API données renvoyées, extrayez uniquement les ID vidéo et placez-les dans un tableau. Une fonction d'assistance est écrite pour effectuer l'extraction des ID à partir des données renvoyées.
Demandez les objets vidéo complets pour chacune des vidéos de la liste des ID de la baie. Cette étape consiste à boucler la baie et à demander les objets vidéo à l'aide de player.catalog.getVideo(). Bien sûr, cela implique plusieurs appels asynchrones utilisant le catalog. Une fonction d'aide est écrite pour récupérer les objets vidéo basés sur des ID et placer les objets dans un tableau.
Placez le tableau d'objets vidéo dans la liste de lecture d'un lecteur compatible avec la liste de lecture.

Puisque vous êtes maintenant familier avec de nombreux concepts et code spécifique sur la façon d'appeler les API, seul le code qui appelle la makeRequest() fonction est détaillé.

Ligne 2 : Appelez la makeRequest() fonction en passant comme arguments les options requises pour un appel d'API REST réussi, ainsi qu'une fonction de rappel définie de façon anonyme (surlignée en jaune). Cela devrait sembler familier d'en haut. Très important, la makeRequest() fonction appelée EST EXACTEMENT LA MÊME FONCTION UTILISÉE DANS L'EXEMPLE PRÉCÉDENT. Vous pouvez faire la même chose dans votre code. La makeRequest() fonction a été écrite pour être réutilisée avec tous les appels à une API REST Brightcove.
Le mostWatchedVideos paramètre aura la valeur récupérée affectée lorsque la fonction de rappel est utilisée dans la makeRequest() fonction.
Ligne 3 : Créez une variable pour contenir les données renvoyées analysées JSON.
Ligne 5 : Analyse les données renvoyées à convertir si d'une chaîne à un objet.
Ligne 7 : Utilisez la fonction d'aide pour extraire les ID vidéo des données renvoyées. Malheureusement, le Analytics API ne renvoie pas les objets vidéo complets, donc les identifiants sont nécessaires pour accéder aux objets complets.
Lignes 9 à 12 : Appelez la fonction d' getVideoData assistance qui utilise une fonction de rappel pour remplir le videoObjects tableau en fonction des ID passés.
Ligne 11 : Remplissez la liste de lecture avec le tableau d'objets vidéo.

	// +++ Make the CMS API request to get matching video IDs +++
	makeRequest(options, function(mostWatchedVideos) {
		var JSONmostWatchedVideos;
		// Convert response string into JSON
		JSONmostWatchedVideos = JSON.parse(mostWatchedVideos);
		// Extract the needed video IDs into an array
		videoData = extractVideoData(JSONmostWatchedVideos);
		// Get video objects based on array of video IDs
		getVideoData(videoData, function(videoObjects) {
			// Add the most watched videos list to the player as a playlist
			myPlayer.playlist(videoObjects);
		});
	});

Liste complète des codes

L'exemple complet et fonctionnel se trouve dans ce CodePen : La plupart des vidéos regardées dans une liste de lecture.

Contenu de la page

Guide d'apprentissage : Utilisation des API REST

Vue de haut niveau

Vue d'ensemble des fonctionnalités client

Exemple de code pas à pas

Code de joueur standard

Préparation à faire l'appel

Appelez makeRequest()

makeRequest() Fonction réelle

Afficher les données renvoyées

Liste complète des codes

Débogage simple

Vérification des options d'appel

Affichage des données renvoyées

Autres conseils de dépannage

Code proxy

Exemple 2

Liste complète des codes

Appelez `makeRequest()`

`makeRequest()` Fonction réelle