How to send an SMS from React with Twilio
We talk a lot about sending SMS messages from web applications, but what about sending SMS messages from a React application? There's a bit more to it than just the server-side version, but it won't take us long.
Why shouldn't I use the REST API from the client-side?
Live view of a hacker with your account credentials
To avoid this we will create a back end application that implements the Twilio REST API, wraps up your credentials and sends SMS messages for you. Then you can call your back end ...
Set up a React app with a Node.js server proxy
Create React App is a great tool for getting a React application up and running. It's a little less clear when you're building or prototyping an application that requires a server side component, like generating access tokens for Twilio Video or Chat, though. I've found it easiest to work with a server within the same project so that you can start everything up with one command.
How it works
There is an option that you can set in Create React App's
package.jsonthat proxies non
text/htmlrequests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, but today we want to be ...
Audio visualisation with the Web Audio API and React
The Web Audio API is a powerful browser API for creating, manipulating and analysing audio. I'm no musician, so I'll leave the creating and manipulating to the experts. Instead, in this post we're going look at analysing audio. To make things extra interesting, we're going to see how to visualise the audio in a React component with
When we're done we'll have a React application that can listen to the microphone on your computer and show a waveform to visualise the data.
- Clone or download the repo from GitHub
git clone -b getting-started https://github.com/philnash/react-web-audio.git
- Change into the directory and install the dependencies with npm
cd react-web-audio npm install
- Start the application
npm start ...
Build a collaborative playlist over WhatsApp with Rails, Twilio, and Spotify
Sharing music over playlists is a great way to discover new and old music. Spotify has collaborative playlists, but I don't like how they let your friends re-order and delete songs from the list. We can fix this by building our own collaborative playlist that only allows additions using the Spotify Web API. With the Twilio API for WhatsApp we can let our friends send in a song whenever they are struck by inspiration.
In this post we are going to build a WhatsApp bot that can do all of the above using Ruby on Rails.
To build this application we will need a few things:
👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js
I 💖 emojis, so when I heard about the new Twilio API for WhatsApp I wanted to build something emojiriffic. Inspired by Monica Dinculescu’s to_emoji Twitter bot and emoji translator I decided to build a WhatsApp text-to-emoji translator. You can try it out now by sending your message to our WhatsApp number +441745472072.
Here’s how you too can build this app.
I decided to build this project using Node.js, following in the footsteps of Monica’s projects. WhatsApp messages via Twilio result in webhooks, much the same as receiving an SMS message to a Twilio number, so if you’ve built a Twilio SMS application before this will be familiar. For ease of deploying this, I’m going to build this as a Twilio Function.
If you want to follow along with building the emoji translator you’ll need:
- A Twilio account (sign up for a free ...
Switching cameras during a video chat with Twilio Video
mediaDevicesAPI, 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 ...
Screen capture in Microsoft Edge
Let’s see how we can capture the screen with Edge.
What you need
- The latest version of Edge, which is currently version 42 with EdgeHTML version 17 (if you’re on a Mac like me, you can get a free virtual machine with Windows 10 and Edge installed to test on)
- A text editor
- A local web server – I like to use serve for things like this
- Either ngrok or an equivalent tunnelling service or TLS certificates set up for localhost (we’ll see why later)
Whereas Chrome required an extension to be built and Firefox used
"screen"to get a handle on the stream of the screen, once again Edge uses a different method ...
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
mediaDevicesAPI 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 ...
Better passwords in Ruby applications with the Pwned Passwords API
Here at Twilio we’re fans of using a second factor to protect user accounts, but that doesn’t mean we’ve forgotten the first factor. Encouraging users to pick strong passwords is still the first line of defence for their accounts.
After spending years collecting lists of passwords from publicly available data breaches at HaveIBeenPwned, Troy Hunt has made available an API to check whether a password has been used before. This post will show you how to encourage your users to use stronger passwords by checking against the pwned passwords API.
The Pwned Passwords API
In 2017 NIST (National Institute of Standards and Technology) as part of their digital identity guidelines recommended that user passwords are checked against existing public breaches of data. The idea is that if a password has appeared in a data breach before then it is deemed compromised and should not be used. Of ...
How to detect if a Chrome extension is installed
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.jsand take a look ...