{"intent":"webrtc-calling","title":"Browser-Based Calling with WebRTC","description":"Make and receive phone calls directly from the browser using Telnyx WebRTC. No plugins required — just open the HTML file and start calling.","category":"voice","difficulty":"beginner","time_to_run":"3 minutes","stack":["html","javascript","telnyx-webrtc"],"commands":[{"step":"Open the app","command":"Open index.html in your browser","expected_output":"Phone dialer UI appears"},{"step":"Enter credentials","command":"Enter your SIP credential and caller ID in the settings","expected_output":"Connected! Ready to make calls."},{"step":"Make a call","command":"Dial a phone number and click Call","expected_output":"Ringing... Connected when answered"}],"prerequisites":["Telnyx account","A Telnyx phone number configured for voice","A modern browser (Chrome, Firefox, Edge)","Telnyx SIP Connection credential"],"files":{"index.html":"\n\n\n \n \n Telnyx WebRTC Phone\n \n\n\n
\n

📞 Telnyx WebRTC

\n
Not connected
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n
\n
\n ⚙️ Connection Settings\n \n \n \n \n \n \n
\n
\n \n\n\n","app.js":"// Telnyx WebRTC Phone — Browser-based calling\n// Uses the TelnyxRTC SDK for WebRTC connectivity\n//\n// To use this app:\n// 1. Create a SIP Connection in the Telnyx portal\n// 2. Enter your SIP credentials in the settings panel\n// 3. Click \"Connect\" and start making calls\n\n(function () {\n \"use strict\";\n\n // UI Elements\n const statusEl = document.getElementById(\"status\");\n const displayEl = document.getElementById(\"display\");\n const btnCall = document.getElementById(\"btnCall\");\n const btnHangup = document.getElementById(\"btnHangup\");\n const sipUserInput = document.getElementById(\"sipUser\");\n const sipPasswordInput = document.getElementById(\"sipPassword\");\n const callerIdInput = document.getElementById(\"callerId\");\n\n let currentCall = null;\n let client = null;\n\n // ── Status Updates ──\n function setStatus(text, type = \"\") {\n statusEl.textContent = text;\n statusEl.className = \"status\" + (type ? \" \" + type : \"\");\n }\n\n // ── Keypad Input ──\n let dialedNumber = \"\";\n document.querySelectorAll(\".key\").forEach((key) => {\n key.addEventListener(\"click\", () => {\n const digit = key.getAttribute(\"data-digit\");\n dialedNumber += digit;\n displayEl.textContent = dialedNumber;\n // Send DTMF if in a call\n if (currentCall && currentCall.state === \"active\") {\n currentCall.dtmf(digit).catch(console.error);\n }\n });\n });\n\n // ── Initialize TelnyxRTC Client ──\n async function connect() {\n const sipUser = sipUserInput.value.trim();\n const sipPassword = sipPasswordInput.value.trim();\n\n if (!sipUser || !sipPassword) {\n setStatus(\"Enter SIP credentials in settings\", \"error\");\n return;\n }\n\n try {\n setStatus(\"Connecting...\");\n\n // Load TelnyxRTC SDK dynamically from CDN\n if (!window.TelnyxRTC) {\n await loadScript(\"https://unpkg.com/@telnyx/webrtc@2/cjs/telnyxrtc.js\");\n }\n\n const TelnyxRTC = window.TelnyxRTC.default || window.TelnyxRTC;\n\n client = new TelnyxRTC({\n login: sipUser,\n password: sipPassword,\n });\n\n // Connection events\n client.on(\"telnyx.socket.open\", () => {\n setStatus(\"Connected\", \"connected\");\n btnCall.disabled = false;\n });\n\n client.on(\"telnyx.socket.close\", () => {\n setStatus(\"Disconnected\", \"error\");\n btnCall.disabled = true;\n btnHangup.disabled = true;\n });\n\n client.on(\"telnyx.socket.error\", (err) => {\n setStatus(\"Connection error: \" + (err.message || err), \"error\");\n });\n\n // Call events\n client.on(\"telnyx.notification\", (notification) => {\n handleNotification(notification);\n });\n\n // Connect\n client.connect();\n } catch (err) {\n setStatus(\"Failed to connect: \" + (err.message || err), \"error\");\n }\n }\n\n // ── Handle Call Notifications ──\n function handleNotification(notification) {\n const { call } = notification;\n if (!call) return;\n\n switch (call.state) {\n case \"ringing\":\n // Incoming call\n setStatus(\"Incoming call from \" + call.remoteCallerNumber);\n currentCall = call;\n btnCall.disabled = true;\n btnHangup.disabled = false;\n // Auto-answer for demo purposes\n call.answer();\n break;\n case \"active\":\n setStatus(\"In call\", \"connected\");\n btnHangup.disabled = false;\n break;\n case \"hangup\":\n case \"destroy\":\n setStatus(\"Call ended\");\n currentCall = null;\n btnCall.disabled = false;\n btnHangup.disabled = true;\n dialedNumber = \"\";\n displayEl.textContent = \"\";\n break;\n }\n }\n\n // ── Make Outbound Call ──\n btnCall.addEventListener(\"click\", () => {\n if (!client || !dialedNumber) return;\n\n const callerId = callerIdInput.value.trim();\n setStatus(\"Calling \" + dialedNumber + \"...\");\n\n currentCall = client.newCall({\n destinationNumber: dialedNumber,\n callerNumber: callerId || dialedNumber,\n });\n\n btnCall.disabled = true;\n btnHangup.disabled = false;\n });\n\n // ── Hang Up ──\n btnHangup.addEventListener(\"click\", () => {\n if (currentCall) {\n currentCall.hangup();\n }\n });\n\n // ── Auto-connect on credential input ──\n sipPasswordInput.addEventListener(\"change\", connect);\n\n // ── Helper: Load script dynamically ──\n function loadScript(src) {\n return new Promise((resolve, reject) => {\n const script = document.createElement(\"script\");\n script.src = src;\n script.onload = resolve;\n script.onerror = () => reject(new Error(\"Failed to load \" + src));\n document.head.appendChild(script);\n });\n }\n})();\n"},"evaluate_command":"curl -s http://localhost:8080 | head -1","telnyx_products":["webrtc","call-control","phone-numbers"],"schema":"telnyx.starter-detail.v1","schema_version":"1.0","canonical_url":"https://telnyx.com/ai/starters/webrtc-calling.json","bias_disclosure":{"maintainer":"Telnyx","data_sources":["telnyx-product-docs"],"permission":"product-evaluation"}}