telnyx-webrtc-client-js
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseTelnyx WebRTC - JavaScript SDK
Telnyx WebRTC - JavaScript SDK
Build real-time voice communication into browser applications.
Prerequisites: Create WebRTC credentials and generate a login token using the Telnyx server-side SDK. See theskill in your server language plugin (e.g.,telnyx-webrtc-*,telnyx-python).telnyx-javascript
在浏览器应用中构建实时语音通信功能。
前提条件:使用Telnyx服务端SDK创建WebRTC凭证并生成登录令牌。请查看您所用服务端语言插件中的技能(例如telnyx-webrtc-*、telnyx-python)。telnyx-javascript
Installation
安装
bash
npm install @telnyx/webrtc --saveImport the client:
js
import { TelnyxRTC } from '@telnyx/webrtc';bash
npm install @telnyx/webrtc --save导入客户端:
js
import { TelnyxRTC } from '@telnyx/webrtc';Authentication
身份验证
Option 1: Token-Based (Recommended)
选项1:基于令牌(推荐)
js
const client = new TelnyxRTC({
login_token: 'your_jwt_token',
});
client.connect();js
const client = new TelnyxRTC({
login_token: 'your_jwt_token',
});
client.connect();Option 2: Credential-Based
选项2:基于凭证
js
const client = new TelnyxRTC({
login: 'sip_username',
password: 'sip_password',
});
client.connect();Important: Never hardcode credentials in frontend code. Use environment variables or prompt users.
js
const client = new TelnyxRTC({
login: 'sip_username',
password: 'sip_password',
});
client.connect();重要提示:切勿在前端代码中硬编码凭证。请使用环境变量或提示用户输入。
Disconnect
断开连接
js
// When done, disconnect and remove listeners
client.disconnect();
client.off('telnyx.ready');
client.off('telnyx.notification');js
// 使用完毕后,断开连接并移除监听器
client.disconnect();
client.off('telnyx.ready');
client.off('telnyx.notification');Media Elements
媒体元素
Specify an HTML element to play remote audio:
js
client.remoteElement = 'remoteMedia';HTML:
html
<audio id="remoteMedia" autoplay="true" />指定用于播放远程音频的HTML元素:
js
client.remoteElement = 'remoteMedia';HTML代码:
html
<audio id="remoteMedia" autoplay="true" />Events
事件
js
let activeCall;
client
.on('telnyx.ready', () => {
console.log('Ready to make calls');
})
.on('telnyx.error', (error) => {
console.error('Error:', error);
})
.on('telnyx.notification', (notification) => {
if (notification.type === 'callUpdate') {
activeCall = notification.call;
// Handle incoming call
if (activeCall.state === 'ringing') {
// Show incoming call UI
// Call activeCall.answer() to accept
}
}
});js
let activeCall;
client
.on('telnyx.ready', () => {
console.log('已准备好发起通话');
})
.on('telnyx.error', (error) => {
console.error('错误:', error);
})
.on('telnyx.notification', (notification) => {
if (notification.type === 'callUpdate') {
activeCall = notification.call;
// 处理来电
if (activeCall.state === 'ringing') {
// 显示来电UI
// 调用activeCall.answer()接听
}
}
});Event Types
事件类型
| Event | Description |
|---|---|
| Client connected and ready |
| Error occurred |
| Call updates, incoming calls |
| In-call quality metrics (when debug enabled) |
| 事件 | 描述 |
|---|---|
| 客户端已连接并准备就绪 |
| 发生错误 |
| 通话更新、来电通知 |
| 通话中质量指标(启用调试时) |
Making Calls
发起通话
js
const call = client.newCall({
destinationNumber: '+18004377950',
callerNumber: '+15551234567',
});js
const call = client.newCall({
destinationNumber: '+18004377950',
callerNumber: '+15551234567',
});Receiving Calls
接听通话
js
client.on('telnyx.notification', (notification) => {
const call = notification.call;
if (notification.type === 'callUpdate' && call.state === 'ringing') {
// Incoming call - show UI and answer
call.answer();
}
});js
client.on('telnyx.notification', (notification) => {
const call = notification.call;
if (notification.type === 'callUpdate' && call.state === 'ringing') {
// 来电 - 显示UI并接听
call.answer();
}
});Call Controls
通话控制
js
// End call
call.hangup();
// Send DTMF tones
call.dtmf('1234');
// Mute audio
call.muteAudio();
call.unmuteAudio();
// Hold
call.hold();
call.unhold();js
// 结束通话
call.hangup();
// 发送DTMF音调
call.dtmf('1234');
// 静音
call.muteAudio();
call.unmuteAudio();
// 保持通话
call.hold();
call.unhold();Debugging & Call Quality
调试与通话质量
Enable Debug Logging
启用调试日志
js
const call = client.newCall({
destinationNumber: '+18004377950',
debug: true,
debugOutput: 'socket', // 'socket' (send to Telnyx) or 'file' (save locally)
});js
const call = client.newCall({
destinationNumber: '+18004377950',
debug: true,
debugOutput: 'socket', // 'socket'(发送至Telnyx)或 'file'(本地保存)
});In-Call Quality Metrics
通话中质量指标
js
const call = client.newCall({
destinationNumber: '+18004377950',
debug: true, // Required for metrics
});
client.on('telnyx.stats.frame', (stats) => {
console.log('Quality stats:', stats);
// Contains jitter, RTT, packet loss, etc.
});js
const call = client.newCall({
destinationNumber: '+18004377950',
debug: true, // 获取指标需启用此项
});
client.on('telnyx.stats.frame', (stats) => {
console.log('质量统计:', stats);
// 包含抖动、RTT、丢包率等数据
});Pre-Call Diagnosis
通话前诊断
Test connectivity before making calls:
js
import { PreCallDiagnosis } from '@telnyx/webrtc';
PreCallDiagnosis.run({
credentials: {
login: 'sip_username',
password: 'sip_password',
// or: loginToken: 'jwt_token'
},
texMLApplicationNumber: '+12407758982',
})
.then((report) => {
console.log('Diagnosis report:', report);
})
.catch((error) => {
console.error('Diagnosis failed:', error);
});发起通话前测试连接性:
js
import { PreCallDiagnosis } from '@telnyx/webrtc';
PreCallDiagnosis.run({
credentials: {
login: 'sip_username',
password: 'sip_password',
// 或: loginToken: 'jwt_token'
},
texMLApplicationNumber: '+12407758982',
})
.then((report) => {
console.log('诊断报告:', report);
})
.catch((error) => {
console.error('诊断失败:', error);
});Preferred Codecs
首选编解码器
Set codec preference for calls:
js
const allCodecs = RTCRtpReceiver.getCapabilities('audio').codecs;
// Prefer Opus for AI/high quality
const opusCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('opus')
);
// Or PCMA for telephony compatibility
const pcmaCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('pcma')
);
client.newCall({
destinationNumber: '+18004377950',
preferred_codecs: [opusCodec],
});设置通话的编解码器偏好:
js
const allCodecs = RTCRtpReceiver.getCapabilities('audio').codecs;
// 优先选择Opus以适配AI/高质量需求
const opusCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('opus')
);
// 或选择PCMA以适配电话系统兼容性
const pcmaCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('pcma')
);
client.newCall({
destinationNumber: '+18004377950',
preferred_codecs: [opusCodec],
});Registration State
注册状态
Check if client is registered:
js
const isRegistered = await client.getIsRegistered();
console.log('Registered:', isRegistered);检查客户端是否已注册:
js
const isRegistered = await client.getIsRegistered();
console.log('已注册:', isRegistered);AI Agent Integration
AI Agent集成
Anonymous Login
匿名登录
Connect to an AI assistant without SIP credentials:
js
const client = new TelnyxRTC({
anonymous_login: {
target_id: 'your-ai-assistant-id',
target_type: 'ai_assistant',
},
});
client.connect();Note: The AI assistant must haveset totelephony_settings.supports_unauthenticated_web_calls.true
无需SIP凭证即可连接AI助手:
js
const client = new TelnyxRTC({
anonymous_login: {
target_id: 'your-ai-assistant-id',
target_type: 'ai_assistant',
},
});
client.connect();注意:AI助手必须将设置为telephony_settings.supports_unauthenticated_web_calls。true
Make Call to AI Assistant
呼叫AI助手
js
// After anonymous login, destinationNumber is ignored
const call = client.newCall({
destinationNumber: '', // Can be empty
remoteElement: 'remoteMedia',
});js
// 匿名登录后,destinationNumber将被忽略
const call = client.newCall({
destinationNumber: '', // 可以为空
remoteElement: 'remoteMedia',
});Recommended Codec for AI
AI推荐编解码器
js
const allCodecs = RTCRtpReceiver.getCapabilities('audio').codecs;
const opusCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('opus')
);
client.newCall({
destinationNumber: '',
preferred_codecs: [opusCodec], // Opus recommended for AI
});js
const allCodecs = RTCRtpReceiver.getCapabilities('audio').codecs;
const opusCodec = allCodecs.find(c =>
c.mimeType.toLowerCase().includes('opus')
);
client.newCall({
destinationNumber: '',
preferred_codecs: [opusCodec], // AI场景推荐使用Opus
});Browser Support
浏览器支持
| Platform | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Android | ✓ | ✓ | - | - |
| iOS | - | - | ✓ | - |
| Linux | ✓ | ✓ | - | - |
| macOS | ✓ | ✓ | ✓ | ✓ |
| Windows | ✓ | ✓ | - | ✓ |
| 平台 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Android | ✓ | ✓ | - | - |
| iOS | - | - | ✓ | - |
| Linux | ✓ | ✓ | - | - |
| macOS | ✓ | ✓ | ✓ | ✓ |
| Windows | ✓ | ✓ | - | ✓ |
Check Browser Support
检查浏览器支持
js
const webRTCInfo = TelnyxRTC.webRTCInfo;
console.log('WebRTC supported:', webRTCInfo.supportWebRTC);js
const webRTCInfo = TelnyxRTC.webRTCInfo;
console.log('WebRTC支持情况:', webRTCInfo.supportWebRTC);Troubleshooting
故障排除
| Issue | Solution |
|---|---|
| No audio | Check microphone permissions in browser |
| Echo/feedback | Use headphones or enable echo cancellation |
| Connection fails | Check network, firewall, or use TURN relay |
| Quality issues | Enable |
<!-- BEGIN AUTO-GENERATED API REFERENCE -- do not edit below this line -->
references/webrtc-server-api.md has the server-side WebRTC API — credential creation, token generation, and push notification setup. You MUST read it when setting up authentication or push notifications.
| 问题 | 解决方案 |
|---|---|
| 无音频 | 检查浏览器中的麦克风权限 |
| 回声/反馈 | 使用耳机或启用回声消除功能 |
| 连接失败 | 检查网络、防火墙,或使用TURN中继 |
| 通话质量问题 | 启用 |
<!-- BEGIN AUTO-GENERATED API REFERENCE -- do not edit below this line -->
references/webrtc-server-api.md包含服务端WebRTC API——凭证创建、令牌生成和推送通知设置。设置身份验证或推送通知时必须阅读此文档。
API Reference
API参考
TelnyxRTC
TelnyxRTC
The client connects your application to the Telnyx backend,
enabling you to make outgoing calls and handle incoming calls.
TelnyxRTCjs
// Initialize the client
const client = new TelnyxRTC({
// Use a JWT to authenticate (recommended)
login_token: login_token,
// or use your Connection credentials
// login: username,
// password: password,
});
// Attach event listeners
client
.on('telnyx.ready', () => console.log('ready to call'))
.on('telnyx.notification', (notification) => {
console.log('notification:', notification);
});
// Connect and login
client.connect();
// You can call client.disconnect() when you're done.
// Note: When you call `client.disconnect()` you need to remove all ON event methods you've had attached before.
// Disconnecting and Removing listeners.
client.disconnect();
client.off('telnyx.ready');
client.off('telnyx.notification');TelnyxRTCjs
// 初始化客户端
const client = new TelnyxRTC({
// 使用JWT进行身份验证(推荐)
login_token: login_token,
// 或使用您的Connection凭证
// login: username,
// password: password,
});
// 添加事件监听器
client
.on('telnyx.ready', () => console.log('可发起通话'))
.on('telnyx.notification', (notification) => {
console.log('通知:', notification);
});
// 连接并登录
client.connect();
// 使用完毕后可调用client.disconnect()。
// 注意:调用`client.disconnect()`时,需要移除所有已添加的ON事件方法。
// 断开连接并移除监听器
client.disconnect();
client.off('telnyx.ready');
client.off('telnyx.notification');Methods
方法
checkPermissions
checkPermissions
▸ checkPermissions(, ): <>
audio?video?PromisebooleanParams: (boolean), (boolean)
audiovideoReturns:
Promisejs
const client = new TelnyxRTC(options);
client.checkPermissions();▸ checkPermissions(, ): <>
audio?video?Promiseboolean参数: (布尔值), (布尔值)
audiovideo返回值:
Promisejs
const client = new TelnyxRTC(options);
client.checkPermissions();disableMicrophone
disableMicrophone
▸ disableMicrophone():
voidReturns:
voidjs
const client = new TelnyxRTC(options);
client.disableMicrophone();▸ disableMicrophone():
void返回值:
voidjs
const client = new TelnyxRTC(options);
client.disableMicrophone();enableMicrophone
enableMicrophone
▸ enableMicrophone():
voidReturns:
voidjs
const client = new TelnyxRTC(options);
client.enableMicrophone();▸ enableMicrophone():
void返回值:
voidjs
const client = new TelnyxRTC(options);
client.enableMicrophone();getAudioInDevices
getAudioInDevices
▸ getAudioInDevices(): <[]>
PromiseMediaDeviceInfoReturns:
Promise▸ getAudioInDevices(): <[]>
PromiseMediaDeviceInfo返回值:
PromisegetAudioOutDevices
getAudioOutDevices
▸ getAudioOutDevices(): <[]>
PromiseMediaDeviceInfoReturns:
Promise▸ getAudioOutDevices(): <[]>
PromiseMediaDeviceInfo返回值:
PromisegetDeviceResolutions
getDeviceResolutions
▸ getDeviceResolutions(): <[]>
deviceIdPromiseanyParams: (string)
deviceIdReturns:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getDeviceResolutions();
console.log(result);
}▸ getDeviceResolutions(): <[]>
deviceIdPromiseany参数: (字符串)
deviceId返回值:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getDeviceResolutions();
console.log(result);
}getDevices
getDevices
▸ getDevices(): <[]>
PromiseMediaDeviceInfoReturns:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getDevices();
console.log(result);
}▸ getDevices(): <[]>
PromiseMediaDeviceInfo返回值:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getDevices();
console.log(result);
}getVideoDevices
getVideoDevices
▸ getVideoDevices(): <[]>
PromiseMediaDeviceInfoReturns:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getVideoDevices();
console.log(result);
}▸ getVideoDevices(): <[]>
PromiseMediaDeviceInfo返回值:
Promisejs
async function() {
const client = new TelnyxRTC(options);
let result = await client.getVideoDevices();
console.log(result);
}handleLoginError
handleLoginError
▸ handleLoginError():
errorvoidParams: (any)
errorReturns:
void▸ handleLoginError():
errorvoid参数: (任意类型)
error返回值:
voidError handling
错误处理
An error will be thrown if is not specified.
destinationNumberjs
const call = client.newCall().catch(console.error);
// => `destinationNumber is required`如果未指定,将抛出错误。
destinationNumberjs
const call = client.newCall().catch(console.error);
// => `destinationNumber is required`Setting Custom Headers
设置自定义请求头
client.newCall({
client.newCall({
Setting Preferred Codec
设置首选编解码器
You can pass to the method to set codec preference during the call.
preferred_codecsnewCall您可以在方法中传入来设置通话期间的编解码器偏好。
newCallpreferred_codecsICE Candidate Prefetching
ICE候选预获取
ICE candidate prefetching is enabled by default. This pre-gathers ICE candidates when the
js
client.newCall({
destinationNumber: 'xxx',
prefetchIceCandidates: false,
});ICE候选预获取默认启用。这会在
js
client.newCall({
destinationNumber: 'xxx',
prefetchIceCandidates: false,
});Trickle ICE
Trickle ICE
Trickle ICE can be enabled by passing to the method.
trickleIcenewCalljs
client.newCall({
destinationNumber: 'xxx',
trickleIce: true,
});可通过在方法中传入来启用Trickle ICE。
newCalltrickleIcejs
client.newCall({
destinationNumber: 'xxx',
trickleIce: true,
});Call Recovery and recoveredCallId
recoveredCallId通话恢复与recoveredCallId
recoveredCallIdWhen a call is recovered after a network reconnection (reattach), the SDK
当网络重新连接后通话恢复(重新附加)时,SDK
Voice Isolation
语音隔离
Voice isolation options can be set by passing an object to the method. This property controls the settings of a MediaStreamTrack object. For reference on available audio constraints, see MediaTrackConstraints.
audionewCallEvents
事件
Params: (string), (Function)
eventNamecallback参数: (字符串), (函数)
eventNamecallbacksetAudioSettings
setAudioSettings
▸ setAudioSettings(): <>
settingsPromiseMediaTrackConstraintsParams: (IAudioSettings)
settingsReturns:
Promisejs
// within an async function
const constraints = await client.setAudioSettings({
micId: '772e94959e12e589b1cc71133d32edf543d3315cfd1d0a4076a60601d4ff4df8',
micLabel: 'Internal Microphone (Built-in)',
echoCancellation: false,
});▸ setAudioSettings(): <>
settingsPromiseMediaTrackConstraints参数: (IAudioSettings)
settings返回值:
Promisejs
// 在异步函数中
const constraints = await client.setAudioSettings({
micId: '772e94959e12e589b1cc71133d32edf543d3315cfd1d0a4076a60601d4ff4df8',
micLabel: 'Internal Microphone (Built-in)',
echoCancellation: false,
});webRTCInfo
webRTCInfo
▸ webRTCInfo(): |
StaticstringIWebRTCInfoReturns:
stringjs
const info = TelnyxRTC.webRTCInfo();
const isWebRTCSupported = info.supportWebRTC;
console.log(isWebRTCSupported); // => true▸ webRTCInfo(): |
静态方法stringIWebRTCInfo返回值:
stringjs
const info = TelnyxRTC.webRTCInfo();
const isWebRTCSupported = info.supportWebRTC;
console.log(isWebRTCSupported); // => truewebRTCSupportedBrowserList
webRTCSupportedBrowserList
▸ webRTCSupportedBrowserList(): []
StaticIWebRTCSupportedBrowserReturns:
IWebRTCSupportedBrowserjs
const browserList = TelnyxRTC.webRTCSupportedBrowserList();
console.log(browserList); // => [{"operationSystem": "Android", "supported": [{"browserName": "Chrome", "features": ["video", "audio"], "supported": "full"},{...}]▸ webRTCSupportedBrowserList(): []
静态方法IWebRTCSupportedBrowser返回值:
IWebRTCSupportedBrowserjs
const browserList = TelnyxRTC.webRTCSupportedBrowserList();
console.log(browserList); // => [{"operationSystem": "Android", "supported": [{"browserName": "Chrome", "features": ["video", "audio"], "supported": "full"},{...}]Call
Call
A is the representation of an audio or video call between
two browsers, SIP clients or phone numbers. The object is
created whenever a new call is initiated, either by you or the
remote caller. You can access and act upon calls initiated by
a remote caller in a event handler.
Callcalltelnyx.notificationTo create a new call, i.e. dial:
js
const call = client.newCall({
// Destination is required and can be a phone number or SIP URI
destinationNumber: '18004377950',
callerNumber: '155531234567',
});To answer an incoming call:
js
client.on('telnyx.notification', (notification) => {
const call = notification.call;
if (notification.type === 'callUpdate' && call.state === 'ringing') {
call.answer();
}
});Both the outgoing and incoming call has methods that can be hooked up to your UI.
js
// Hangup or reject an incoming call
call.hangup();
// Send digits and keypresses
call.dtmf('1234');
// Call states that can be toggled
call.hold();
call.muteAudio();Callcalltelnyx.notification创建新通话(拨号):
js
const call = client.newCall({
// 目标号码为必填项,可以是电话号码或SIP URI
destinationNumber: '18004377950',
callerNumber: '155531234567',
});接听来电:
js
client.on('telnyx.notification', (notification) => {
const call = notification.call;
if (notification.type === 'callUpdate' && call.state === 'ringing') {
call.answer();
}
});呼出和呼入通话都有可关联到UI的方法。
js
// 挂断或拒接来电
call.hangup();
// 发送按键音
call.dtmf('1234');
// 可切换的通话状态
call.hold();
call.muteAudio();Properties
属性
Accessors
访问器
Methods
方法
getStats
getStats
▸ getStats(, ):
callbackconstraintsvoidParams: (Function), (any)
callbackconstraintsReturns:
void▸ getStats(, ):
callbackconstraintsvoid参数: (函数), (任意类型)
callbackconstraints返回值:
voidsetAudioInDevice
setAudioInDevice
▸ setAudioInDevice(, ): <>
deviceIdmuted?PromisevoidParams: (string), (boolean)
deviceIdmutedReturns:
Promisejs
await call.setAudioInDevice('abc123');▸ setAudioInDevice(, ): <>
deviceIdmuted?Promisevoid参数: (字符串), (布尔值)
deviceIdmuted返回值:
Promisejs
await call.setAudioInDevice('abc123');setAudioOutDevice
setAudioOutDevice
▸ setAudioOutDevice(): <>
deviceIdPromisebooleanParams: (string)
deviceIdReturns:
Promisejs
await call.setAudioOutDevice('abc123');▸ setAudioOutDevice(): <>
deviceIdPromiseboolean参数: (字符串)
deviceId返回值:
Promisejs
await call.setAudioOutDevice('abc123');setVideoDevice
setVideoDevice
▸ setVideoDevice(): <>
deviceIdPromisevoidParams: (string)
deviceIdReturns:
Promisejs
await call.setVideoDevice('abc123');▸ setVideoDevice(): <>
deviceIdPromisevoid参数: (字符串)
deviceId返回值:
Promisejs
await call.setVideoDevice('abc123');ICallOptions
ICallOptions
ICallOptions
ICallOptions
ICallOptions
ICallOptions
Properties
属性
IClientOptions
IClientOptions
IClientOptions
IClientOptions
IClientOptions
IClientOptions
Properties
属性
<!-- END AUTO-GENERATED API REFERENCE -->
<!-- END AUTO-GENERATED API REFERENCE -->