Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free

React posts

  • By Kelley Robinson
    Build phone verification in React Native with Twilio Verify Build phone verification in React Native with Twilio Verify

    SMS verification is a great way to onboard your users, especially in a mobile app where they have access to their text messages. Phone verification can also help ensure unique users, decrease spam and fraud, or can be used for ongoing login verification. There are many options for verifying users, but SMS verification remains a popular choice for its ease of use.

    This blog post will walk you through how to set up a React Native application from scratch and how to use Twilio's purpose built Verify API for SMS phone verification. If you want to skip ahead, you can find the completed code on my GitHub.

    Prerequisites for building phone verification in React Native & Expo

    Set up your React Native developer environment

    We're using ​​Expo CLI and Expo GO for this tutorial which is quick to set up and get running. You can learn more …

    Read More
  • By Mia Adjei
    Build an Audio Livestream App with Twilio Live Build an Audio Livestream App with Twilio Live

    The amount of online audio content and livestreams is increasing every day. More and more, people are tuning into audio for news, music, fitness, study, and entertainment. So if you have been thinking about creating something in the audio space, maybe you have considered building your own live audio application.

    Perhaps you've already explored Twilio Live to livestream your video feed or create a live screen share. But did you know you can use Twilio Live to create an audio-only experience as well?

    In this tutorial, you will learn how to build an audio livestream application with Twilio Live and React, and then deploy it using Twilio Functions and the Twilio Serverless Toolkit. This will allow you to start sharing your live audio with your friends and community right away. In this project, you'll also use the Twilio Paste design system to quickly build and style your …

    Read More
  • By Ashley Boucher
    ReactとTwilio Programmable Videoでカスタムビデオチャットアプリを作成する ReactとTwilio Programmable Videoで作成するカスタムビデオチャットアプリ

    この記事はTwilio Developer VoicesチームのAshley Boucherこちらで公開した記事(英語)を日本語化したものです。

    このチュートリアルでは、ReactとTwilio Programmable Videoを使用してグループビデオチャット用のWebアプリケーションを作成します。ビデオチャットは友人や家族、同僚とのコミュニケーションに大変便利なツールです。それでは、以下にカスタムビデオチャットアプリを作成する基本手順を紹介します。

    必要条件

    作成するアプリケーションは2つのパートで構成されています。

    1. React.jsのフロントエンド
    2. 任意の言語・プラットフォームで作成されたバックエンド。

    バックエンドはアクセストークンの生成に使用し、ユーザーに権限を付与します。フロントエンドはTwilio Programmable Video JavaScript SDKを使用してビデオチャットロジックを処理します。バックエンドの作成は本稿では説明しませんが、Node.jsユーザー向けにブログ記事「Twilio Functionsを使ってTwilio Chat、Video、Voice用のアクセストークンを生成する」で詳しく説明しています。

    クライアントの作成

    Reactアプリをクローンする

    プログラムの …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 2) Creating an OCR Communication App with Tesseract.js and React (Part 2)

    This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back end development and testing of the app.

    Part 1: Creating an OCR Communication App with Tesseract.js and React (Part 1)

    In part 1, we built the front end of this OCR communication app:


    completed app

    Let’s now build the back end.

    Building the back end

    Create .env and server.js files in the root directory of the project.

    First, let’s store the Twilio credentials in the .env file.

    Open the .env file in a text editor and paste the following code:

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXX represents a placeholder for Twili …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 1) Creating an OCR Communication App with Tesseract.js and React (Part 1)

    Background

    Optical Character Recognition (OCR) is a technology that optically recognizes handwritten or printed characters as data, and converts them into characters that can be used in computer programs. OCR is used in a variety of fields. For example, OCR is used to detect stolen vehicles by recognizing their license plates, and to digitize printed books.

    Tesseract.js is an open source OCR library that supports over 100 languages. Tesseract.js compiles the Tesseract OCR engine written in C into JavaScript WebAssembly. With Tesseract.js, you can easily build OCR programs that run in the browser.

    In this tutorial, we will show you how to build a React application using Tesseract.js to perform OCR on images directly in the browser, and send the recognized text to you as an SMS.

    This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

    背景

    「OCR」という技術を耳にしたことがありますか?OCRは、Optical Character Recognition(光学文字認識)の略です。手書きや印刷された文字を光学的な手段でデータとして取り込み、文字認識することによってコンピュータープログラムなどで使用できるように変換する技術です。OCRは様々な分野で利用されています。使用例としては、車のナンバープレートを認識し盗難車を検知したり、書籍をデジタル化したりという例があります。Tesseract.jsは100以上の言語に対応するオープンソースのOCRライブラリです。Tesseract.jsは、C言語で開発されたTesseractOCRエンジンをJavaScriptのWebAssemblyにコンパイルしています。Tesseract.jsを使うと、ブラウザでOCRを簡単に利用できます。

    Tesseract.jsの精度は完全ではありません。誤認識する可能性がありますので、これまで手作業で行っていた作業をTesseract.jsで自動化し効率を上げるためなど、補助的な用途での利用を推奨します。

    本稿では、Tesseract.jsとReactを使用し、ブラウザ上で画像のOCR処理を行い、読み取ったテキストをSMSとして送信するアプリの作成方法をご紹介します。

    本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。

    後編はこちら:Tesseract.jsとReactでOCRコミュニケ …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編)

    本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
    前編はこちら:Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

    前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。

    アプリ完成イメージ


    バックエンドを構築する

    次に、バックエンドを構築します。

    プロジェクトのルートディレクトリに.envserver.jsファイルを作成してください。

    まずは、Twilioの認証情報を.envファイルに格納します。

    テキストエディタで.envファイルを開き、以下のコードをペーストしてください。

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。

    TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。

    TWILIO_PHONE_NUMBERは、Twilioから取得した電話番 …

    Read More
  • By Miguel Grinberg
    Deploy your React Application with the Twilio Serverless Toolkit Deploy your React Application with the Twilio Serverless Toolkit

    When you are ready to deploy your React application you are faced with the problem of selecting a hosting platform. Here you have a variety of options, many of them requiring you to set up servers or containers.

    In this short tutorial I want to introduce you to the Twilio Runtime, a serverless hosting platform that when paired with the Twilio Serverless Toolkit makes deploying your React application as easy as typing yarn deploy on your terminal.

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • 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
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.