Ouitube NPM | npm.io

API Ouitube

L'API Ouitube est une bibliothèque JavaScript qui permet d'interagir avec l'API Ouitube pour récupérer, ajouter, mettre à jour et supprimer des vidéos.

Installation

Pour utiliser cette API, vous devez d'abord l'installer en utilisant npm :

npm install ouitube

Configuration

Pour démarrer la configuration, merci de créer un compte sur le site de streaming Ouitube (https://ouitube.fr), puis créer une application. Vous obtiendrez ainsi deux clés : clientId et clientSecret qui vous seront utiles pour la suite.

const { Ouitube } = require("ouitube");

const clientId = "Votre_Client_ID";
const clientSecret = "Votre_Client_Secret";


const ouitube = new Ouitube(clientId, clientSecret);

Exemples d'utilisation

Obtenir des vidéos par page

ouitube.request({
  url: "/video",
  method: "GET",
  query: [
    {
      name: "pageNumber",
      value: 5
    },
    {
      name: "pageLimit",
      value: 20
    }
  ]
})
.then(data => {
  console.log("Vidéos par page :", data);
});

Obtenir une video avec son code unique

ouitube.request({
  url: "/video/:uniqueCode",
  method: "GET"
})
.then(video => {
  console.log("Video :", video);
});

Rechercher des vidéos

ouitube.request({
    url: "/video/search",
    method: "GET",
    query: [
      {
        name: "name",
        value: "symfony" // mot clé de recherche
      },
      {
        name: "pageNumber",
        value: 1
      },
      {
        name: "pageLimit",
        value: 2
      }
    ]
  })
  .then(data => {
    console.log("Résultats de recherche :", data);
  });

Ajouter une vidéo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
    
    </style>
</head>
<body>
    
    <h1>Document</h1>
    <div class="container">
        <form id="videoForm" action="/api/videos" method="post" enctype="multipart/form-data">
            <div class="row">
                <div class="col-12 m-1">
                    <label for="name">Name :</label>
                    <input type="text" value="new name" id="name" placeholder="Video Name" name="name" class="form-control" required/>
                </div>
                <div class="col-12 m-1">
                    <label for="description">Description :</label>
                    <input type="text" value="new description" id="description" name="description" placeholder="Video Description" class="form-control" required/>
                </div>
                <div class="col-12 m-1">
                    <label for="file">File :</label>
                    <input type="file" id="file" name="file" class="form-control" required>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Save</button>
        </form>
        

    </div>

    <script type="module" src="./node_modules/ouitube/dist/index.js"></script>
    <script type="module" src="./script.js"></script>

</body>
</html>

const clientId = "Votre_Client_ID";
const clientSecret = "Votre_Client_Secret";

const oui = new Ouitube(clientId, clientSecret);

// Sélectionnez le formulaire
const videoForm = document.getElementById('videoForm');

// Écoutez l'événement de soumission du formulaire
videoForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    // Récupérez les données du formulaire
    const formData = new FormData();

    const video = {
        name: document.getElementById("name").value,
        description: document.getElementById("description").value,
        create_at: new Date()
    }
    const file = document.getElementById("file").files[0]

    console.log({
        video, file
    });

    formData.append('video', JSON.stringify(video))
    formData.append('videoFile', file)

    
    // Effectuez une requête POST pour créer une nouvelle vidéo (vous devez gérer cela côté serveur)
    try {
        const response = await oui.request({
            method: "POST",
            data: formData,
            callback: (progress) =>{ console.log({progress});}
          })
       

          console.log('Video created successfully : ', response);
          alert('Video created successfully.');
        
    } catch (error) {
        // Gérez les erreurs réseau ici
        alert('Network error.');
    }
});

Mettre à jour les informations d'une viedo

const clientId = "Votre_Client_ID";
const clientSecret = "Votre_Client_Secret";

const oui = new Ouitube(clientId, clientSecret);

// video à modifier 
const video = {
  "_id": "65397fbcd05971e9bb10b348",
  "name": "Mise en place de l'inscription avec Angular",
  "description": "new description",
  "videoUri": "/video/read/65397fbcd05971e9bb10b348",
  "uniqueCode": "Ogro80OJ-w_ssY~rHB",
  "author": "65267c24068cd81609006d6c",
  "posterFiles": [
      "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_1.jpg",
      "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_2.jpg",
      "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_3.jpg",
      "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_4.jpg"
  ],
  "duration": "0:7:27",
  "created_at": "2023-10-25T19:28:41.273Z"
}

  oui.request({
    url: "/video/"+video.uniqueCode,
    method: "PUT",
    data: {
      name : "Cours 1 Présentation du framework frontend Angular",
      description : "Angular est un framework frontend Js"
    }
  })
  .then(data => {
    console.log("Vidéo modifiée :", data);
  });

Mettre à jour une vidéo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ouitube API</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
    
    </style>
</head>
<body>
    
    <h1>Update Video</h1>
    <div class="container">
        <form id="videoForm" novalidate>
            <div class="row">
                <div class="col-12 m-1">
                    <label for="name">Name :</label>
                    <input type="text" value="new name" id="name" placeholder="Video Name" name="name" class="form-control" required/>
                </div>
                <div class="col-12 m-1">
                    <label for="description">Description :</label>
                    <input type="text" value="new description" id="description" name="description" placeholder="Video Description" class="form-control" required/>
                </div>
                <div class="col-12 m-1">
                    <label for="file">File :</label>
                    <input type="file" id="file" name="file" class="form-control" required>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Update</button>
        </form>
        

    </div>

    <script type="module" src="./dist/index.js"></script>
    <script type="module" src="./script.js"></script>

</body>
</html>

const clientId = "Votre_Client_ID";
const clientSecret = "Votre_Client_Secret";

const oui = new Ouitube(clientId, clientSecret);

// video à modifier
let video = {
  "_id": "65397fbcd05971e9bb10b348",
  "name": "Cours 1 Présentation du framework frontend Angular",
  "description": "Angular est un framework frontend Js",
  "videoUri": "/video/read/65397fbcd05971e9bb10b348",
  "uniqueCode": "Ogro80OJ-w_ssY~rHB",
  "author": "65267c24068cd81609006d6c",
  "posterFiles": [
    "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_1.jpg",
    "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_2.jpg",
    "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_3.jpg",
    "https://api.ouitube.fr/assets/images/posters/37521827974751698267067025_poster_4.jpg"
  ],
  "duration": "0:7:27",
  "updated_at": "2023-10-26T08:27:58.853Z",
  "created_at": "2023-10-25T19:28:41.273Z"
}
const uniqueCode = video.uniqueCode
oui.request({
  url: "/video/"+uniqueCode,
  method: "GET"
}).then(data => {
  if(data.isSuccess){
    video = data.result

    document.getElementById("name").value = video.name
    document.getElementById("description").value = video.description
  }
})
// Sélectionnez le formulaire
const videoForm = document.getElementById('videoForm');


// Écoutez l'événement de soumission du formulaire
videoForm.addEventListener('submit', async (e) => {
  e.preventDefault();

  // Récupérez les données du formulaire
  
  const video = {
    name: document.getElementById("name").value,
    description: document.getElementById("description").value,
    create_at: new Date()
  }
  const file = document.getElementById("file").files[0]
  
  console.log({
    video, file
  });
  

  let formData
  if(file){
    formData = new FormData();
    formData.append('video', JSON.stringify(video))
    formData.append('videoFile', file)

  }else{
    formData = video
  }


  // Effectuez une requête POST pour créer une nouvelle vidéo (vous devez gérer cela côté serveur)
  try {
    const response = await oui.request({
      url: "/video/"+uniqueCode,
      method: "PUT",
      data: formData,
      callback: (progress) => { console.log({ progress }); }
    })


    console.log('Video updated successfully : ', response);
    alert('Video updated successfully.');

  } catch (error) {
    // Gérez les erreurs réseau ici
    alert('Network error.');
  }
});

Supprimer une vidéo

const clientId = "Votre_Client_ID";
const clientSecret = "Votre_Client_Secret";

const oui = new Ouitube(clientId, clientSecret);

// video à supprimer 
const video = {
    "_id": "65397f7fd05971e9bb10b33c",
    "name": "new name",
    "description": "new description",
    "videoUri": "/video/read/65397f7fd05971e9bb10b33c",
    "uniqueCode": "PkgisSAw_nI~wpm-QM",
    "author": "65267c24068cd81609006d6c",
    "posterFiles":[
        "https://api.ouitube.fr/assets/images/posters/123091311281871698267007392_poster_1.jpg",
        "https://api.ouitube.fr/assets/images/posters/123091311281871698267007392_poster_2.jpg",
        "https://api.ouitube.fr/assets/images/posters/123091311281871698267007392_poster_3.jpg",
        "https://api.ouitube.fr/assets/images/posters/123091311281871698267007392_poster_4.jpg"
    ],
    "duration": "0:3:51",
    "created_at": "2023-10-25T19:28:41.273Z"
}

  oui.request({
    url: "/video/"+video.uniqueCode,
    method: "DELETE",
  })
  .then(data => {
    console.log("Vidéo supprimée :", data);
  });

Documentation supplémentaire

Pour plus d'informations sur les méthodes disponibles, les requêtes et les réponses, veuillez consulter la documentation dans le code source de cette API (https://ouitube.fr/documentation).