WebRTCでDTMFやってみた

はじめに

この記事は WebRTC入門者LT会 #2 での発表資料です。

---

自己紹介

• 名前: なかゆうすけ（@Tukimikage）
• 仕事:
  • SkyWayの中の人
  • HTML5 Experts.jpの運営
• コミュニティ：
  • WebRTC Meetup Tokyo/Osaka/Japan主催
  • WebRTC Beginners Tokyo

---

今日のスライドの目的

• WebRTCで普段触れられることが少ないマイナーなネタに触れてもらう
  • ぶっちゃけ役立ち度ミニマムですｗ

---

みなさん、DTMF知ってますか？

以下、wikipediaより…

• DTMF（英: Dual-Tone Multi-Frequency）は、0から9までの数字と、*、#、A、B、C、Dの記号の計16種類の符号を、低群・高群の2つの音声周波数帯域の合成信号音で送信する方法である。
• 別名「トーン信号」「プッシュ信号」とも呼ばれ、その信号音は人間の可聴域にあるため日本語では「ピ、ポ、パ」とも擬音語表記される。
• プッシュ式電話回線での電話番号の送出、その他音声回線での数字入力（例・コールセンターでの着信後の項目選択）などで用いられる。

---

ようはあれです

コールセンターとかに電話して、音声ガイダンスが流れて番号入力を求められる時に使われている技術です。

---

デモ

---

WebRTCでもDTMFが考慮されています

• APIスペック
  • https://www.w3.org/TR/webrtc/#peer-to-peer-dtmf

---

RTCDTMFSender

• 最新の仕様ではRtpSenderの中に、RTCDTMFSenderが包含されています

partial interface RTCRtpSender {
    readonly attribute RTCDTMFSender? dtmf;
};

---

RTCDTMFSender

interface RTCDTMFSender : EventTarget {
    void insertDTMF(DOMString tones,
                    optional unsigned long duration = 100,
                    optional unsigned long interToneGap = 70);
             attribute EventHandler ontonechange;
    readonly attribute DOMString    toneBuffer;
};

• duration : 送出時間
• interToneGap : 周期

---

RTCDTMFToneChangeEvent

[Constructor(DOMString type, RTCDTMFToneChangeEventInit eventInitDict)]
interface RTCDTMFToneChangeEvent : Event {
    readonly attribute DOMString tone;
};

---

対応ブラウザ

Chromeのみ

---

実装は？

トーン送信準備

var senders = peerConnection.getSenders();
var audioSender = senders.find(function(sender) {
    return sender.track && sender.track.kind === 'audio';
});
dtmfSender = audioSender.dtmf;
dtmfSender.ontonechange = dtmfOnToneChange;

---

トーンの送信

dtmfSender.insertDTMF(tones, duration, gap);

---

トーン送信時のイベント

function dtmfOnToneChange(tone) {
    if (tone) {
        console.log('Sent DTMF tone: ' + tone.tone);
    }
}

---

どこで使うのか？

• コールセンター
  • IVRとWebRTCをつなぎこむときなんかに使われるはずです

---

試してみたい方は