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 …
In other posts we have investigated how to capture screen output in Chrome and built a screen sharing video chat application. There was one feature missing though. The Chrome extension made screen capture possible, but didn’t test whether it had been installed before the application tried to use it. In this post we are going to build a Chrome extension that can be detected from the front end.
Getting set up
We’re going to use the extension we built for screen capture and add the functionality to make it detectable. We’ll then build an example to show handling the two cases, with and without the extension.
Download the source for the extension from the GitHub repo or by cloning the
git clone -b building-extension-detection https://github.com/philnash/screen-capture.git cd screen-capture
extension/extension.js and take a look at line 1. …
What we’re building
In this post we’ll take the Twilio Video quickstart application and add screen sharing to it. When we are done your application will let you make calls between browsers and share screens from one to the other.
What you’ll need
To build this application you will need a few things:
- A Twilio account – you can sign up for free here
- Node.js – we need to run a server to generate access tokens for the Twilio Video service
- The Chrome extension we built in the first post (if you didn’t follow this post, there will be a copy of the extension in the repo later)
- Ngrok for testing in Firefox …
- Share and synchronize real-time data among Room Participants.
- Build shared whiteboarding, collaboration features, and augmented reality apps.
- Available in Programmable Video’s Peer-to-Peer and Group Rooms today.
- Media Sync API to synchronize messages with real-time audio and video streams—coming soon.
- Join us at Kranky Geek on October 27 for a live demo.
If you’ve built an app with our Programmable Video SDKs, you are familiar with the concept of Tracks. Tracks represent an individual stream of audio from a microphone or video from a camera, shared by a Participant in one of your Programmable Video Rooms.
Today we’ve added another API that should help you make your Programmable Video apps just a bit richer. DataTracks—a simple API for publishing real-time data among Room Participants lets you build shared whiteboarding, collaboration features, augmented reality apps, and more. And coming soon, the Media Sync API will let you synchronize these messages with …
Component based UI libraries are a popular way of building modern applications. Angular and React are the heavyweights at the moment, but the humble browser and its native APIs are never far behind. Web Components were first introduced in 2011 and are the browsers’ attempt to bring componentisation to the web platform.
There are a few libraries available for writing Web Components, most notably Google’s Polymer, but also X-Tag and Bosonic. To really get a grip on what the platform can achieve on it’s own, I’m going to show you how to build a Web Component using the APIs available in browsers today. There are many “hello world” examples of Web Components, so we’re going to build something a bit trickier today, a video chat widget using Twilio Video. By the end of the post it will look a bit like this:
More importantly, once we’ve …