Edit in JSFiddle

/*
 * Check out the full guide at
 *   http://sipjs.com/guides/send-dtmf/
 *
 * This sample uses
 *   http://sipjs.com/download/sip-0.6.0.js
 *
 * Login with your developer account to receive calls at
 *   http://sipjs.com/demo-phone
 */

var session;

//Creates the anonymous user agent so that you can make calls
var userAgent = new SIP.UA();
userAgent.once('connected', onConnected);

var endButton = document.getElementById('endCall');
endButton.addEventListener("click", function () {
    session.bye();
    alert("Call Ended");
}, false);

document.getElementById('1').addEventListener("click", function () {
    session.dtmf(1);
}, false);
document.getElementById('2').addEventListener("click", function () {
    session.dtmf(2);
}, false);
document.getElementById('3').addEventListener("click", function () {
    session.dtmf(3);
}, false);
document.getElementById('4').addEventListener("click", function () {
    session.dtmf(4);
}, false);
document.getElementById('5').addEventListener("click", function () {
    session.dtmf(5);
}, false);
document.getElementById('6').addEventListener("click", function () {
    session.dtmf(6);
}, false);
document.getElementById('7').addEventListener("click", function () {
    session.dtmf(7);
}, false);
document.getElementById('8').addEventListener("click", function () {
    session.dtmf(8);
}, false);
document.getElementById('9').addEventListener("click", function () {
    session.dtmf(9);
}, false);
document.getElementById('0').addEventListener("click", function () {
    session.dtmf(0);
}, false);

function onConnected() {
    //here you determine whether the call has video and audio

    var options = {
        media: {
            constraints: {
                audio: true,
                video: true
            },
            render: {
                remote: {
                    video: document.getElementById('remoteVideo')
                },
                local: {
                    video: document.getElementById('localVideo')
                }
            }
        }
    };
    //makes the call
    session = userAgent.invite('sip:welcome@junctionnetworks.com', options);
}
<video id="remoteVideo"></video>
<video id="localVideo" muted="muted"></video>
<button id="endCall">End Call</button>
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
<button id="5">5</button>
<button id="6">6</button>
<button id="7">7</button>
<button id="8">8</button>
<button id="9">9</button>
<button id="0">0</button>
<!-- sip.js is included by JsFiddle as External Resources -->
video {
    border: 1px solid lightgrey;
}