You are viewing the Japanese site, but your language preference is set to English. Switch to English site →

Menu

Expand
このページを評価:

Voice JavaScript SDK: Twilio in the browser

You’re viewing the documentation for the 2.X version of the Voice JavaScript SDK. View the Migration Guide to learn how to migrate from 1.X to 2.X or view the 1.x-specific documentation.

The Twilio Client JavaScript SDK has been renamed to Twilio Voice JavaScript SDK.

Overview

The Twilio Voice JavaScript SDK allows you to make voice calls to and from a web browser and a Twilio TwiML Voice Application. This means you can open inbound and outbound audio connections to Twilio for building softphones, walkie-talkies, conference calls, click-to-talk systems, and more, all from the browser.

Want to get started right away? Jump right in with one of our Voice JavaScript SDK Quickstarts.

Intending to write back-end JavaScript with Twilio in Node.js to support your front-end client? Check out the Twilio Node.js SDK.

How it works

You set up your device and establish a connection to Twilio. Audio from your device’s microphone is sent to Twilio, and Twilio sends back audio which is played through your device’s speakers, like on a normal phone call. The key difference is that with Twilio Voice JavaScript SDK, your "phone" is a Twilio.Device, a "soft device" that provides connections into Twilio.

Voice JS SDK Diagram: Your application connects to Twilio, Twilio sends a webhook to your back end to get TwiML instructions, Twilio executes those instructions (e.g. calls a number).

When you initiate a call using the Twilio.Device object provided by the JavaScript SDK, you’re not calling another phone directly. Rather, you’re connecting to Twilio and instructing Twilio to fetch TwiML from your server to handle the call. This is analogous to the way Twilio handles incoming calls from a real phone.

The JavaScript SDK uses the same TwiML verbs and nouns used for handling Twilio Voice calls. We’ve also added a new <Client> noun for dialing to a "client" (another instance of a Twilio.Device).

TwiML Applications

Because calls made with a Twilio.Device aren’t made to a specific phone number, Twilio relies on a TwiML Application within your account to determine how to interact with your server. A TwiML Application is just a convenient way to store a set of URLs, like the VoiceUrl and SmsUrl on a phone number, but without locking them to a specific phone number. This makes TwiML Applications perfect for handling connections from your Twilio.Device — which is why we created them in the first place.

So when your Twilio.Device initiates a call to Twilio, a request is made to the VoiceUrl property of an Application within your account. You specify the Application you’re connecting to with an Access Token. Twilio uses the TwiML response from its request to that Application’s VoiceUrl to direct what happens with the Twilio.Device call.

Installation

NPM

We recommend using npm to add the Voice SDK as a dependency.

npm install @twilio/voice-sdk --save

Using this method, you can import the Voice SDK using ES Module or TypeScript syntax:

import { Device } from '@twilio/voice-sdk';

Or using CommonJS:

const Device = require('@twilio/voice-sdk').Device;

CDN

As of 2.0, the Twilio Voice SDK is no longer hosted via CDN.

GitHub

Although we recommend using npm to add the Voice SDK as a dependency, you can also get the Twilio Voice SDK code from GitHub and include it in your project directly. To do so, navigate to "Releases" and find the most recent release, or the particular release version you'd like to use.

Releases tagged with "-rc" are "Release Candidate" versions and are still being tested. Unless you specifically know that you want to use a release candidate version, you should not use a release with "-rc" in the name.

Download either the zip or the tar.gz and then extract the files. For example, if you downloaded the tarball for the 2.0.0 release, you could then extract the files with the tar command:

tar -xvzf twilio-voice.js-2.0.0.tar.gz
cd twilio-voice.js-2.0.0

Once you've extracted the folder, the twilio.js and twilio.min.js files that you can include in your project will be in the /dist directory. twilio.min.js is the minified version of the code.

You can copy either the twilio.js or the twilio.min.js file into your project and then provide a link to it in your html. For example:

<script type="text/javascript" src="twilio.min.js"></script>

Using this method, you can access the SDK through the browser global:

const Device = Twilio.Device;

Supported Browsers

The following table indicates the browsers supported by the Twilio Voice JavaScript SDK. We support the most recent (N) and the two previous (N-2) versions of these browsers unless otherwise indicated.

Chrome Firefox Safari* Edge**
Android
iOS
Linux
macOS
Windows

* WebRTC support in Safari started with Safari version 11.

** We support Chromium-based Edge only. Legacy Edge isn’t supported. See this advisory for more details.

Mobile browsers lack the ability to receive or maintain call connectivity whilst in the background and they do not allow GSM call interruption handling. These lead to poor user experience. To create the best user experience, Twilio recommends understanding these limitations when creating mobile Voice Applications. Twilio also recommends evaluating the iOS and Android SDKs for creating mobile Voice Applications.

Electron Support

Twilio Voice JavaScript SDK is also supported on the latest Electron version

Security

Channel Type
Signaling TLS (Secure Web Socket)
Media DTLS-SRTP (AES_CM_128_HMAC_SHA1_80)

Current Releases

As of version 1.3, Twilio Voice JavaScript SDK (formerly known as Twilio Client JS SDK) has been strictly following semantic versioning: minor-level updates only contain feature updates and are completely backward compatible with 1.3.0 and newer.

Deprecated Releases

Support for twilio.js 1.1 and 1.2 ceased on February 14, 2018. If you are still using either of these versions, please use the Migration Guide to upgrade to the latest version.

このページを評価:

サポートが必要ですか?

コーディングに関するご質問、ご不明点等ございましたら、お問い合わせからご連絡いただくか、TwilioのStack Overflow Collectiveにアクセスいただくか、Stack OverflowサイトでTwilioタグを検索してください。

        
        
        

        フィードバックいただき、ありがとうございました。

        フィードバックいただいた理由を選択してください。その他、ご意見をいただければ、今後のドキュメントの改善に役立てさせていただきます。

        フィードバックを送信中...
        🎉 フィードバックいただき、ありがとうございました。
        何らかの問題が発生しました。もう一度試してください。

        フィードバックいただき、ありがとうございました。

        Twilioを紹介して$10ゲットしてください。次の3ステップです。

        ステップ1

        リンクの取得

        無料の個人用紹介リンクをこちらから取得してください

        ステップ2

        $10受け取るには

        あなたの顧客がサインアップし、リンクからアップグレードすると、プレゼントします

        ステップ3

        $10ゲット

        1,250通の無料SMS
        または、1,000分の無料音声通話
        または、12,000チャット
        そのほか