WebRTC
dtmf

WebRTCでDTMFやってみた

More than 1 year has passed since last update.

はじめに

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


自己紹介


今日のスライドの目的

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

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

以下、wikipediaより…

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

ようはあれです

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


デモ


WebRTCでも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をつなぎこむときなんかに使われるはずです

試してみたい方は

https://webrtc.github.io/samples/src/content/peerconnection/dtmf/