WebApp快捷打包
TRTC 实时音视频
转到模块插件

敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议，了解更多。

♦ JS-SDK 引用方式：

♦ 普通网页 script 方式加载：下载最新版 jsBridge-v20241118.zip，请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库；

♦ js module 方式引用：npm install ym-jsbridge 具体请参考 npm package

♦ 腾讯云官方参考资料：

♦ TRTC实时音视频

♦ 产品文档

♦ 服务器端API

♦ 客户端API

♦ 用腾讯平台提供的 SecretKey 在你的服务器端 计算 UserSig 做签名保护

♦ TUIKit 概述

登录、退出、昵称头像、事件监听等全局基础接口

login 登录 TRTC (测试 user1)

sdkAppId:

userId:

userSig: 

jsBridge.txRtc.login({
    //必须，数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#loginSdkAppId_user1").val()),
    //必须，字符串，用户ID
    userId  : $("#loginUserId_user1").val(),
    //必须，字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#loginUserSig_user1").val()
  }, function(succ, data) {
    if (succ) {
      alert("登录成功");
    } else {
      alert("登录失败\n" + JSON.stringify(data));
    }
});

login 登录 TRTC (测试 user2)

sdkAppId:

userId:

userSig: 

jsBridge.txRtc.login({
    //必须，数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#loginSdkAppId_user2").val()),
    //必须，字符串，用户ID
    userId  : $("#loginUserId_user2").val(),
    //必须，字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#loginUserSig_user2").val()
  }, function(succ, data) {
    if (succ) {
      alert("登录成功");
    } else {
      alert("登录失败\n" + JSON.stringify(data));
    }
});

login 登录 TRTC (测试 user3)

sdkAppId:

userId:

userSig: 

jsBridge.txRtc.login({
    //必须，数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#loginSdkAppId_user3").val()),
    //必须，字符串，用户ID
    userId  : $("#loginUserId_user3").val(),
    //必须，字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#loginUserSig_user3").val()
  }, function(succ, data) {
    if (succ) {
      alert("登录成功");
    } else {
      alert("登录失败\n" + JSON.stringify(data));
    }
});

logout 退出 TRTC

jsBridge.txRtc.logout(function(succ, data) {
    if (succ) {
      alert("退出成功");
    } else {
      alert("退出失败\n" + JSON.stringify(data));
    }
});

getLoginStatus 获取当前登录状态

jsBridge.txRtc.getLoginStatus(function(succ, data) {
  //data.status 字符串类型
  //logined  已登录
  //logining 正在登录
  //logout   已退出
  alert(JSON.stringify(data));
});

setUserInfo 设置昵称、头像

nickname:

avatar: 

jsBridge.txRtc.setUserInfo({
  //字符串，昵称
  nickname: $("#nickname").val(),
  //头像，图片链接
  avatar  : $("#avatar").val()
}, function(succ, data) {
  if (succ) {
    alert("设置成功");
  } else {
    alert("设置失败\n" + JSON.stringify(data));
  }
});

requestPermission 请求录音和摄像头权限

jsBridge.txRtc.requestPermission(function(succ, data) {
  //data.allowAll 是否允许了全部权限
  //data.neverAsk 是否勾选了“不在询问”，此时可调用 jsBridge.appSettings() 跳转到系统设置，让用户手动开启权限
  alert(JSON.stringify(data));
});

setListener 设置事件监听器

//这是 TRTC 最底层的事件监听器，其他的诸如音视频通话、直播等监听器都是基于此的二次封装
//此方法可以监听到 所有事件 状态
jsBridge.txRtc.setListener(function(succ, e) {
  switch (e.on) {
    case "onError":
      //出错
      break;
    case "onEnterRoom":
      //自己进入房间
      break;
    case "onExitRoom":
      //自己退出房间
      break;
    case "onRemoteUserEnterRoom":
      //其他人进入房间
      break;
    case "onRemoteUserLeaveRoom":
      //其他人退出房间
      break;
    case "onMicDidReady":
      //已开启麦克风
      break;
    //...
    //所有事件及其含义 请参考这里
  }
  showResult({
    which: "setListener",
    e    : e
  });
});

/**
回调参数 e 为 json 类型
{
  on  : 事件名称，字符串类型
  data: 事件参数，json 类型，具体含义请参考腾讯官方文档
}
**/

removeListener 移除事件监听器

jsBridge.txRtc.removeListener(function(succ, data) {
  if (succ) {
    alert("移除成功");
  } else {
    alert("移除失败\n" + JSON.stringify(data));
  }
});

getSDKVersion 获取 SDK 版本

jsBridge.txRtc.getSDKVersion(function(succ, data) {
  alert(data.version);
});

音视频通话

enableFloatWindow 开启/关闭 悬浮窗功能

enable: 

jsBridge.txRtc.enableFloatWindow({
  //布尔
  enable: JSON.parse($("#enableFloat").val())
}, function(succ, data) {
  if (succ) {
    alert("设置成功");
  } else {
    alert("设置失败\n" + JSON.stringify(data));
  }
});

enableMuteMode 开启/关闭 静音模式

enable: 

jsBridge.txRtc.enableMuteMode({
  //布尔
  enable: JSON.parse($("#enableMute").val())
}, function(succ, data) {
  if (succ) {
    alert("设置成功");
  } else {
    alert("设置失败\n" + JSON.stringify(data));
  }
});

setCallingBell 自定义来电铃音

bellUrl: 

jsBridge.txRtc.setCallingBell({
  //铃音链接
  bellUrl: $("#bellUrl").val()
}, function(succ, data) {
  if (succ) {
    alert("设置成功");
  } else {
    alert("设置失败\n" + JSON.stringify(data));
  }
});

call 拨打电话（1对1通话）

userId:

mediaType: 

jsBridge.txRtc.call({
  //字符串，目标用户的 userId
  userId   : $("#callUserId").val(),
  //字符串，通话媒体类型
  //video 视频通话
  //audio 音频通话
  mediaType: $("#callMediaType").val()
}, function(succ, data) {
  if (!succ) {
    alert("拨打失败\n" + JSON.stringify(data));
  }
});

groupCall 群组通话

groupId:

mediaType: 

jsBridge.txRtc.groupCall({
  //字符串，此次通话的群ID
  //需配合腾讯 IM群组管理 使用
  groupId  : $("#groupCallGroupId").val(),
  //字符串数组，目标用户的 userId 列表
  userIds  : [ "user2", "user3", "user4" ],
  //字符串，通话媒体类型
  //video 视频通话
  //audio 音频通话
  mediaType: $("#groupCallMediaType").val()
}, function(succ, data) {
  if (!succ) {
    alert("群组通话失败\n" + JSON.stringify(data));
  }
});

setCallListener 设置事件监听器

jsBridge.txRtc.setCallListener(function(succ, e) {
  switch (e.on) {
    case "onError":
      break;
    case "onCallReceived":
      break;
    //...
    //所有事件及其含义 请参考这里
  }
  showResult({
    which: "setCallListener",
    e    : e
  });
});

/**
回调参数 e 为 json 类型
{
  on  : 事件名称，字符串类型
  data: 事件参数，json 类型，具体含义请参考腾讯官方文档
}
**/

removeCallListener 移除事件监听器

jsBridge.txRtc.removeCallListener(function(succ, data) {
  if (succ) {
    alert("移除成功");
  } else {
    alert("移除失败\n" + JSON.stringify(data));
  }
});

多人视频会议 (Android)

createChatRoom 创建房间（主持人调用）

roomId:

speechMode:

openCamera:

openMicrophone: 

jsBridge.txRtc.createChatRoom({
  //数字，此次通话的房间号
  roomId  : parseInt($("#createChatRoomRoomId").val()),
  //字符串，发言模式
  //free  自由发言
  //apply 申请获得主持人同意后才能发言
  speechMode: $("#createChatRoomSpeechMode").val(),
  //布尔，是否开启摄像头
  openCamera: JSON.parse($("#createChatRoomOpenCamera").val()),
  //布尔，是否开启麦克风
  openMicrophone: JSON.parse($("#createChatRoomOpenMicrophone").val())
}, function(succ, data) {
  if (!succ) {
    alert("创建失败\n" + JSON.stringify(data));
  }
});

enterChatRoom 进入房间（参会成员调用）

roomId:

openCamera:

openMicrophone: 

jsBridge.txRtc.enterChatRoom({
  //数字，此次通话的房间号
  roomId  : parseInt($("#enterChatRoomRoomId").val()),
  //布尔，是否开启摄像头
  openCamera: JSON.parse($("#enterChatRoomOpenCamera").val()),
  //布尔，是否开启麦克风
  openMicrophone: JSON.parse($("#enterChatRoomOpenMicrophone").val())
}, function(succ, data) {
  if (!succ) {
    alert("进入失败\n" + JSON.stringify(data));
  }
});

destroyChatRoom 解散销毁房间（主持人调用）

jsBridge.txRtc.destroyChatRoom(function(succ, data) {
  if (succ) {
    alert("解散成功");
  } else {
    alert("解散失败\n" + JSON.stringify(data));
  }
});

setChatRoomListener 设置事件监听器

jsBridge.txRtc.setChatRoomListener(function(succ, e) {
  switch (e.on) {
    case "onError":
      break;
    case "onDestroyRoom":
      break;
    //...
    //所有事件及其含义 请参考这里
  }
  showResult({
    which: "setChatRoomListener",
    e    : e
  });
});

/**
回调参数 e 为 json 类型
{
  on  : 事件名称，字符串类型
  data: 事件参数，json 类型，具体含义请参考腾讯官方文档
}
**/

removeChatRoomListener 移除事件监听器

jsBridge.txRtc.removeChatRoomListener(function(succ, data) {
  if (succ) {
    alert("移除成功");
  } else {
    alert("移除失败\n" + JSON.stringify(data));
  }
});

视频互动直播 (Android)

createVideoLiveRoom 创建房间（房主调用）

roomId:

roomName:

coverUrl: 

jsBridge.txRtc.createVideoLiveRoom({
    //必须，数字，房间ID
    roomId  : parseInt($("#createVideoLiveRoomRoomId").val()),
    //字符串，房间名称
    roomName: $("#createVideoLiveRoomRoomName").val(),
    //房间封面图
    coverUrl: $("#createVideoLiveRoomCoverUrl").val()
  }, function(succ, data) {
    if (!succ) {
      alert("创建失败\n" + JSON.stringify(data));
    }
});

enterVideoLiveRoom 进入房间（观众调用）

roomId: 

jsBridge.txRtc.enterVideoLiveRoom({
    //必须，数字，房间ID
    roomId: parseInt($("#enterVideoLiveRoomRoomId").val())
  }, function(succ, data) {
    if (!succ) {
      alert("进入失败\n" + JSON.stringify(data));
    }
});

setVideoLiveRoomListener 设置事件监听器

jsBridge.txRtc.setVideoLiveRoomListener(function(succ, e) {
  switch (e.on) {
    case "onError":
      break;
    case "onRoomDestroy":
      break;
    //...
    //所有事件及其含义 请参考这里
  }
  showResult({
    which: "setVideoLiveRoomListener",
    e    : e
  });
});

/**
回调参数 e 为 json 类型
{
  on  : 事件名称，字符串类型
  data: 事件参数，json 类型，具体含义请参考腾讯官方文档
}
**/

removeVideoLiveRoomListener 移除事件监听器

jsBridge.txRtc.removeVideoLiveRoomListener(function(succ, data) {
  if (succ) {
    alert("移除成功");
  } else {
    alert("移除失败\n" + JSON.stringify(data));
  }
});

无 UI 界面

enterRoom 进入房间 (测试 user1)

sdkAppId:

userId:

userSig:

roomId:

role: 

jsBridge.txRtc.enterRoom({
    //数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#enterRoomSdkAppId_user1").val()),
    //字符串，用户ID
    userId  : $("#enterRoomUserId_user1").val(),
    //字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#enterRoomUserSig_user1").val(),
    //数字，房间ID，进入同一个房间的用户可以相互交流
    roomId  : parseInt($("#enterRoomRoomId_user1").val()),
    //字符串，以什么 角色 进入房间
    //anchor    主播
    //audience  观众(听众)
    role    : $("#enterRoomRole_user1").val(),
    //字符串，场景类型，暂时只支持 audioCall 音频通话
    scene   : "audioCall"
  }, function(succ, data) {
    if (succ) {
      alert("进入成功");
    } else {
      alert("进入失败\n" + JSON.stringify(data));
    }
});

enterRoom 进入房间 (测试 user2)

sdkAppId:

userId:

userSig:

roomId:

role: 

jsBridge.txRtc.enterRoom({
    //数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#enterRoomSdkAppId_user2").val()),
    //字符串，用户ID
    userId  : $("#enterRoomUserId_user2").val(),
    //字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#enterRoomUserSig_user2").val(),
    //数字，房间ID，进入同一个房间的用户可以相互交流
    roomId  : parseInt($("#enterRoomRoomId_user2").val()),
    //字符串，以什么 角色 进入房间
    //anchor    主播
    //audience  观众(听众)
    role    : $("#enterRoomRole_user2").val(),
    //字符串，场景类型，暂时只支持 audioCall 音频通话
    scene   : "audioCall"
  }, function(succ, data) {
    if (succ) {
      alert("进入成功");
    } else {
      alert("进入失败\n" + JSON.stringify(data));
    }
});

enterRoom 进入房间 (测试 user3)

sdkAppId:

userId:

userSig:

roomId:

role: 

jsBridge.txRtc.enterRoom({
    //数字，腾讯平台上创建的应用ID
    sdkAppId: parseInt($("#enterRoomSdkAppId_user3").val()),
    //字符串，用户ID
    userId  : $("#enterRoomUserId_user3").val(),
    //字符串，用户安全签名
    //如何 计算UserSig 
    userSig : $("#enterRoomUserSig_user3").val(),
    //数字，房间ID，进入同一个房间的用户可以相互交流
    roomId  : parseInt($("#enterRoomRoomId_user3").val()),
    //字符串，以什么 角色 进入房间
    //anchor    主播
    //audience  观众(听众)
    role    : $("#enterRoomRole_user3").val(),
    //字符串，场景类型，暂时只支持 audioCall 音频通话
    scene   : "audioCall"
  }, function(succ, data) {
    if (succ) {
      alert("进入成功");
    } else {
      alert("进入失败\n" + JSON.stringify(data));
    }
});

startLocalAudio 打开麦克风


jsBridge.txRtc.setListener(function(succ, e) {
  switch (e.on) {
    case "onMicDidReady": {
      jsBridge.txRtc.removeListener();
      alert("已打开麦克风");
      break;
    }
  }
});

//在 setListener 的 e.on == "onMicDidReady" 时表示成功打开麦克风 查看说明
jsBridge.txRtc.startLocalAudio({
    //字符串，音频质量
    //default 默认
    //speech  语音
    //music   音乐
    quality: "default"
  }, function(succ, data) {
    if (!succ) {
      alert("打开失败\n" + JSON.stringify(data));
    }
});

stopLocalAudio 关闭麦克风

jsBridge.txRtc.stopLocalAudio(function(succ, data) {
  if (succ) {
    alert("关闭成功");
  } else {
    alert("关闭失败\n" + JSON.stringify(data));
  }
});

exitRoom 退出房间

jsBridge.txRtc.exitRoom(function(succ, data) {
  if (succ) {
    alert("退出成功");
  } else {
    alert("退出失败\n" + JSON.stringify(data));
  }
});

setListener 设置事件监听器

//这是 TRTC 最底层的事件监听器，其他的诸如音视频通话、直播等监听器都是基于此的二次封装
//此方法可以监听到 所有事件 状态
jsBridge.txRtc.setListener(function(succ, e) {
  switch (e.on) {
    case "onError":
      //出错
      break;
    case "onEnterRoom":
      //自己进入房间
      break;
    case "onExitRoom":
      //自己退出房间
      break;
    case "onRemoteUserEnterRoom":
      //其他人进入房间
      break;
    case "onRemoteUserLeaveRoom":
      //其他人退出房间
      break;
    case "onMicDidReady":
      //已开启麦克风
      break;
    //...
    //所有事件及其含义 请参考这里
  }
  showResult({
    which: "setListener",
    e    : e
  });
});

/**
回调参数 e 为 json 类型
{
  on  : 事件名称，字符串类型
  data: 事件参数，json 类型，具体含义请参考腾讯官方文档
}
**/

removeListener 移除事件监听器

jsBridge.txRtc.removeListener(function(succ, data) {
  if (succ) {
    alert("移除成功");
  } else {
    alert("移除失败\n" + JSON.stringify(data));
  }
});

监听回调数据：

全部示例
Copyright © 2024 WebApp快捷打包