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

Twilio Video posts

  • By Lizzie Siegle
    Pose Detection in Twilio Video with TensorFlow.js Detect Poses TensorFlow.js header

    Pose detection is one fun and interesting task in computer vision and machine learning. In a video chat, it could be used to detect if someone is touching their face, falling asleep, performing a yoga pose correctly, and so much more! 

    Read on to learn how to perform pose detection in the browser of a Twilio Video chat application using TensorFlow.js and the PoseNet model.

    Join Room.png

    Setup

    To build a Twilio Programmable Video application, we will need:

    Follow this post to get setup with a starter Twilio Video app and to understand Twilio Video for JavaScript a bit more, or download this repo and follow the …

    Read More
  • By Miguel Grinberg
    Build a Video Chat Application with Python, JavaScript and Twilio Programmable Video Build a Video Chat Application with Python, JavaScript and Twilio Programmable Video

    The efforts to limit the spread of COVID-19 around the world have forced a large number of people to work from home and this has naturally created a surge in interest for communication and collaboration tools.

    In this article we are going to look at a video conferencing solution, but instead of turning to a third-party system we are going to take the do-it-yourself approach and build our own. Our system is going to run on modern desktop and mobile web browsers, so participants will not need to download or install any software on their computers. The server-side portion of the project is going to use Python and the Flask framework, and the client-side is going to be built in vanilla JavaScript, with some HTML and CSS sprinkled in the mix for good measure.

    If you are worried that this is going to be a long, difficult and obscure tutorial …

    Read More
  • By Phil Nash
    How to add an overlay to your web video chat How to add an overlay to your web video chat

    When building a video chat, Twilio Video provides you with the SDKs and APIs to build video apps that connect your users. However, it is un-opinionated about your interface. With a bit of CSS, we can create effects to make your video chat stand out.

    In this post we'll see how to overlay items like a logo or a user's name over a video. Over the course of the post, we'll turn a plain video into something that looks like this:

    An animation of me on video in my webcam, above me my name appears and to the bottom right a watermark saying "Powered by Twilio" shows.

    Getting started

    To create these effects we won't build an entire video chat. Instead, we'll take the Twilio Video library and use it to get the camera and put it on the page as if it was a video chat – then style that video.

    Create three new files in the same directory to write this application in: index.html, script.js and style.css. Open index.html and fill in …

    Read More
  • By Phil Nash
    Build a Video Chat with React Hooks Build a Video Chat with React Hooks

    We've seen a video chat built in React on this blog before but since then, in version 16.8, React released Hooks. Hooks let you use state or other React features inside functional components instead of writing a class component.

    In this post we are going to build a video chat application using Twilio Video and React with only functional components, using the useState, useCallback, useEffect and useRef hooks.

    What you'll need

    To build this video chat application you will need the following:

    Once you've got all that, we can prepare our development environment.

    Getting started

    So we can get straight to the React application, we can start with the React and Express starter app I created. Download or clone the starter app's "twilio" branch, change into the new directory and …

    Read More
  • By Kedar Toraskar
    Now You Can Add Programmable Voice Participants to Video Group Rooms phone-300x198.png

    We’ve heard from customers who’ve built apps with Twilio Video that they’d like to add in callers from SIP or the PSTN (Public Switched Telephone Network), as there are times where Participants would like to dial-in to the Room from a telephone.

    Starting today, you can now connect Participants from the PSTN or over SIP audio to Programmable Video Group Rooms or Small Group Rooms (for simplicity in this post we’ll refer to both Room types as Group Rooms).

    Now, with just a few lines of code, you can:

    • Receive phone calls to a Video Group Room from any Twilio phone number
    • Make outbound phone calls to add Participants to a Video Group Room.

    PSTN/SIP Participants will be able to share their audio to the Video Group Room and will receive a mixed audio stream from the other participants connected to the Room.

    video-interop

    New TwiML Verb

    To connect the PSTN/SIP …

    Read More
  • By Justin Pirie
    Announcing Programmable Video Network Quality API E3_227YeEwTpncm0VgqLtYJWU6UUpdXs8DauEraaBfkg-EnHipP5O8JwdxyXxP48YGpL0MhXIY0CzCjZUZNE4SuTvENq5s2IkIAMqPzfTHOyme4hdPrng00nBI0bUYuGxag_T_9s

    When the network is the problem, what’s the solution?

    Most of us have experienced the annoying effects of degraded video conferencing quality: audio becomes robotic and choppy while video turns into a sequence of blurry pictures. This is frustrating for end-users who tend to complain to application developers and platform providers asking for a solution. However, experience shows that most of the time, what causes these problems is the network access of the end users themselves. Notably, crappy wifi.

    Wireless links are subject to so many different types of interference that can cause packet loss that it’s impossible to control. Worse, the use of shared access mechanisms split the available bandwidth amongst channels and may cause bitrate drops in crowded areas. Even with wired ethernet, routers and firewalls might get congested causing jitter, latency and packet loss. Worst of all, free, coffee shop wifi.

    When video conferencing, all these problems …

    Read More
  • By Justin Pirie
    Built with Twilio Video: LearnCube Virtual Classroom mvf5B5XHrokZ8pVkLnO1hbfn9gfcnlm_NHRsb8MoxVjlriMeR_H78K4KXYlAAMAlitQrW2H68PAlw8aJZT7qEkwy-K4mcBY0Y-BfoZNOXa01dGatoItu7pRYmwYjo7SeAtrRg_PR

    Before eLearning, a student needed to commute across town or even move to a different country to get a quality education. Improvements in technology, especially in WebRTC, has taken the hassle out of connecting students with great teachers and schools.

    I’m Alex from LearnCube, virtual classroom software that specializes in helping language-learning and academic tutoring companies teach online.

    When we started four years ago, we made a bet that WebRTC would be the video technology of the future. Users much prefer the seamless experience of not having to download an external app or software. The quality has been getting better every year and it’s already superior to many many established video-conferencing providers.

    We became a Twilio customer for Programmable Video in late 2017 after learning that Twilio had acquired Kurento. What we found was a quality video platform to embed in our virtual classroom software at an affordable …

    Read More
  • By Phil Nash
    Switching cameras during a video chat with Twilio Video switch2

    We’ve looked at how to choose cameras in JavaScript using the mediaDevices API, particularly for the case of mobile devices with a front and back camera, and now it’s time to put that into practice in an application. In this post we will use what we learned to build a camera switcher into a video chat application using Twilio Video.

    Getting started

    We’re going to build this off a slightly modified version of the Twilio Video quickstart application. In order to build this app you will need:

    Clone the repo for this application, …

    Read More
  • By Roger Stringer
    Hosting Live Webinars with JavaScript, Node.js, AdonisJs and Twilio Programmable Video Twilio-Video-hi-res

    We’re going to use Twilio Video with the AdonisJs framework to create a system where a user can host a video, and viewers can watch their presentation. AdonisJs is a full-stack, open-source MVC framework for Node.js that was inspired by the Laravel framework and borrows some of its concepts. AdonisJs saves you time and effort becauses it ships with a lot of features out of the box.

    This system can be extended that users can sign up and schedule talks on, even pay to use. But we’re going to keep our project simple so it is easier to build your initial application.

    What is Twilio Video?

    We will use Twilio Programmable Video to build our app. Twilio’s Video SDK is a fast way to build a full …

    Read More
  • By Phil Nash
    Choosing cameras in JavaScript with the mediaDevices API

    Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.

    If you’re building a chat app you probably want the front camera, but if you’re building a camera app then you’re more interested in the rear camera. In this post we’re going to see how to choose or switch between cameras using the mediaDevices API and media constraints.

    What you’ll need

    To follow along with this post you’ll need:

    • An iOS or Android device with two cameras to test with, if you have two webcams this will work on your laptop too
    • ngrok so you can easily access the project from your mobile device (and because I think ngrok is awesome)
    • The code from this GitHub repo to get you started

    To get the code, clone the project and checkout the starter …

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