SIP.js入門｜ブラウザで音声通話を作る仕組みと基本用語

この記事の最終更新日: 2026年6月24日

ブラウザで音声通話を作りたいと思ったとき、よく出てくる技術が WebRTC です。

WebRTCを使うと、ChromeやSafariなどのブラウザ上で、マイク音声やカメラ映像をリアルタイムに送受信できます。

ただし、WebRTCだけを知っていても、実際に「電話」のような機能を作るには少し足りません。

たとえば、次のような処理が必要になります。

誰に電話をかけるのか
相手をどう呼び出すのか
着信をどう受けるのか
通話開始・終了をどう管理するのか
既存の電話システムやPBXとどうつなぐのか

こうした「通話の制御」を扱うために使われるのが SIP です。

そして、JavaScriptでSIPとWebRTCを扱いやすくするライブラリの一つが SIP.js です。

この記事では、SIP.jsとは何か、ブラウザで音声通話が動く仕組み、基本用語、実装時に知っておきたいポイントを初心者向けに解説します。

SIP.jsとは？

SIP.js は、JavaScriptでSIPベースのリアルタイム通信を実装するためのライブラリです。

公式サイトでは、SIP.jsはSIP over WebSocketを使ってSIP User Agentを登録し、音声・ビデオセッション、メッセージング、プレゼンス、保留、転送、DTMFなどを扱えるライブラリとして紹介されています。(sipjs.com)

簡単に言うと、SIP.jsは次のような用途で使われます。

用途	内容
ブラウザから電話をかける	Web画面上のボタンから音声通話を開始する
ブラウザで着信を受ける	コールセンター画面やWebソフトフォンで着信する
SIPサーバーと連携する	Asterisk、FreeSWITCH、PBXなどと接続する
WebRTC通話を制御する	発信、応答、切断、保留などをJavaScriptで管理する
業務システムに通話機能を組み込む	CRM、管理画面、問い合わせシステムなどに電話機能を追加する

SIP.jsのGitHubでも、WebRTCによる音声・ビデオセッション作成、SIP over WebSocket、DTMF、保留、転送、画面共有、主要ブラウザ対応などが特徴として挙げられています。(GitHub)

SIP.jsを一言でいうと

SIP.jsを一言でいうと、ブラウザをSIP電話のように動かすためのJavaScriptライブラリ です。

通常、SIP電話というと、物理的なIP電話機やソフトフォンアプリをイメージするかもしれません。

SIP.jsを使うと、それに近いことをブラウザ上で実現できます。

たとえば、次のような画面を作れます。

顧客管理画面
  └─ 顧客詳細
       ├─ 電話番号
       ├─ 「発信」ボタン
       ├─ 通話中ステータス
       ├─ ミュートボタン
       └─ 切断ボタン

ユーザーは専用アプリを入れなくても、ブラウザから通話できます。

そもそもSIPとは？

SIP は、Session Initiation Protocol の略です。

音声通話やビデオ通話などのセッションを開始・変更・終了するためのプロトコルです。

電話でいうと、SIPは主に以下のような制御を担当します。

発信する
着信する
応答する
拒否する
通話を切る
保留する
転送する

重要なのは、SIPは「音声そのもの」を運ぶ技術ではなく、主に 通話を始める・終わらせる・制御するための仕組み だという点です。

実際の音声や映像の通信には、WebRTCやRTPなど別の仕組みが関わります。

WebRTCとは？

WebRTC は、ブラウザでリアルタイム通信を行うための技術です。

WebRTCを使うと、ブラウザ上で次のような通信ができます。

音声通話
ビデオ通話
画面共有
P2P通信
リアルタイムデータ通信

SIP.jsでは、実際の音声・映像のやり取りにWebRTCを利用します。

つまり、SIP.jsにおける役割分担は次のようになります。

技術	役割
SIP	発信・着信・応答・切断などの通話制御
WebSocket	ブラウザとSIPサーバーを接続する通信経路
WebRTC	音声・映像をリアルタイムに送受信する
SIP.js	これらをJavaScriptから扱いやすくする

SIP.jsのドキュメントでも、ブラウザ環境向けの実装として、WebRTC用のSession Description Handlerや、SIP over secure WebSocketのTransportが提供されていることが説明されています。(GitHub)

なぜSIP.jsが必要なのか？

WebRTCだけでも、ブラウザ通話は作れます。

しかし、WebRTC単体では「電話らしい制御」は自分で設計する必要があります。

たとえば、WebRTCだけで実装しようとすると、次のような仕組みを自前で作る必要があります。

相手を識別する仕組み
発信リクエストを送る仕組み
着信を通知する仕組み
応答・拒否・切断を管理する仕組み
SDPを交換する仕組み
通話状態を管理する仕組み

一方、SIP.jsを使うと、SIPという既存の電話系プロトコルに乗せて、これらの処理を扱えます。

特に、既存のSIPサーバーやPBXと連携したい場合は、SIP.jsが有力な選択肢になります。

ブラウザで音声通話が動く基本的な流れ

SIP.jsでブラウザ音声通話を作るときの流れは、ざっくり次のようになります。

1. ブラウザでSIP.jsを読み込む
2. SIPサーバーへWebSocketで接続する
3. SIPアカウントでREGISTERする
4. 相手にINVITEを送って発信する
5. SDPを交換する
6. WebRTCで音声の通信経路を作る
7. 通話する
8. BYEで通話を終了する

もう少しわかりやすく言うと、SIP.jsは「電話をかけるための合図」をSIPで送り、実際の音声はWebRTCで流します。

SIP.jsの全体構成

SIP.jsを使った構成は、一般的に次のようになります。

ブラウザ
  └─ SIP.js
       ├─ SIP over WebSocket
       └─ WebRTC

        ↓ WSS

SIPサーバー / PBX
  ├─ Asterisk
  ├─ FreeSWITCH
  ├─ Kamailio
  ├─ OpenSIPS
  └─ SIPサービス

        ↓

相手側のSIP端末・ブラウザ・電話網など

ブラウザは通常のSIP UDP/TCPを直接扱えないため、SIP over WebSocketを使います。

本番環境では、暗号化された WSS を使うのが一般的です。

SIP.jsの基本用語

ここからは、SIP.jsを理解するうえで重要な用語を整理します。

UserAgent

UserAgent は、SIP.jsにおける中心的な存在です。

SIPの世界では、発信したり着信したりする端末のことをUser Agentと呼びます。

SIP.jsのUserAgentは、ブラウザ上のSIPクライアントを表します。

主な役割は次のとおりです。

SIPサーバーへ接続する
SIPメッセージを送受信する
発信・着信の起点になる
REGISTERやINVITEなどの処理に関わる

SIP.jsのUser Agentガイドでは、通話やメッセージを行うにはUserAgentを作成し、接続先としてWebSocket URLを指定する流れが説明されています。(sipjs.com)

Registerer

Registerer は、SIPサーバーに自分の存在を登録するためのものです。

電話でいうと、「このユーザーは現在オンラインです。着信できます」とSIPサーバーに知らせる処理です。

SIPではこの登録処理を REGISTER と呼びます。

SIP.jsのUser Agentガイドでも、着信やメッセージを受けるためにはUserAgent作成後にRegistererを作り、UserAgentを開始してからregisterする流れが紹介されています。(sipjs.com)

SimpleUser

SimpleUser は、SIP.jsを比較的簡単に使うためのインターフェースです。

SIPの細かい知識が少なくても、発信・着信・切断などを扱いやすくするために用意されています。

SIP.jsのドキュメントでは、SimpleUserは「電話が何かを理解していれば使いやすく、SIPの知識は最小限でよい」インターフェースとして説明されています。(GitHub)

初心者が最初に試すなら、まずはSimpleUserから入るのがわかりやすいです。

ただし、複雑な通話制御や細かいSIP制御をしたい場合は、UserAgentやSessionなどの低レベルAPIを使う場面もあります。

Inviter

Inviter は、こちらから通話を開始するときに使われるクラスです。

SIPでは、通話開始のリクエストとして INVITE というメッセージを送ります。

そのため、発信側のセッションを扱うものがInviterです。

イメージとしては、次のような役割です。

発信者ブラウザ
  └─ Inviter
       └─ INVITEを送信

Invitation

Invitation は、相手から着信が来たときに使われるオブジェクトです。

相手からINVITEを受け取ると、SIP.js側ではInvitationとして扱います。

アプリ側では、Invitationに対して次のような操作を行います。

accept：応答する
reject：拒否する
stateChange：状態変化を監視する

つまり、Inviterが「発信側」、Invitationが「着信側」と考えると理解しやすいです。

Session

Session は、通話セッションそのものを表します。

通話には状態があります。

たとえば、次のような状態です。

初期状態
接続中
通話確立
終了処理中
終了済み

SIP.jsのAttach Mediaガイドでは、セッションが Established になったタイミングで、ユーザーに音声を再生するためのメディア処理を行う流れが説明されています。(sipjs.com)

実際のアプリでは、このセッション状態に応じてUIを変えます。

発信中 → 「呼び出し中」と表示
通話中 → 通話時間・ミュートボタンを表示
終了済み → 通話画面を閉じる

SessionDescriptionHandler

SessionDescriptionHandler は、WebRTCのメディア処理に関わる部分です。

SIP.jsはSIPの制御だけでなく、WebRTCで音声・映像をつなぐためのSDP処理も扱います。

ただし、音声要素や映像要素への接続など、メディアの扱いの多くはアプリ側で制御する設計です。

公式ガイドでも、SIP.jsはメディア処理の大部分をユーザーアプリケーション側に委ねると説明されています。(sipjs.com)

SDP

SDP は、Session Description Protocolの略です。

WebRTCやSIP通話では、音声・映像通信を始める前に、次のような情報を交換します。

使えるコーデック
音声か映像か
IPアドレスやポート候補
暗号化方式
メディアの方向

この「通信条件の説明書」のようなものがSDPです。

SIP.jsを使っていると、内部的にSDPの交換が行われます。

ICE / STUN / TURN

ブラウザ通話でつまずきやすいのが、ネットワーク越しの接続です。

特に、自宅ルーター、社内ネットワーク、モバイル回線、VPNなどをまたぐ場合、相手と直接通信できないことがあります。

そこで関係するのが、ICE、STUN、TURNです。

用語	役割
ICE	通信できる経路を探す仕組み
STUN	自分のグローバルIPやポートを知るための仕組み
TURN	直接通信できないときに中継する仕組み

SIP.jsを使えばすべて自動で解決する、というわけではありません。

実運用では、SIPサーバー側の設定やSTUN/TURNサーバーの準備が重要になります。

SIP.jsの簡単な実装イメージ

以下は、SIP.jsのSimpleUserを使って音声通話を行うイメージです。

実際には、SIPサーバーのURL、アカウント、認証情報、音声要素などを環境に合わせて設定する必要があります。

import { Web } from "sip.js";

const server = "wss://sip.example.com";

const simpleUser = new Web.SimpleUser(server, {
  aor: "sip:alice@example.com",
  media: {
    constraints: {
      audio: true,
      video: false,
    },
    remote: {
      audio: document.getElementById("remoteAudio") as HTMLAudioElement,
    },
  },
});

await simpleUser.connect();
await simpleUser.register();

await simpleUser.call("sip:bob@example.com");

このコードの流れは、次のようになります。

1. SIP.jsを読み込む
2. WSSのSIPサーバーを指定する
3. 自分のSIPアドレスを指定する
4. マイク音声を使う設定にする
5. 相手の音声をaudioタグで再生する
6. SIPサーバーへ接続する
7. REGISTERする
8. 相手に発信する

GitHubのREADMEでも、Web.SimpleUser を使ってWebSocketサーバーに接続し、SIP宛先へ発信するサンプルが紹介されています。(GitHub)

SIP.jsで音声通話を作るときの画面イメージ

SIP.js自体はUIコンポーネントを提供するライブラリではありません。

そのため、画面は自分で作る必要があります。

たとえば、Reactなどで作る場合は次のような状態を持つことになります。

type CallStatus =
  | "idle"
  | "connecting"
  | "registered"
  | "calling"
  | "ringing"
  | "inCall"
  | "ended"
  | "error";

UIとしては、次のような部品が必要です。

発信ボタン
応答ボタン
拒否ボタン
切断ボタン
ミュートボタン
通話中ステータス
通話時間
エラー表示
マイク権限の案内
着信音

SIP.jsは通話の土台を提供しますが、ユーザーにとって使いやすい電話画面は、アプリ側で設計する必要があります。

SIP.jsを使うメリット

既存のSIP/PBXと連携しやすい

SIP.jsの大きなメリットは、既存のSIP基盤と連携しやすいことです。

すでにAsteriskやFreeSWITCHなどを使っている場合、ブラウザをソフトフォンのように扱える可能性があります。

SIP.jsの公式サイトでも、SIPサーバーが必要な場合にFreeSWITCHやAsteriskなどを使えることが紹介されています。(sipjs.com)

ブラウザだけで電話機能を作れる

専用アプリをインストールせず、Webアプリに通話機能を組み込めます。

たとえば、次のような使い方ができます。

管理画面から顧客に電話する
コールセンターのオペレーター画面を作る
ブラウザ内線を作る
問い合わせ画面に通話機能を組み込む
CRMと通話履歴を連携する

Webシステムと電話機能を一体化できるのが大きな利点です。

JavaScript/TypeScriptで扱える

SIP.jsはJavaScriptから利用でき、GitHub上でもTypeScriptで書かれていることが示されています。(GitHub)

そのため、React、Vue、Angular、Next.jsなどのフロントエンドアプリにも組み込みやすいです。

SIP.jsを使うときの注意点

SIPサーバーが必要

SIP.jsはブラウザ側のライブラリです。

これだけで電話システムが完成するわけではありません。

通常は、次のようなSIPサーバーやサービスが必要です。

Asterisk
FreeSWITCH
Kamailio
OpenSIPS
OnSIP
その他のSIP/PBXサービス

「SIP.jsを入れればすぐ電話できる」というより、SIPサーバーと組み合わせて使うものだと考えるのが正確です。

サーバー側のWebRTC対応が必要

SIPサーバーが通常のIP電話に対応していても、ブラウザ通話がそのまま動くとは限りません。

ブラウザで使う場合は、サーバー側でも次のような対応が必要になります。

WebSocket / WSS
TLS証明書
DTLS-SRTP
ICE
STUN/TURN
コーデック設定
NAT対策

特にAsteriskやFreeSWITCHと接続する場合、WebRTC向けの設定が不足していると、登録はできても音が出ない、片方向だけ聞こえる、といった問題が起きやすいです。

マイク権限やブラウザ制約に注意する

ブラウザ通話では、ユーザーのマイク権限が必要です。

以下のようなケースでは通話できません。

ユーザーがマイク許可を拒否した
HTTPSではないページで実行している
ブラウザが自動再生をブロックした
音声出力先が正しくない
端末にマイクがない

Webアプリとして提供する場合は、エラー時の案内も重要です。

SIP.jsが向いているケース

SIP.jsは、次のようなケースに向いています。

ケース	理由
ブラウザで電話機能を作りたい	Web画面に発信・着信を組み込める
既存PBXと連携したい	SIPベースの電話基盤と相性がよい
CRMにクリック発信を追加したい	顧客情報と通話機能を連携しやすい
コールセンター画面を作りたい	着信・応答・保留・転送などを画面化できる
専用アプリを配布したくない	ブラウザだけで利用できる

特に、業務システムと電話機能を統合したい場合に使いやすいライブラリです。

SIP.jsが向いていないケース

一方で、次のような場合は別の選択肢も検討した方がよいです。

ケース	理由
SIPサーバーを運用したくない	サーバー構築・保守が必要になる
とにかく簡単にビデオ通話を作りたい	Twilio、Daily、AgoraなどのSDKの方が簡単な場合がある
電話網やPBX連携が不要	独自WebRTCシグナリングでも十分な場合がある
SIPの知識がまったくない	トラブル対応で詰まりやすい
モバイルアプリ中心で作りたい	ブラウザ前提とは別の設計が必要になる

SIP.jsは便利ですが、SIPやWebRTCの基本をある程度理解して使うべきライブラリです。

初心者が最初に覚えるべきポイント

SIP.jsを学び始めるなら、まずは次のポイントを押さえると理解しやすいです。

SIP.js = ブラウザでSIP通話を扱うためのJavaScriptライブラリ
SIP = 発信・着信・切断などの通話制御
WebRTC = 音声・映像のリアルタイム通信
WebSocket = ブラウザとSIPサーバーをつなぐ経路
REGISTER = 自分が着信可能であることを登録する処理
INVITE = 相手に通話開始を要求する処理
SDP = 音声・映像通信の条件を交換する情報
ICE/STUN/TURN = ネットワーク越しに通話を成立させる仕組み

最初からSIPのRFCやWebRTCの詳細に深入りする必要はありません。

まずは、「SIPで通話を制御し、WebRTCで音声を流す」と理解するとよいです。