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

Video posts

  • 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 Resource …

    Read More
  • By Sean Coleman
    Launch your own video app with text-based chat in minutes with the updated Twilio Video Open Source ReactJS application Launch your own video app with text-based chat in minutes with the updated Twilio Video Open Source ReactJS application

    Last year, Twilio launched quick deploy video applications for developers to get up and running with Programmable Video in five minutes or less. Today, we are excited to announce the latest enhancement to the open source ReactJS application: out-of-the-box chat support for textual and file-based messaging.

    Whether you are using the app as a launching off point or a canonical reference during development, by adding this feature to the open source ReactJS application we hope to accelerate your development as you look to build chat within your video experience.

    This post will first explore why chat is a valuable channel for the end-user video experience, introduce the new feature, and discuss what we used to build it (spoiler alert: we leveraged Twilio’s very own Conversations API).

    Why add chat into your video experience?

    Chat within the video experience provides a useful channel for users to send clarifying messages, backlog …

    Read More
  • By Ander Telleria
    Take control of your recordings with the new Twilio Video Recording Rules API, now generally available Twilio Video Recording Rules API GA

    Choose your own recording adventure! Decide when and who you want to record from a Twilio Video Room.

    Back in March of 2020, we introduced enhanced recording features which include the ability to compose the media files of a Room recording into a high-quality, custom layout that matches a specific use case, public key encryption, and external storage. Since then, we have seen how a large number of companies have benefited from these new features including use cases such as capturing calls with clients, analyzing and improving negotiation sessions, exams proctoring, performing historical reviews of doctor-patient sessions, and more.

    But, what happens when part of the conversation cannot or must not be recorded? What about when a customer shares some confidential data, or if a customer just wants to record the audio of a participant, or if they want to start the recording in the middle of the session, or …

    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
  • By Jamie Corkhill
    Add Muting and Unmuting to Your Twilio Programmable Video App with TypeScript mutingtypescript.png

    In this article, you’ll learn to use TypeScript and Twilio Programmable Video to build a video chatting application with muting and unmuting controls. You’ll use an existing base project making use of the Twilio Client Library (for front-end video) and the Twilio Server Library (for back-end authentication) and retrofit it to support muting and unmuting.

    This article is an extension of my last article, Get Started with Twilio Programmable Video Authentication and Identity using TypeScript, and will build off the “adding-token-server” branch of this GitHub Repository. To see the final code, visit the “adding-mute-unmute” branch.

    Twilio Programmable Video is a suite of tools for building real-time video apps that scale as you grow, from free 1:1 chats with WebRTC to larger group rooms with many participants. You can sign up for a free Twilio account to get started using Programmable Video.

    TypeScript is an …

    Read More
  • By Daizen Ikehara
    Twilio Championsインタビュー: Doerに聞く - 本間皇成さん Twilio Champions Interview - Kiminari Homma

    デベロッパーエバンジェリストの池原です。昨年11月に始まった「Twilio Championsインタビュー: Doerに聞く」の4回目を2021年02月10日(水)に配信しました。

    過去のインタビューはこちらになります。1回目の記事ではこの取り組みやTwilio Championsプログラムについて取り上げています。そちらもぜひご覧ください。

    1回目 - Twilio Championsインタビュー: Doerに聞く - 古里武士さん
    2回目 - Twilio Championsインタビュー: Doerに聞く - 八木都志郎さん
    3回目 - Twilio Championsインタビュー: Doerに聞く - 川崎真素実さん

    今回のゲスト: 合同会社 selfree 本間皇成さん

    今回のゲストは合同会社 selfree本間 皇成さんにお越しいただきました。2回目に登場いただきました八木さんと一緒にTwilioJP-UGで長期間に渡り活動されていらっしゃいます。そのほかにもHerokuコミュニティ(J-HUG)や個人Blog「ボクココ」を運営されています。

    インタビュー中にはご本人にお伝えできませんでしたが、実は、私がTwilioに入社して初めてお会いしたTwilio Championでもあります。そんな本間さんにお話を伺いました。

    Twilioとの出会いと「ヤバさ」

    本間さんは7年ほど前に当時開発していたサービスでSMSを送信するニーズがあり、それを満たすための調査の中でTwilioを使い始めました。その後、新サービスを立ち上げる中で音声通話(Programmable Voic …

    Read More
  • By Ashley Boucher
    Building Twilio Apps with React: A Guide for Frontend Developers react.png

    Of all the JavaScript application frameworks, React.js continues to be the most popular among JavaScript developers.

    For developers building Twilio apps, however, learning how to make use of the different Twilio JavaScript SDKs inside React can be a complex process, and there aren’t always easy answers.

    In this post, you’ll get a birds eye view of the different Twilio JavaScript SDKs and see examples of how you can utilize them in a React app to make your next project easier.

    Prerequisites

    To make the most of the resources in this post, you should have:

    • A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade your account)
    • A working knowledge of React
    • Node.js installed on your machine
    • npm, yarn, or another package manager

    The Twilio JavaScript SDKs

    Twilio offers several JavaScript SDKs that are used to develop …

    Read More
  • By Grey Li
    Build an Online Presentation System with Python, JavaScript, and Twilio Programmable Video Build an Online Presentation System with Python, JavaScript, and Twilio Programmable Video

    In this tutorial, we will implement an online presentation system where the presenter can share the screen contents and their video and audio in real-time, while attendees who join the presentation can watch.

    For the back end portion of this application we will use Flask, a Python web application framework, while the front end will be built using vanilla JavaScript. The Twilio Programmable Video service will be used for video and audio streaming.

    The final application is shown below:

    Project demonstration

    Tutorial requirements

    To finish this tutorial, you will need to meet the following requirements:

    • A computer with Python 3.6 or newer version installed. If your operating system does not provide a Python package, download an official build from python.org. You can check it by typing the python or python3 command then press Enter in your terminal.
    • A free or paid Twilio account. If you use this link to register, …
    Read More
  • By Luís Leão
    Escolhendo câmeras em JavaScript com a API mediaDevices Escolhendo câmeras em JavaScript com a API mediaDevices - Mesa com 3 celulares

    A maioria dos smartphones vêm com uma câmera frontal e traseira, e quando você está construindo uma aplicação de vídeo para mobile, você pode querer escolher ou alternar entre elas.

    Se você estiver construindo uma aplicação de chat, provavelmente vai querer a câmera frontal, mas se estiver construindo um aplicativo de câmeras, talvez esteja mais interessado na câmera traseira. Neste post, vamos ver como escolher ou alternar entre as câmeras usando a API mediaDevices e restrições de mídia.

    Do que você vai precisar

    Para prosseguir neste post, você vai precisar de:

    • Um iOS ou Android com duas câmeras para fazer testes. Se você tiver duas webcams no notebook, também serve.
    • ngrok para que você possa facilmente acessar o projeto do seu aparelho móvel (e porque eu acho o ngrok incrível).
    • O código deste repositório do GitHub para começar

     

    Para pegar o código, clone o projeto e dê um checkout …

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