Build the future of communications.
Start building for free

React posts

  • By Sean Coleman
    Twilio Video Reactアプリケーションで短時間でチャット対応ビデオアプリを開発する Twilio Video Reactアプリケーションで短時間でチャット対応ビデオアプリを開発する

    この記事はProgrammable VideoチームのプロジェクトマネージャーのSean Colemanこちらで公開した記事(英語)を日本語化したものです。

    Twilioは昨年、開発者がProgrammable Videoをわずか5分以内に立ち上げ、動作させることのできるTwilio Video Reactアプリケーションをリリースしました。そしてこのたび、このReactアプリケーションにチャット機能を新たに追加しました。この機能では、通常のチャットとファイルの送受信ができます。

    このオープンソースのReactJSアプリケーションは、開発の足掛かりとして利用するにも、信頼できるソースとして参照するにも役立ちます。加えて、今回の機能追加により、ビデオアプリケーションへのチャット機能の追加を短時間で行えるようになりました。

    この投稿では、エンドユーザーがビデオアプリケーションを利用するにあたり、チャットが重要なコミュニケーションチャネルである理由、新機能の概要、新機能の実装に使用されている仕組み(Conversations API)について説明します。

    ビデオアプリケーションにチャットを追加する理由

    ビデオアプリケーションでは、ユーザーが不明点をメッセージで質問する、過去の話題について後で質問する、関連リンクを共有するなど、話し手を邪魔することなくコミュニケーションをとりたいときにチャットが役に立ちます。

    さらに、チャットを活用して以下のようなメリットを実現するビデオソリューションも増えてきています。

    • インクルーシビティの推進: 参加者がより快適にコミュ …
    Read More
  • By Mia Adjei
    Invite Collaborators to a Twilio Video Chat Using the Google Calendar API and JavaScript Invite Collaborators to a Twilio Video Chat Using the Google Calendar API and JavaScript

    Have you ever attended an online video meeting that you were able to join via a link inside a calendar invitation? With the increase in people working and socializing from home, these kinds of calendar invitations have gotten a lot more popular in the last year.

    In this tutorial, you will learn how to build an application that allows you to create Google Calendar events programmatically, with a link to a deployed Twilio Video app in their description. This will allow users to click the link and join the video call easily. You will get a chance to learn about the Google Calendar API, as well as build a JavaScript application with React and Express.

    First, you'll get set up creating a new Google Cloud project. Then, you'll create a React + Express application to interact with the Google Calendar API. Finally, you'll deploy your Twilio Video application and …

    Read More
  • By Héctor Zelaya
    FaceAPI、React Hooks、TypeScriptを使用し、Twilioビデオアプリケーションにフィルターを追加する方法 faceapi-reacthooks-ts-twilio-video-filter

    このBlogはHéctor Zelayaこちらで公開した記事を日本語化したものです。

    ソーシャルメディアアプリに映る自分の顔にフィルターをかけようとしたことはありますか?おかしな帽子や格好いいメガネ、ネコの耳などをセルフィーやビデオチャットに追加して遊んだ経験があるのではないでしょうか。

    こうしたフィルターを使用したことがある方は、このテクノロジーはどう機能しているのだろうと考えたことがあるかもしれません。このようなアプリでは、顔検出ソフトウェアを活用し、写真やビデオ入力で顔を検出し、顔の特定パーツの上に画像を配置しています。

    このチュートリアルでは、顔検出機能を使用し、ビデオ会議アプリケーションにフィルターを追加する方法を説明します。このビデオ会議アプリは、TypeScriptで書かれ、Twilio Programmable VideoReactReact HooksFaceAPIを使用しています。

    一般的に、顔認識技術は、画像やビデオ内の顔の有無を判断(検出)し、顔の詳細な情報を評価(解析)し、本人確認(認証/検証)を試みる目的で使用されます。

    このチュートリアルでは検出機能のみ使用しますが、顔認識技術を使用する際には、倫理面やプライバシーに関する懸念について十分配慮することが重要です。

    顔認識ソフトウェアを使用するアプリをリリースする場合は、ユーザーに承諾するかを尋ねる機能を必ず組み込み、顔認識ソフトウェアの使用を許可するかどうかをユーザーに決めてもらうようにします。

    顔認識その他のAIの倫理的使用についての詳細は、以下のリン …

    Read More
  • By Christina Leung
    Understanding Local Caching in React Header - Understanding Local Caching in React

    React and Redux are commonly used together to build applications and manage application state. However, one drawback to using Redux is that upon page refresh, the entire Redux state containing the application data is reset. Re-initializing the Redux state often means having to make repeated API calls to re-fetch data, or losing user data completely.

    In this article, we will go through a small example demonstrating how Redux state can be cached locally, then rehydrated using cache data when the page is refreshed.

    Prerequisites

    For this tutorial, you will need a working Google Chrome browser with the extension Redux DevTools installed. This extension can be found in the Chrome Web Store.

    Cache Implementation

    This tutorial will demonstrate how to implement local caching in a pizza order form. Imagine you are ordering pizza for dinner, but get sidetracked halfway and decide to check your email instead. When you’re done checking …

    Read More
  • By Mia Adjei
    How to Set a Default Room Name in the Twilio Video React App How to Set a Default Room Name in the Twilio Video React App

    If you have worked with the open-source Twilio Video React App, you have likely seen the start screen displayed below:

    Twilio Video React App initial screen, with inputs for a user's name and a video room's name.

    By default, this screen shows you two inputs: one for your name and one for the name of the video room you would like to join.

    If you are building with this open-source video app, maybe you have wondered how you can prepopulate a video room name so that video room participants don't have to type it in.

    In this tutorial, you will learn some quick ways you can change the default name of the video room in this application, as well as examine some of how this application uses React Hooks.

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js v12+ and npm installed on your machine.

    Setup

    To get started, clone …

    Read More
  • By Luís Leão
    Cómo enviar un SMS desde React con Twilio Cómo enviar un SMS desde React con Twilio

    Hablamos mucho sobre el envío de mensajes SMS desde aplicaciones web, pero ¿qué sucede con el envío de mensajes SMS desde una aplicación de React? Hay un poco más que solo la versión del lado del servidor, pero no nos llevará mucho tiempo.

    ¿Por qué no debería utilizar la API REST desde el lado del cliente?

    Técnicamente, podría enviar un SMS mediante la API REST de Twilio directamente desde una aplicación en el lado del cliente de JavaScript. Pero (y es un “pero” muy grande) si lo hiciera, expondría sus credenciales de Twilio a cualquiera que utilice su sitio. Un usuario malicioso podría tomar esas credenciales y hacer un mal uso de ellas, lo que genera una factura enorme en su cuenta.

    Una animación que muestra a un pirata informático falso, con un pasamontañas y manos adicionales.

    Vista en vivo de un hacker con las credenciales de su cuenta

    Para evitar esto, crearemos una aplicación de back-end que implemente la API REST de …

    Read More
  • By Luís Leão
    Crear un chat de video con Hooks de React Crear un chat de video con Hooks de React

    Hemos visto un chat de video integrado en React este blog antes, pero desde entonces, en la versión 16.8, React lanzó Hooks. Hooks le permite usar características de estado u otras características de React dentro de los componentes funcionales en lugar de escribir un componente de clase.

    En esta publicación, vamos a crear una aplicación de chat de video mediante Twilio Video y React solo con los componentes funcionales, mediante el uso de los hooks useState, useCallback, useEffect y useRef.

    Lo que necesitará

    Para crear esta aplicación de chat de video, necesitará lo siguiente:

    Una vez que tenga todo eso, podemos preparar nuestro entorno de desarrollo.

    Cómo empezar

    Para que podamos ir directamente a la aplicación React, podemos comenzar con la app de inicio React y Express que creé. …

    Read More
  • By Luís Leão
    Implemente su propia app de colaboración de video en cinco minutos o menos Implemente su propia app de colaboración de video en cinco minutos o menos

    Ya lanzamos una versión más reciente de la app de colaboración de video; para obtener las instrucciones de implementación más recientes, siga este enlace.

    Hoy nos complace anunciar que tenemos tres aplicaciones de colaboración de video de código abierto: una para iOS, una para Android y una versión para la Web de ReactJS. Ya sea que esté creando una solución de colaboración de video general, de educación o de atención sanitaria, estas aplicaciones pueden acelerar el desarrollo, ya que le ofrecen una app de video completamente funcional que se puede implementar en la nube en cuestión de minutos. Además, proporcionan una referencia convencional para los desarrolladores que crean sus soluciones de comunicación mediante la presentación de las capacidades de Programmable Video. Estas aplicaciones están disponibles hoy en Github con la licencia Apache 2.0:

    En Twilio, nos esforzamos para crear una plataforma confiable …

    Read More
  • By Luís Leão
    Como criar um app de chat por vídeo com o Twilio Programmable Video e React Como criar um app de chat por vídeo com o Twilio Programmable Video e React

    Este tutorial foi criado com base em uma versão anterior do React e uma versão mais antiga do SDK da Twilio Programmable Video.

    Para novos desenvolvimentos, sugerimos estes dois tutoriais:

    A demanda por ferramentas de colaboração é cada vez maior, principalmente por parte dos desenvolvedores remotos e até mesmo de profissionais que atuam em outros setores. É muito importante ter um aplicativo de chat por vídeo cuja "aparência" possa ser personalizada, já que você não fica restrito aos recursos da maioria dos provedores comerciais.
    Neste tutorial, vamos aprender a criar um aplicativo de chat por vídeo usando o React, o Node.js e a Twilio Programmable Video.

    Como configurar o React e o Node.js

    Para desenvolver esse aplicativo, vamos precisar de conhecimentos básicos do React JS, do Node …

    Read More
  • By Luís Leão
    Como enviar uma mensagem SMS do React com o Twilio Como enviar uma mensagem SMS do React com o Twilio

    Falamos muito sobre o envio de mensagens SMS de aplicativos da Web. Mas e sobre o envio de mensagens SMS de um aplicativo React? Ele requer um pouco mais do que apenas a versão do servidor, mas não demorará muito.

    Por que não devo usar a API REST do lado do cliente?

    Tecnicamente, você pode enviar um SMS usando a API REST da Twilio diretamente de um aplicativo JavaScript do lado do cliente. Mas (e trata-se de um grande "mas") se fizesse isso, você exporia suas credenciais do Twilio para qualquer pessoa que usasse seu site. Um usuário mal-intencionado poderia, então, fazer mau uso dessas credenciais, causando um grande estrago na sua conta.

    GIF de um hacker de mentira, com uma balaclava e uma mão extra.

    Visualização ao vivo de um hacker com as credenciais da sua conta

    Para evitar isso, criaremos um aplicativo de back-end que implementa a API REST da Twilio, encerra suas credenciais e envia mensagens SMS para …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.