Intégrer les fonctionnalités médias

Vous pouvez intégrer des fonctionnalités d’appareil natives, telles que la caméra et le microphone, à votre application Teams. Pour l’intégration, vous pouvez utiliser la bibliothèque de client JavaScript Microsoft Teams qui fournit les outils nécessaires pour que votre application accède aux autorisations d’appareil d’un utilisateur. Utilisez les API de fonctionnalité multimédia appropriées pour intégrer les fonctionnalités de l’appareil, telles que la caméra et le microphone, à la plateforme Teams au sein de votre application Microsoft Teams, et créer une expérience plus riche. La fonctionnalité multimédia est disponible pour le client web, le bureau et les appareils mobiles Teams. Pour intégrer des fonctionnalités multimédias, vous devez mettre à jour le fichier manifeste de l’application et appeler les API de fonctionnalité multimédia.

Pour une intégration efficace, vous devez avoir une bonne compréhension des extraits de code pour appeler les API respectives, ce qui vous permet d’utiliser des fonctionnalités multimédias natives. Il est important de vous familiariser avec les Erreurs de réponse de l'API pour gérer les erreurs dans votre application Teams.

Avantages

L’avantage de l’intégration des fonctionnalités d’appareil dans vos applications Teams est qu’elle utilise des contrôles Teams natifs pour fournir une expérience riche et immersive à vos utilisateurs. Les scénarios suivants présentent les avantages des fonctionnalités multimédias :

• Autorisez l’utilisateur à capturer les maquettes brutes dessinées sur un tableau blanc physique via son téléphone mobile et à utiliser les images capturées comme options de sondage dans la conversation de groupe Teams.

• Autorisez l’utilisateur à enregistrer le message audio et à l’attacher à un ticket d’incident.

• Permettre à l’utilisateur de scanner les documents physiques à partir du smartphone pour déposer une demande d’assurance automobile.

• Autorisez l’utilisateur à enregistrer une vidéo sur un site de travail et à la charger pour la présence.

Mise à jour du manifeste

Mettez à jour le fichier manifest.json de votre application Teams en ajoutant la devicePermissionspropriété et en spécifiantmedia. Il permet à votre application de demander les autorisations requises aux utilisateurs avant de commencer à utiliser l’appareil photo pour capturer l’image, d’ouvrir la galerie pour sélectionner une image à envoyer en tant que pièce jointe ou d’utiliser le microphone pour enregistrer la conversation. La mise à jour du manifeste de l’application est la suivante :

"devicePermissions": [
    "media",
],

API de capacité média

Les API captureImage, selectMedia, getMedia et viewImages vous permettent d’utiliser les fonctionnalités multimédias natives comme suit :

• Utilisez le microphone natif pour permettre aux utilisateurs d’enregistrer du son (enregistrement de 10 minutes de conversation) à partir de l’appareil.
• Utilisez le contrôle d’appareil photo natif pour permettre aux utilisateurs de capturer et de joindre des images et de capturer des vidéos (enregistrer jusqu’à cinq minutes de vidéo) en déplacement.
• Utilisez la prise en charge de la galerie native pour permettre aux utilisateurs de sélectionner des images d’appareil en tant que pièces jointes.
• Utilisez le contrôle visionneuse d’images natives pour afficher un aperçu simultané de plusieurs images .
• Prise en charge du transfert d’images volumineuses (de 1 Mo à 50 Mo) via le pont TeamsJS.
• Prise en charge des fonctionnalités d’image avancées en permettant aux utilisateurs d’afficher un aperçu et de modifier des images.
• Scannez les documents, le tableau blanc et les cartes de visite via l’appareil photo.

Le tableau suivant répertorie un ensemble d’API permettant d’activer les fonctionnalités multimédias de votre appareil :

L’image suivante illustre l’expérience d’application web de l’API captureImage pour la fonctionnalité d’image sur teams mobile :

• Lancez l’appareil photo et capturez l’image à partager :

  

• Sélectionnez un média dans la galerie à partager :

  

Vous pouvez afficher l’expérience d’application web de l’API selectMedia pour le bureau et les appareils mobiles Teams.

Gestion des erreurs

Veillez à gérer ces erreurs de manière appropriée dans votre application Teams. Le tableau suivant répertorie les codes d’erreur et les descriptions sous lesquels les erreurs sont générées :

Extraits de code

• Appelez captureImage l’API pour lancer et capturer une image à l’aide de l’appareil photo :

  microsoftTeams.media.captureImage((error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
  // If there's any error, an alert shows the error message/code
  if (error) {
    if (error.message) {
      alert(" ErrorCode: " + error.errorCode + error.message);
    } else {
      alert(" ErrorCode: " + error.errorCode);
    }
  } else if (attachments) {
    let y = attachments[0];
    img.src = ("data:" + y.mimeType + ";base64," + y.preview);
  }
  });
  

• Appelez selectMedia l’API pour capturer et sélectionner des médias à partir de la caméra ou de la galerie de l’appareil :

  let imageProp: microsoftTeams.media.ImageProps = {
      sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
      startMode: microsoftTeams.media.CameraStartMode.Photo,
      ink: false,
      cameraSwitcher: false,
      textSticker: false,
      enableFilter: true,
  };
  let mediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.Image,
      maxMediaCount: 10,
      imageProps: imageProp
  };
  microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
      if (error) {
          if (error.message) {
              alert(" ErrorCode: " + error.errorCode + error.message);
          } else {
              alert(" ErrorCode: " + error.errorCode);
          }
      }
      if (attachments) {
          let y = attachments[0];
          img.src = ("data:" + y.mimeType + ";base64," + y.preview);
      }
  });
  

• Appeler l’API selectMedia pour capturer des vidéos à l’aide de l’appareil photo :

  • Capture de vidéos avec fullscreen: true:

    fullscreen: true ouvre la caméra en mode enregistrement vidéo. Il offre une option permettant d’utiliser à la fois la caméra avant et arrière et fournit également d’autres attributs comme indiqué dans l’exemple suivant :

    
      const defaultLensVideoProps: microsoftTeams.media.VideoProps = {
          sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
          startMode: microsoftTeams.media.CameraStartMode.Video,
          cameraSwitcher: true,
          maxDuration: 30
     }
      const defaultLensVideoMediaInput: microsoftTeams.media.MediaInputs = {
          mediaType: microsoftTeams.media.MediaType.Video,
          maxMediaCount: 6,
          videoProps: defaultLensVideoProps
     }
    

  • Capture de vidéos avec fullscreen: false:

    fullscreen: false ouvre la caméra en mode d’enregistrement vidéo et utilise la caméra avant uniquement. Est généralement fullscreen: false utilisé lorsque l’utilisateur souhaite enregistrer une vidéo lors de la lecture de contenu sur l’écran de l’appareil.

    Ce mode prend également en charge isStopButtonVisible: true l’ajout d’un bouton d’arrêt à l’écran qui permet à l’utilisateur d’arrêter l’enregistrement. Si isStopButtonVisible: falsela valeur est , l’enregistrement peut être arrêté en appelant l’API mediaController ou lorsque la durée d’enregistrement a atteint maxDuration l’heure spécifiée.

    Voici un exemple d’arrêt de l’enregistrement avec maxDuration une heure spécifiée :

       const defaultNativeVideoProps: microsoftTeams.media.VideoProps = {
          maxDuration: 30,
          isFullScreenMode: false,
          isStopButtonVisible: false,
          videoController: new microsoftTeams.media.VideoController(videoControllerCallback)
      }
       const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = {
          mediaType: microsoftTeams.media.MediaType.Video,
          maxMediaCount: 1,
          videoProps: defaultNativeVideoProps
      }
    

    Voici un exemple pour arrêter l’enregistrement en appelant l’API mediaController :

       const defaultNativeVideoProps: microsoftTeams.media.VideoProps = {
          videoController.stop(),
          isFullScreenMode: false,
          isStopButtonVisible: false,
          videoController: new microsoftTeams.media.VideoController(videoControllerCallback)
      }
       const defaultNativeVideoMediaInput: microsoftTeams.media.MediaInputs = {
          mediaType: microsoftTeams.media.MediaType.Video,
          maxMediaCount: 1,
          videoProps: defaultNativeVideoProps
      }
    

• Appelez selectMedia l’API pour capturer des images et des vidéos à l’aide de l’appareil photo :

  Cette API permet aux utilisateurs de choisir entre la capture d’une image ou d’une vidéo.

  
    const defaultVideoAndImageProps: microsoftTeams.media.VideoAndImageProps = {
      sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
      startMode: microsoftTeams.media.CameraStartMode.Photo,
      ink: true,
      cameraSwitcher: true,
      textSticker: true,
      enableFilter: true,
      maxDuration: 30
    }
  
    const defaultVideoAndImageMediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.VideoAndImage,
      maxMediaCount: 6,
      videoAndImageProps: defaultVideoAndImageProps
    }
  
    let videoControllerCallback: microsoftTeams.media.VideoControllerCallback = {
      onRecordingStarted() {
        console.log('onRecordingStarted Callback Invoked');
      },
    };
  
    microsoftTeams.media.selectMedia(defaultVideoAndImageMediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
      if (error) {
          if (error.message) {
              alert(" ErrorCode: " + error.errorCode + error.message);
          } else {
              alert(" ErrorCode: " + error.errorCode);
          }
      }
  
      var videoElement = document.createElement("video");
      attachments[0].getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
      if (blob) {
          if (blob.type.includes("video")) {
              videoElement.setAttribute("src", URL.createObjectURL(blob));
          }
      }
      if (error) {
          if (error.message) {
              alert(" ErrorCode: " + error.errorCode + error.message);
          } else {
              alert(" ErrorCode: " + error.errorCode);
          }
      }
      });
      });
  
  

• Appelez getMedia l’API pour récupérer des médias volumineux en blocs :

  let media: microsoftTeams.media.Media = attachments[0]
  media.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
      if (blob) {
          if (blob.type.includes("image")) {
              img.src = (URL.createObjectURL(blob));
          }
      }
      if (error) {
          if (error.message) {
              alert(" ErrorCode: " + error.errorCode + error.message);
          } else {
              alert(" ErrorCode: " + error.errorCode);
          }
      }
  });
  

• Appelez l’API viewImages par ID, qui est retourné par selectMedia l’API :

  // View images by id:
  // Assumption: attachmentArray = select Media API Output
  let uriList = [];
  if (attachmentArray && attachmentArray.length > 0) {
      for (let i = 0; i < attachmentArray.length; i++) {
          let file = attachmentArray[i];
          if (file.mimeType.includes("image")) {
              let imageUri = {
                  value: file.content,
                  type: 1,
              }
              uriList.push(imageUri);
          } else {
              alert("File type is not image");
          }
      }
  }
  if (uriList.length > 0) {
      microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
          if (error) {
              if (error.message) {
                  output(" ErrorCode: " + error.errorCode + error.message);
              } else {
                  output(" ErrorCode: " + error.errorCode);
              }
          }
      });
  } else {
      output("Url list is empty");
  }
  

• Appeler l’API viewImages par URL :

  // View Images by URL:
  // Assumption 2 urls, url1 and url2
  let uriList = [];
  if (URL1 != null && URL1.length > 0) {
      let imageUri = {
          value: URL1,
          type: 2,
      }
      uriList.push(imageUri);
  }
  if (URL2 != null && URL2.length > 0) {
      let imageUri = {
          value: URL2,
          type: 2,
      }
      uriList.push(imageUri);
  }
  if (uriList.length > 0) {
      microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
          if (error) {
              if (error.message) {
                  output(" ErrorCode: " + error.errorCode + error.message);
              } else {
                  output(" ErrorCode: " + error.errorCode);
              }
          }
      });
  } else {
      output("Url list is empty");
  }
  

• Appel selectMedia et getMedia API pour l’enregistrement audio via le microphone :

    let mediaInput: microsoftTeams.media.MediaInputs = {
      mediaType: microsoftTeams.media.MediaType.Audio,
      maxMediaCount: 1,
      };
      microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
          if (error) {
              if (error.message) {
                  alert(" ErrorCode: " + error.errorCode + error.message);
              } else {
                  alert(" ErrorCode: " + error.errorCode);
              }
          }
      // If you want to directly use the audio file (for smaller file sizes (~4MB))    if (attachments) {
      let audioResult = attachments[0];
      var videoElement = document.createElement("video");
      videoElement.setAttribute("src", ("data:" + audioResult.mimeType + ";base64," + audioResult.preview));
      audioResult.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
      if (blob) {
          if (blob.type.includes("video")) {
              videoElement.setAttribute("src", URL.createObjectURL(blob));
          }
      }
      if (error) {
          if (error.message) {
              alert(" ErrorCode: " + error.errorCode + error.message);
          } else {
              alert(" ErrorCode: " + error.errorCode);
          }
      }
  });
  });
  

Téléchargement de fichiers sur teams mobile

Vous pouvez configurer une application pour permettre aux utilisateurs de télécharger des fichiers à partir de la vue web sur leur appareil mobile.

Pour activer, procédez comme suit :

1. Mettez à jour votre application Teams manifest.json fichier en ajoutant la devicePermissions propriété et en spécifiant media comme indiqué dans le manifeste de mise à jour.

2. Utilisez le format suivant et ajoutez l’attribut de téléchargement HTML à la page web :

   <a href="path_to_file" download="download">Download</a>
   

Voir aussi

• Fonctionnalités de l’appareil
• Intégrer le code QR ou la fonctionnalité de scanneur de code-barres dans Teams
• Intégrer les fonctionnalités d’emplacement sur Teams
• Intégrer Sélecteur de personnes
• Exigences et considérations relatives aux bots multimédias hébergés par l’application
• Schéma du manifeste d’application pour Teams
• Planifier des onglets réactifs pour Teams mobile