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
  • By Mia Adjei
    ExpressとTypeScript APIにCORSサポートを追加する方法 add cors support to Express + TypeScirpt JP Header

    このBlogはTwilio Developer Voicesチームに所属するMia Adjeiが執筆したこちらの記事を日本語化したものです。

    Node.js、Express、TypeScriptを使用してすばらしいAPIを構築したと想像してください。クライアントサイドのWebアプリも完成。ブラウザでアプリケーションを起動しサーバーに接続できる段階まできました。もうすぐ世界中に公開できそうです。

    ブラウザでアプリが動作している場所を開き、開発者ツール内のコンソールを開きます。アプリがサーバーに対し最初のAPIコールを実行します。しかし、アプリにデータは反映されず、コンソールにはこのようなエラーが表示されました。

    Access to fetch at 'http://localhost:5000/rooms' from origin 'http://localhost:3000' 
    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
    on the requested resource. If an opaque response serves your needs, set the 
    request's mode to 'no-cors' to fetch the resource with CORS disabled.
    

    なんと、オリジン間リソース共有(CORS: Cross-Origin Resource Shar …

    Read More
  • By Mia Adjei
    Build a Free 1:1 Video Chat Application with Twilio WebRTC Go and JavaScript Build a Free 1:1 Video Chat Application with Twilio WebRTC Go and JavaScript

    Have you ever wished you could build your own video chat application to talk to a friend, family member, or colleague one-on-one?

    There are so many projects you could build or enhance with video — a video chat for friends, a telemedicine application, a virtual real estate tour, a tutoring app, a dating application, and many more. When you're getting started building a new project, it's great to have a way to build for free and explore your ideas.

    With Twilio WebRTC Go, you can build your own 1:1 video application where participants can video chat for free. You can build your own WebRTC-enabled video app without needing to be concerned with some of the challenges of building directly on WebRTC.

    In this tutorial, you will learn how to build a 1:1 video chat application with JavaScript and set it up to run on ngrok so you can chat with …

    Read More
  • By Mia Adjei
    Co-browse a Shared Notepad in Real Time with Twilio Sync and Programmable Video Co-browse a Shared Notepad in Real Time with Twilio Sync and Programmable Video

    If you've checked out Marcus Battle's tutorial about building a real-time note collaboration tool with Twilio Sync, perhaps you have wondered to yourself, "Wouldn't this tool be great if I added video?"

    Well, you've come to the right place, because this tutorial will show you how to enhance your note collaboration tool by adding Twilio Programmable Video. In the last tutorial, you learned how to use Twilio Sync to build a notepad you can edit together in real time with another person. Adding video allows you to see and chat with your collaborator face-to-face while you edit the document together. You can discuss your thoughts aloud and come away with a text you created with your peers. Sounds pretty exciting — let's get started building!

    Prerequisites

    You will need:

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to …
    Read More
  • By Mia Adjei
    Build a Video Chat Application with Ruby, JavaScript, and Twilio Programmable Video Build a Video Chat Application with Ruby, JavaScript, and Twilio Programmable Video

    Video chat is a great way to keep in touch with the people you care about or collaborate with others remotely. Perhaps you've always wanted to build your own video chat application but were unsure where to start. Well, you have come to the right place!

    In this tutorial, you will learn how to build your own video chat application using Twilio Programmable Video, Ruby, and JavaScript. The server-side part of the project will be built using Ruby and the Sinatra microframework, while the client side is going to be built with vanilla JavaScript, HTML, and CSS. Sinatra is a lightweight, flexible framework for building Ruby applications. It is also a great place to get started if you are new to Ruby development.

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Ruby version 3.0.0+ …
    Read More
  • By Mia Adjei
    Manage the Recordings of Your Video Calls with the Twilio Compositions API Using Node.js, Express, and TypeScript Manage the Recordings of Your Video Calls with the Twilio Compositions API Using Node.js, Express, and TypeScript

    Have you ever been in a video meeting that was being recorded? It's great to be able to catch up on a meeting you may have missed or to refer back to a great conversation you had via video chat. Recording a video call can also be a great way to make your content and conversations more accessible in general by providing participants with a way to play back the conversation at their own pace.

    With Twilio Programmable Video, you can enable recording for your video rooms. When recording is enabled, each participant's audio and video are recorded in separate tracks. You can use the Compositions API to combine these tracks into a single playable video that will be compatible with most common media players.

    In this tutorial, you will learn how to build a quick application for creating, viewing, and downloading your video compositions using the Compositions API, …

    Read More
  • By Mia Adjei
    Build a Video Application with Breakout Rooms Using Twilio Programmable Video, React, TypeScript, and Express — Part 2 Build a Video Application with Breakout Rooms Using Twilio Programmable Video, React, TypeScript, and Express — Part 2

    In the previous tutorial, you built out the server side of a video application that will also allow you to create breakout rooms. Now it’s time to build out the client side of your application using React and TypeScript.

    By the end of this tutorial, you will be all set up to create and use breakout rooms in your video application.

    Let's get started!

    Prerequisites

    You will need:

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js (version 14.16.1 or higher) and npm installed on your machine.
    • HTTPie or cURL.
    • The code from the previous tutorial. (See the following step for details.)

    Get the starter code

    If you have just completed the previous tutorial, you already have the updated server-side code you need and can skip to the next section.

    However, if you …

    Read More
  • By Mia Adjei
    Build a Video Application with Breakout Rooms Using Twilio Programmable Video, React, TypeScript, and Express — Part 1 Build a Video Application with Breakout Rooms Using Twilio Programmable Video, React, TypeScript, and Express — Part 1

    Have you ever attended a video meeting, conference, or class and had the opportunity to join a breakout room? Video breakout rooms are a great way to create space for smaller group discussion and collaboration alongside a larger-group video call.

    In this tutorial and the one that follows it, you'll build a video chat application that allows you to create breakout rooms alongside your main video room.

    By the end of this first tutorial you will have:

    • A server that handles your API calls to the Twilio Video APIs and communicates with your local database.
    • A database set up to store the associations between main rooms and breakout rooms.

    Let's get started!

    Prerequisites

    You will need:

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js (version 14.16.1 or higher) and npm installed on your machine.
    • HTTPie …
    Read More
  • By Mia Adjei
    Grant Video Access Tokens with Your Express + TypeScript Video API Grant Video Access Tokens with Your Express + TypeScript Video API

    So you've built a video API with Twilio Programmable Video, Node.js, TypeScript, and Express. You've added CORS support so that your future video app will be able to access resources on your server. What's next?

    In order for users to actually be able to connect to video rooms in your app, they will need to be authenticated using an access token. In this tutorial, you'll update your Express + TypeScript video API to add a new route that grants access tokens to the users who will be using your video app. Let's get started!

    Prerequisites

    You will need:

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js (version 14.16.1 or higher) and npm installed on your machine.
    • HTTPie or cURL.
    • The code from the previous tutorial (see below).

    The rest of this tutorial builds on …

    Read More
  • By Mia Adjei
    Add CORS Support to Your Express + TypeScript API Add CORS Support to Your Express + TypeScript API

    Imagine you've just built a great API using Node.js, Express, and TypeScript. You've also built a client-side web app and are ready to fire it up in your browser, get it talking to your server, and hopefully share it with the world.

    You open up a browser window and navigate to where your app is running, then you pop open the console in your developer tools. Your app makes its first API call to your server...but then, instead of the data you're expecting to see populate your app, you see an error like the one below in your console:

    Access to fetch at 'http://localhost:5000/rooms' from origin 'http://localhost:3000' 
    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
    on the requested resource. If an opaque response serves your needs, set the 
    request's mode to 'no-cors' to fetch the resource with CORS disabled.
    

    Yikes! This error is due to Cross-Origin …

    Read More
  • By Mia Adjei
    Build a Video API with Twilio Programmable Video, Node.js, TypeScript, and Express Build a Video API with Twilio Programmable Video, Node.js, TypeScript, and Express

    Have you ever wanted to include video in your app but weren’t sure how to get started? Well, Twilio Programmable Video provides a friendly API you can use to make this happen.

    This tutorial will show you how to build an API to create and manage video rooms programmatically using Twilio Programmable Video, Node.js, TypeScript, and Express.

    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 installed on your machine.
    • HTTPie or cURL.

    Set up your environment

    Open your terminal, find the place you want to set up your project, and create a new directory called express-video-api where your project will live:

    mkdir express-video-api
    cd express-video-api
    

    Next, set up a new Node.js project with a default package.json file by running the following command:

    npm init --yes
    

    Install dependencies

    Express is the backend framework for …

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