Build the future of communications.
Start building for free

JavaScript posts

  • By Miguel Grinberg
    How to Play Video Files in a Twilio Video Call How to Play Video Files in a Twilio Video Call

    A common need in video calling applications is to allow a user to play a media file for the other participants in the call. This can enable, for example, a teacher or doctor to share a recording with the call attendees.

    In this article I will show you how a participant in a Twilio Video call can share video and audio content in formats such as mp4 or webm.

    The MediaStream API

    The JavaScript version of the Twilio Video SDK uses existing APIs in the browser to obtain access to the camera and microphone. More specifically, it uses the MediaDevices.getUserMedia() function to access MediaStream objects for these devices, which expose the raw video and audio tracks that are then published to the video call.

    But the MediaStream APIs cover much more than webcams and microphones and can be used to obtain MediaStream objects from other sources. For example, the …

    Read More
  • By Phil Nash
    Twilio SendGridとNode.jsを使用してメール問い合わせフォームを構築 How to build an email contact form with SendGrid and Node JP

    この記事はPhil Nashこちらで公開した記事(英語)を日本語化したものです。

    Webサイトにメールアドレスを公開すると、スクレーピングされ、スパムに使用されるおそれがあります。この問題を回避し、同時に自身のWebサイトからメールで問い合わせを受け取れるようにする方法の一つとして、問い合わせフォームを構築することがあります。

    本稿では、Twilio SendGridベースの開発プロジェクトの一例として、ウェブサイト上で問い合わせフォームを構築し、メールアドレスを公開することなく問い合わせのメールを受け取れるようにする方法を説明します。

    プロジェクトはTwilio Functionsも使って構築しますが、本稿でご紹介するコードはあらゆるNode.js環境での使用に対応しています。

    APIによるメール送信との違い

    ユーザーがお問合せフォームを送信した際は、お問合せフォームを入力した人のメールアドレスを送信元とするメールがウェブサイト運営者に送信されることがよくあります。しかし、メール送信に関する信頼性を維持するため、Twilio SendGridは単一送信元として検証されたアドレス、または認証済みのドメインからの送信しか許可しません。

    そのため、提供されたメールアドレスをfromアドレスとして使用する代わりに、reply-toアドレスに設定できます。この方法であれば、Twilio SendGridは認証済みメールアドレスからメールを送信する一方で、受信 …

    Read More
  • By Ted Gieschen
    How to Collect Times and Dates in Voice Calls or SMS using JavaScript How to Collect Times and Dates in Voice Calls or SMS using JavaScript

    Twilio offers a wide variety of channels you can use to connect with your customers, for example, through an SMS or Phone Call. One of the ways you can use these channels is to collect data from your customers. Depending on the type of data, this can be a complex undertaking. Collecting individual words or numbers is usually pretty straightforward. However, when asking customers to share specific Times and Dates, this can be far more complex. A typical use-case might be the scheduling of an appointment. This is especially true when allowing customers to communicate in free form (for example, “I would like an appointment next Tuesday at 3 pm”).

    In this blog, I will show you how you can extract Times and Dates during a phone call using JavaScript and serverless Twilio Functions without the need for any 3rd party integrations.

    Prerequisites

    To build this solution, you will …

    Read More
  • By Naomi Pentrel
    Twilio's Unofficial Vote for the Eurovision Song Contest Twilio's Unofficial Vote for the Eurovision Song Contest

    Eurovision is near and while you can't officially vote just yet, we thought we'd allow the public to vote already - and not just for this year but for ALL Eurovision's that have happened since the beginning of Eurovision. That includes 2020 - the year Eurovision was cancelled.

    How do I vote?

    Text '2022' to one of the following numbers to get the list of all the 2022 participants and their youtube videos. Once you have picked a winner, text “2022 Country” to the same number (e.g. 2022 Germany).

    Netherlands: +3197010253872

    UK: +44 7401 199687

    Sweden: +46 70 192 18 32

    United States: +1 (267) 713-3577

    What about the other years... Could we maybe vote for those too?

    You can text any year from 1956 to 2022 to any of the above numbers and then vote for your favourite song.

    How do I see the results?

    You can see the …

    Read More
  • By Miguel Grinberg
    Synchronized State Variables for React using Twilio Sync Synchronized State Variables for React using Twilio Sync

    State variables are one of the most important building blocks in front end applications developed with the React library. When a state variable is updated, React automatically re-renders any application components that depend on it, ensuring that the application always displays updated information to the user.

    The automatic state update mechanisms in React are fantastic, but they are limited to a single instance of the application. Sometimes, however, an application needs state variables that are automatically synchronized across all running instances of the application. In this tutorial you are going to learn how to create a custom React hook that implements synchronized state variables using Twilio Sync as a cloud storage back end.

    Tutorial demonstration

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • By Sam Agnew
    Using Event Webhooks for Emails with Twilio SendGrid in Node.js Copy of C02 Blog Text.png

    When sending emails with Twilio SendGrid, sometimes you want to be able to keep track of the status of these emails, such as when a recipient opens the message or reports it as spam. This is made possible by the use of Event Webhooks. Let's walk through how to use Node.js and Express to track the status of emails that you send.

    Prerequisites and dependencies

    Make sure you have the following before moving on:

    • Node.js and npm installed (do this first if you haven't already)
    • A free SendGrid account
    • An email address to test out this project
    • A domain on which you will receive emails. For the purposes of this article, I’m going to use yourdomainhere.com. You will need to replace it with your own domain name.

    We'll need to install the node modules for SendGrid and Express. To install these npm modules, navigate to the directory where …

    Read More
  • By Mingchao Ma
    Integrate Twilio Verify Service with RSA SecurID RSA Verify header

    Many organisations in the banking sector are still using RSA SecurID with hardware tokens for multi factor authentication (MFA). However, employees might forget their hardware token thus won’t be able to login. This leads to high support costs, poor user experience and reduced productivity. This is the exact challenge that one of our customers in banking is trying to address. So we worked together to explore how Twilio Verify Service can be leveraged as an alternative MFA. This will allow their employees to login their protected systems by using a One-Time Password (OTP) delivered to their employee’s mobile phone.

    This blog post will walk you through the steps of how to integrate Twilio Verify service with RSA SecurID.

    The RSA Authentication manager requires that you pin a certificate for the HTTPS endpoint of your SMS provider. This will cause your application to break when the certificates change in the future. …

    Read More
  • By Stephenie Minami Nakajima
    SlackからSMSを送信するNode.jsアプリケーションを開発する方法 SlackからSMSを送信するNode.jsアプリケーションを開発する方法

    背景

    Slackは企業やコミュニティ内のメンバーや情報、ツールをまとめてくれる、便利なコミュニケーションツールです。

    Slackで取り扱う情報は多種多様ですが、Slackが提供するSlack APIを使用すると、これまでSlack上で手作業で行っていたことを、自動化できます。SMSの送信も、自動化できることの1つです。

    本稿では、Slack APIとTwilio、Node.jsを使って、SlackからSMSを送信するアプリを構築する方法をご紹介します。

    目標

    このチュートリアルを最後まで進めると、以下のような、Node.jsを使ったSlackからSMSを送信できるアプリケーションを開発できます。

    完成アプリイメージ


    チャンネル内で/smsとコマンドを送信すると、モーダルが出現し、 その後電話番号とメッセージを入力してSMSを送信します。送信がうまく実行されると、「SMSを送信しました」メッセージがアプリからチャンネルに送信されます。

    必要事項

    このチュートリアルを進めるには、以下の項目が必要です。

    • Node.js v16以降とnpm
    • JavaScriptとNode.jsの基礎知識。
    • Slackのワークスペース。作成方法について詳しくは、Slack公式ヘルプセンターを参照してください。
    • Twilioのアカウント。Twilioホームページをブラウザで開き、[今すぐ無料サインアッ]ボタンをクリックするか、Twilioアカウントの作成リンクからサインアップします。このリンクを使用するとアカウントのアップグレード時に10米国ドル相当分のクレジットが追加で付与されま …
    Read More
  • By Phil Nash
    How to build an email contact form with SendGrid and Node.js How to build an email contact form with SendGrid and Node.js

    Displaying your email address on a website can result in your email being scraped and used for spam. One way to get around this, but still allow people to contact you from your website, is to build a contact form.

    In this post you will build a contact form using SendGrid to deliver emails to your inbox without exposing your email address.

    You will build the project with Twilio Functions, but you could adapt the code to use in any Node.js environment.

    How is this different to sending an email with an API?

    When someone fills in a contact form, you might expect to receive an email in your inbox from their email address. However, to maintain a good email sending reputation, SendGrid only allows you to send emails from addresses that you have verified individually or from domains you have authenticated.

    So, instead of using the submitted …

    Read More
  • By Lizzie Siegle
    Celebrate St Patrick's Day: Translate English to Gaelic with Twilio Serverless, SMS, and IBM Watson Copy of C01 Blog Text (3).png

    Celebrate St. Patrick's Day on March 17th by texting a sentence to +13863564094 to translate it to Gaelic, and read on to learn how to build the app using IBM Watson, Twilio Functions, JavaScript, and the Twilio Serverless Toolkit.

    Screen Shot 2022-03-16 at 10.12.41 AM.png

    Prerequisites

    1. A Twilio account - sign up for a free one here and receive an extra $10 if you upgrade through this link
    2. A Twilio phone number with SMS capabilities - configure one here
    3. Node.js installed - download it here
    4. IBM Cloud account - sign up for a free one here

    Setup IBM Watson

    Go to the IBM Watson Cloud Translator console, select the free Lite plan, and make a new service by clicking Create on the righthand panel.

    watson create service

    Whoop whoop! You've just made y …

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