Twilio Video posts
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!
To build a Twilio Programmable Video application, we will need:
- A Twilio account - sign up for a free one here and receive an extra $10 if you upgrade through this link
- Account SID: find it in your account console here
- API Key SID and API Key Secret: generate them here
- The Twilio CLI
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.
If you are worried that this is going to be a long, difficult and obscure tutorial …
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:
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 and fill in …
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
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.
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 …
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.
New TwiML Verb
To connect the PSTN/SIP …
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 …
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 …
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.
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:
- Node.js (I’m using the current latest version; 10, but it works with older versions)
- ngrok so that you can visit your development application from your mobile device
- A Twilio account; you’ll need your account SID, available on your Twilio dashboard, and an API key and secret, which you can generate in your console
Clone the repo for this application, …
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?
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 …