Integrar recursos de mídia

Você pode integrar recursos de dispositivo nativo, como câmera e microfone com seu aplicativo Teams. Para integração, você pode usar a biblioteca de cliente JavaScript do Microsoft Teams que fornece as ferramentas necessárias para que seu aplicativo acesse as permissões de dispositivo de um usuário. Use APIs de recursos de mídia adequadas para integrar os recursos do dispositivo, como câmera e microfone com a plataforma do Teams em seu aplicativo Microsoft Teams, e criar uma experiência mais avançada. O recurso de mídia está disponível para cliente Web, área de trabalho e dispositivos móveis do Teams. Para integrar recursos de mídia, você deve atualizar o arquivo de manifesto do aplicativo e chamar as APIs de recursos de mídia.

Para uma integração eficaz, você deve ter um bom entendimento dos trechos de código para chamar as respectivas APIs, o que permite usar recursos de mídia nativa. É importante se familiarizar com os erros de resposta da API para lidar com os erros no seu aplicativo do Teams.

Vantagens

A vantagem de integrar recursos de dispositivo em seus aplicativos do Teams é que ele usa controles nativos do Teams para fornecer uma experiência avançada e imersiva para seus usuários. Os cenários a seguir mostram as vantagens dos recursos de mídia:

• Permita que o usuário capture os modelos aproximados desenhados em um quadro de comunicações físico por meio do celular e use as imagens capturadas como opções de votação no chat em grupo do Teams.

• Permita que o usuário grave a mensagem de áudio e anexe-a a um tíquete de incidente.

• Permita que o usuário digitalize os documentos físicos do smartphone para registrar uma reclamação de seguro de carro.

• Permita que o usuário grave um vídeo em um local de trabalho e carregue-o para atendimento.

Atualizar manifesto

Atualize seu aplicativo do Teams do arquivo manifest.json do adicionando a devicePermissions propriedade e especificando media. Ele permite que seu aplicativo solicite as permissões necessárias dos usuários antes que eles comecem a usar a câmera para capturar a imagem, abra a galeria para selecionar uma imagem a ser enviada como anexo ou use o microfone para gravar a conversa. A atualização para o manifesto do aplicativo é a seguinte:

"devicePermissions": [
    "media",
],

APIs de funcionalidade de mídia

As APIs captureImage, selectMedia, getMedia e viewImages permitem que você use recursos de mídia nativos da seguinte maneira:

• Use o microfone para permitir que os usuários gravem áudio (grave 10 minutos de conversa) do dispositivo.
• Use o controle de câmera nativo para permitir que os usuários capturem e anexem imagens e capturem vídeos (gravem até cinco minutos de vídeo) em qualquer lugar.
• Use o suporte da galeria nativo para permitir que os usuários selecionem imagens do dispositivo como anexos.
• Use o controle do visualizador de imagens nativo para visualizar várias imagens ao mesmo tempo.
• Suporta transferência de imagens grandes (de 1 MB a 50 MB) através da ponte TeamsJS.
• Suporte a recursos avançados de imagem , permitindo que os usuários visualizem e editem imagens.
• Digitalize documentos, quadro de comunicações e cartões de visita pela câmera.

A tabela a seguir lista o conjunto de APIs para habilitar os recursos de mídia do dispositivo:

A imagem a seguir mostra a experiência do aplicativo Web da API para o recurso de captureImage imagem no Teams móvel:

• Inicie a câmera e capture a imagem para compartilhar:

  

• Selecione a mídia da galeria para compartilhar:

  

Você pode exibir a experiência do aplicativo Web da API para área selectMedia de trabalho e dispositivos móveis do Teams.

Tratamento de erros

Certifique-se de lidar com esses erros adequadamente no aplicativo Teams. A tabela a seguir lista os códigos de erro e as descrições sob as quais os erros são gerados:

Trechos de código

• Chame captureImage a API para iniciar e capturar imagem usando a câmera:

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

• API de chamada selectMedia para capturar e selecionar mídia do dispositivo, câmera ou galeria:

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

• Chame selectMedia a API para capturar vídeos usando a câmera:

  • Capturando vídeos com fullscreen: true:

    fullscreen: true Abre a câmera no modo de gravação de vídeo. Ele fornece uma opção para usar a câmera frontal e traseira e também fornece outros atributos, conforme mencionado no exemplo a seguir:

    
      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
     }
    

  • Capturando vídeos com fullscreen: false:

    fullscreen: false Abre a câmera no modo de gravação de vídeo e usa apenas a câmera frontal. Normalmente fullscreen: false é usado quando o usuário deseja gravar vídeo enquanto lê o conteúdo na tela do dispositivo.

    Este modo também suporta isStopButtonVisible: true que adiciona um botão de parada na tela que permite ao usuário parar a gravação. Se isStopButtonVisible: false, a gravação poderá ser interrompida chamando a API mediaController ou quando a duração da gravação atingir maxDuration o tempo especificado.

    Veja a seguir um exemplo para interromper a gravação com maxDuration o tempo especificado:

       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
      }
    

    Veja a seguir um exemplo para interromper a gravação chamando a 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
      }
    

• Chame selectMedia a API para capturar imagens e vídeo usando a câmera:

  Essa API permite que os usuários selecionem entre capturar uma imagem ou um vídeo.

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

• Chame getMedia a API para recuperar mídia grande em partes:

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

• Chamar viewImages API pela ID, que é retornada pela selectMedia 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");
  }
  

• Chamar viewImages API por 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");
  }
  

• Chamada selectMedia e getMedia APIs para gravação de áudio pelo microfone:

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

Download de arquivo no Teams móvel

Você pode configurar um aplicativo para permitir que os usuários baixem arquivos do modo de exibição da Web para o dispositivo móvel.

Para habilitar, siga estas etapas:

1. Atualize seu aplicativo do Teams manifest.json arquivo adicionando a devicePermissions propriedade e especificando media , conforme mostrado no manifesto de atualização.

2. Use o seguinte formato e adicione o atributo de download HTML à página da Web:

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

Confira também

• Funcionalidades de dispositivo
• Integrar o recurso de leitor de código QR ou de barras no Teams
• Integrar funcionalidades de localização no Teams
• Integrar o Seletor de Pessoas
• Requisitos e considerações para bots de mídia hospedados pelo aplicativo
• Esquema de manifesto do aplicativo para o Teams
• Planejar guias responsivas para o aplicativo móvel do Teams