前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >云终端系列（一）—— 实时音视频Web端接入体验（Vue基础音视频通话篇）

云终端系列（一）—— 实时音视频Web端接入体验（Vue基础音视频通话篇）

原创
作者头像
楚歌
修改于 2020-11-22 18:24:26
修改于 2020-11-22 18:24:26
4.3K10
代码可运行
举报
文章被收录于专栏：腾讯云终端专家服务腾讯云终端专家服务
运行总次数：0
代码可运行
关联问题
换一批

序

这个系列呢，主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析，如果想要纯粹了解开发的或者云原生，云开发的可以去往另一个系列——云开发系列。

引流链接：https://cloud.tencent.com/developer/article/1750264

今天给大家主要讲讲TRTC（Tencent RTC ，实时通讯），在4G时代下，直播，短视频，视频聊天等用手机看视频已经成为了如大家呼吸一般简单的事情。而5G时代的到来，虽然目前还并不知道5G下视频向产品的发展趋势，但总体而言，视频

这个目前也接入了云原生，如果后续有机会也给大家讲一讲传统RTC实现接入，和云原生接入的区别。

TRTC Web

在我的另一篇文章 https://cloud.tencent.com/developer/article/1738182中，详细展开了整个官方Web Demo 的架构，官方的Demo用的是jquery，但是大家懂得都懂，目前jquery在大多数情况下已经不再是开发中的首选了，目前更多的业务场景中是要如何把 trtc-js-sdk 接入到 vue，react 等框架内，这里的话给大家做一个参考实例，并且给大家总结一下注意要点，下面会贴一些核心的代码。

这一篇文章是讲Vue的，为什么叫初始篇呢，因为目前做了trtc的最基础的功能，未来也许会更多的案例（又给自己挖坑）

Vue

Vue 作为目前最为成熟的MVVM框架之一，相较于jquery去写，减少了大量视图上的操作，配合element-UI可以减少许多布局上的问题

先贴核心代码。

PS. Vue 这里有用到Router，所以会展示Router的用法，之后的React那边会展示非Router的思路

登录Login

代码语言：txt
AI代码解释
复制
<script>
// @ is an alias to /src
import TRTC from "trtc-js-sdk";
import axios from "axios";
import router from "../router";

export default {
  name: "Login",
  components: {},
  data() {
    return {
      //这里请填入对应的sdkAppId
      login: {
        sdkAppId_: 1400****221,
        userSig_: "",
        userId_: "",
        password_: "",
      },
      client_: null,
      isJoined_: false,
      isPublished_: false,
      isAudioMuted_: false,
      isVideoMuted_: false,
      localStream_: null,
      remoteStream_: null,
      members_: new Map(),
      mic: "",
      micOptions: [],
      camera: "",
      cameraOptions: [],
      
    };
  },
  created() {},
  mounted() {},
  methods: {
    async login_() {
      if (!(this.login.password_ && this.login.userId_)) {
        this.$alert("请确认用户名与密码已经填写", "注意！", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.login.password_ != 888) {
        //做测试用，密码为888
        this.$message.error("密码错误");
      } else if (this.radio1 == "") {
        this.$message.error("请选择模式");
      } else {
        //这里是服务端计算密钥
        axios
          .post(`${填你自己的host}`, {
            userid: this.login.userId_,
            expire: 604800,
          })
          .then((res) => {
            this.$alert("登陆成功", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.login.userSig_ = res.data;
                router.push({
                  name: "BasicTrtc",
                  params: {
                    userSig: this.login.userSig_,
                    userId: this.login.userId_,
                    //这里的sdkAppId 更好的情况应该设置为一个全局变量然后引入，这里偷懒了
                    sdkAppId: this.login.sdkAppId_,
                  },
                });
              },
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

服务端密钥计算

代码语言：txt
AI代码解释
复制
const tcb = require('@cloudbase/node-sdk')
const TLSSigAPIv2 = require('tls-sig-api-v2');
const Koa = require('koa');
const Router = require('koa-router');
const cors = require('koa2-cors');
const bodyParser = require('koa-bodyparser');


const app = new Koa();
const router = new Router();
app.use(sslify())
app.use(bodyParser());
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());


router.get("/",  ctx => {
    ctx.body = 'Hello World';
});
router.post("/getUserSig",ctx => {
    if (ctx.method == 'OPTIONS') {
        ctx.body = 200; 
    } else {
        console.log(ctx.request.body);
        let {userid,expire} = ctx.request.body;
        //在后端做计算，这里的sdkappid和key可以写死
        let api = new TLSSigAPIv2.Api(1400349221, 
            '9ef0430a010*********************************037c6237ad3cd7710087e');
        let sig = api.genSig(userid, expire);
        ctx.body = sig;
    }
});

app.listen(8081);

这里一定要非常非常注意，由于TRTC底层封装的是WebRTC，WebRTC在服务器上必须只能在https协议下运行，因此一定要去配证书

前端计算可以参考官方Demo

房间选择

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
// @ is an alias to /src
import TRTC from "trtc-js-sdk";
import axios from "axios";
import Vue from "vue";
import router from "../router";

export default {
  name: "BasicTrtc",
  components: {},
  data() {
    return {
      login: {
        sdkAppId_: "",
        userSig_: undefined,
        userId_: "",
        roomId_: "",
      },
      client_: null,
      localStream_: null,
      remoteStreams_: [],
      mic: "",
      micOptions: [],
      camera: "",
      cameraOptions: [],
      radio1: "",
    };
  },
  created() {
    TRTC.checkSystemRequirements().then((result) => {
      if (!result) {
        alert("Your browser is not compatible with TRTC");
      }
    });
  },
  async mounted() {
    this.login.roomId_ = 666888;
    this.login.userId_ = this.$route.params.userId;
    this.login.userSig_ = this.$route.params.userSig;
    this.login.sdkAppId_ = this.$route.params.sdkAppId;
    console.log(this.login);
    this.checkInfo();
  },
  methods: {
    async init() {
      const localStream = TRTC.createStream({ audio: true, video: true });
      localStream
        .initialize()
        .catch((error) => {
          console.error("failed initialize localStream " + error);
        })
        .then(() => {
          console.log("initialize localStream success");
          TRTC.getMicrophones().then((res) => {
            for (let item in res) {
              this.micOptions.push(res[item]);
            }
          });
          TRTC.getCameras().then((res) => {
            for (let item in res) {
              this.cameraOptions.push(res[item]);
            }
          });
          // 本地流初始化成功，可通过Client.publish(localStream)发布本地音视频流
        });
      this.localStream_ = localStream;
      this.$message({
        type: "info",
        message: `初始化完成！请选择输入输出设备`,
      });
    },
    async checkInfo() {
      if (this.login.userSig_ == undefined) {
        this.$alert("您未登录或登录态失效，请重新登录", "警告", {
          callback: (action) => {
            router.push({ name: "Login" });
          },
        });
      } else {
        this.init();
      }
    },
    async joinRoom() {
      switch(this.radio1){
        case '多人通话（会议）':
            router.push({
            name: "PrivateChatRoom",
            params: {
              userSig: this.login.userSig_,
              userId: this.login.userId_,
              sdkAppId: this.login.sdkAppId_,
              roomId:this.login.roomId_,
              mic:this.mic,
              camera:this.camera,
            },
          });
          break;
        case '语音聊天室':
            router.push({
              name:"IMChatRoom",
              params: {
                userSig: this.login.userSig_,
                userId: this.login.userId_,
                sdkAppId: this.login.sdkAppId_,
                roomId:this.login.roomId_,
                mic:this.mic,
                camera:this.camera,
              },
            })
          break;
        case '互动直播':
            router.push({
              name:"interactLive",
              params:{
                login:this.login,
                mic:this.mic,
                camera:this.camera,
              }
            })
          break;
         case '互动课堂':
            router.push({
              name:"interactClass",
              params:{
                login:this.login,
                mic:this.mic,
                camera:this.camera,
              }
            })
            break;
      }

     
    },
  },
};
</script>

这里的一个需要注意的是，为什么初始化要创建Stream，我们知道流是要放Client里才能使用的，一般正常的思路是先createClient 然后在createSteam 最后再把stream push到client里面去。但是由于部分浏览器的限制（主要是firefox，safari和一些chrome），对设备权限要求非常严格。没有流的话是不能直接授权设备的，而没有授权就无法获取设备ID（会出现undefined），则后面创建client的就无法创建，因此在这个界面里创建流并获取设备授权，并通过路由的形式传给房间

房间内

房间的大多数逻辑部分与官方demo既没有什么差别，基本流程如下图

image.png
image.png

唯一一个需要非常注意是在这里的最后三行，是该SDK接入Vue与jquery最大的不同之处

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
this.client_.on("stream-subscribed", (evt) => {
        const uid = evt.userId;
        const remoteStream = evt.stream;
        const id = remoteStream.getId();
        console.log(id);
        this.remoteStreams_.push(remoteStream);
        // objectFit 为播放的填充模式，详细参考：https://trtc-1252463788.file.myqcloud.com/web/docs/Stream.html#play
        Vue.nextTick().then(function () {
          remoteStream.play("remote_" + id, { objectFit: "contain" });
        });
      });

由于Vue的视图更新是自动监听有关视图的数据变化，数据一旦发生变化，视图随之变化，反之亦然，这是Vue的双向绑定机制，这里可以简单提一下：用Object.defineProperty( )的 set 与 get 来劫持属性的变化，然后告知Watcher，watcher中向所有订阅者更改视图。所以换句话说：更改视图这个行为什么时候完成，归属于底层，我们不能通过直接按顺序往下写代码就认为这是在视图更新完之后执行的

所以我们需要用到 Vue.nextTick().then(fn()) 这个全局函数

他可以让Vue在视图更新之后再执行后续代码

当然还有一种写法是在Vue的生命周期里的 updated 这里写，这时React的写法，后续如果出React的章节可以在这里完成。

以下是参考源码：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
import TRTC from "trtc-js-sdk";
import axios from "axios";
import Vue from "vue";
import router from "../router";

export default {
  data() {
    return {
      //这里请填入对应的sdkAppId
      login: {
        sdkAppId_: "",
        userSig_: undefined,
        userId_: "",
        roomId_: "",
      },
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
      client_: null,
      isJoined_: false,
      isPublished_: false,
      isAudioMuted_: false,
      isVideoMuted_: false,
      localStream_: null,
      client_: null,
      localStream_: null,
      remoteStreams_: [],
      yourView_:true,
      mic: "",
      micOptions: [],
      camera: "",
      cameraOptions: [],
      members_: new Map(),
    };
  },
  async mounted() {
    const routerParams = this.$route.params;
    console.log(routerParams);
    this.login.roomId_ = routerParams.roomId;
    this.login.userId_ = routerParams.userId;
    this.login.userSig_ = routerParams.userSig;
    this.login.sdkAppId_ = routerParams.sdkAppId;
    this.mic = routerParams.mic;
    this.camera = routerParams.camera;
    await this.checkInfo();
    
  },
  methods: {
    async joinRoom() {
      if (this.login.roomId_ == "" || this.login.userId_ == "") {
        this.$message.error("请填写房间号/用户ID");
        return;
      }
      console.log(this.login);
      this.client_ = TRTC.createClient({
        mode: "rtc",
        sdkAppId: this.login.sdkAppId_,
        userId: this.login.userId_,
        userSig: this.login.userSig_,
      });
      this.handleEventsListen();
      if (this.isJoined_) {
        this.$message.warn("duplicate RtcClient.join() observed");
      }
      await this.client_
        .join({
          roomId: this.login.roomId_,
        })
        .then((res) => {
          this.$message.success("进房成功");
          this.isJoined_ = true;
          this.beginPushStream();
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("进房失败！" + err);
        });
    },
    async leaveRoom() {
      if (!this.isJoined_) {
        this.$message.warn("leave() - please join() firstly");
        return;
      }
      // ensure the local stream is unpublished before leaving.
      await this.stopPushStream();

      // leave the room
      await this.client_.leave();
      this.isJoined_ = false;
      router.push({
        name: "BasicTrtc",
        params: {
          userSig: this.login.userSig_,
          userId: this.login.userId_,
          sdkAppId: this.login.sdkAppId_,
          roomId:this.login.roomId_
        },
      });
    },
    beginPushStream() {
      this.localStream_ = TRTC.createStream({
        audio: true,
        video: true,
        mirror: true,
        microphoneId: this.mic,
        cameraId: this.camera,
      });
      this.localStream_
        .initialize()
        .catch((error) => {
          console.log(error);
        })
        .then(() => {
          this.$message.success("initialize localStream success");
          // 本地流初始化成功，可通过Client.publish(localStream)发布本地音视频流
          if (!this.isJoined_) {
            console.warn("publish() - please join() firstly");
            return;
          }
          if (this.isPublished_) {
            console.warn("duplicate RtcClient.publish() observed");
            return;
          }
          this.client_.publish(this.localStream_).then(() => {
            // 本地流发布成功
            this.localStream_
              .play("local", { objectFit: "contain" })
              .then(() => {
                this.isPublished_ = true;
                // autoplay success
              })
              .catch((e) => {
                console.error("failed to publish local stream " + e);
                this.isPublished_ = false;
                const errorCode = e.getCode();
                if (errorCode === 0x4043) {
                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
                  // stream.resume()
                }
              });
          });
        });
    },
    async muteVideo(){
      if(this.localStream_.muteVideo()){
        this.isVideoMuted_ = true;
      }else{
        this.$message.error("muteVideo failed");
      }
       
    },
    async unmuteVideo(){
      if(this.localStream_.unmuteVideo()){
        this.isVideoMuted_ = false;
      }else{
        this.$message.error("unmuteVideo failed");
      }
    },
    async muteAudio(){
      if(this.localStream_.muteAudio()){
        this.isAudioMuted_ = true;
      }else{
        this.$message.error("unmuteVideo failed");
      }
    },
    async unmuteAudio(){
      if(this.localStream_.unmuteAudio()){
        this.isAudioMuted_ = false;
      }else{
        this.$message.error("unmuteVideo failed");
      }
    },
    async setSlience(){

    },
    async unsetSlience(){

    },
    async stopPushStream() {
      this.localStream_.stop();
      this.localStream_.close();
      if (!this.isJoined_) {
        console.warn("unpublish() - please join() firstly");
        return;
      }
      if (!this.isPublished_) {
        console.warn("RtcClient.unpublish() called but not published yet");
        return;
      }
      await this.client_.unpublish(this.localStream_);
      this.isPublished_ = false;
    },
    async checkInfo() {
      if (this.login.userSig_ == undefined) {
        this.$alert("您未登录或登录态失效，请重新登录", "警告", {
          callback: (action) => {
            router.push({ name: "Login" });
          },
        });
      } else if (this.mic == "" || this.camera == "") {
        this.$alert("未检测到您的麦克风或摄像头授权信息", "警告", {
          callback: (action) => {
            router.push({
              name: "BasicTrtc",
              params: {
                userSig: this.login.userSig_,
                userId: this.login.userId_,
                sdkAppId: this.login.sdkAppId_,
                mode: this.radio1,
              },
            });
          },
        });
      }else{
        await this.joinRoom();
      }
      
    },
    handleEventsListen() {
      console.log(this.client_);
      this.client_.on("stream-added", (evt) => {
        const remoteStream = evt.stream;
        const id = remoteStream.getId();
        const userId = remoteStream.getUserId();
        this.members_.set(userId, remoteStream);
        console.log(
          `remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`
        );
        if (remoteStream.getUserId() === this.shareUserId_) {
          // don't need screen shared by us
          this.client_.unsubscribe(remoteStream);
        } else {
          console.log("subscribe to this remote stream");
          this.client_.subscribe(remoteStream);
        }
        console.log(this.remoteStreams_)
      });
      this.client_.on("stream-subscribed", (evt) => {
        const uid = evt.userId;
        const remoteStream = evt.stream;
        const id = remoteStream.getId();
        console.log(id);
        this.remoteStreams_.push(remoteStream);
        // objectFit 为播放的填充模式，详细参考：https://trtc-1252463788.file.myqcloud.com/web/docs/Stream.html#play
        Vue.nextTick().then(function () {
          remoteStream.play("remote_" + id, { objectFit: "contain" });
        });
      });
      this.client_.on("stream-removed", (evt) => {
        const remoteStream = evt.stream;
        const id = remoteStream.getId();
        remoteStream.stop();
        console.log(this.remoteStreams_);
        this.remoteStreams_ = this.remoteStreams_.filter((stream) => {
          return stream.getId() !== id;
        });
        console.log(
          `stream-removed ID: ${id}  type: ${remoteStream.getType()}`
        );
      });
      this.client_.on("mute-video",event => {
         console.log(this.remoteStreams_)
      })
      this.client_.on("unmute-video",event => {
         console.log(this.remoteStreams_)
      })
    },
  },
};
</script>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js
jquery
https
react
网络安全

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js
jquery
https
react
网络安全
评论
登录后参与评论
1 条评论
热度
最新
用户8329715回复楚歌
大佬 可以提供一下demo么，想研究一下~
大佬 可以提供一下demo么，想研究一下~
回复回复点赞举报
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1002
Go 开发者必备：Protocol Buffers 入门指南
430
10分钟带你彻底搞懂分布式链路跟踪
180
多租户的 4 种常用方案
348
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
330
60页PPT全解：DeepSeek系列论文技术要点整理
731
TRTC学习之旅（一）--多人聊天室web篇（官方demo）
apijavascript网站
大家好，我是刚入坑TRTC的小菜鸡，黑圆圈云豆。因为我的主要技术方向是web，所以我就从基于web开发的TRTC demo进行学习和知识分享。
黑眼圈云豆
2020/06/19
4.7K0
TRTC学习之旅（一）--多人聊天室web篇（官方demo）
TRTC学习之旅（二）-- 使用vue+ts集成TRTC实现多人会议室
vue.js
根据上回学习了官方TRTC demo之后，已经了解了一个基础的多人会议室创建的流程，接下来我需要将自己学到的转换为自己能够运用的。
黑眼圈云豆
2020/06/24
4K3
TRTC学习之旅（二）-- 使用vue+ts集成TRTC实现多人会议室
体验腾讯云音视频
云直播sdkapiide互动直播
首次开通腾讯云音视频免费赠送10000分钟的免费试用套餐包，包含了视频通话、语音通话、视频互动直播、语音互动直播这些模块，另外说明一下腾讯云音视频是按照 1 : 2 : 4 : 9 : 16 : 36 分别抵扣语音、标清、高清、超高清、2K和4K时长，例如1分钟高清视频时长扣除4分钟免费套餐包时长。
就叫7620521吧
2022/11/25
8K0
关于 TRTC (实时音视频通话模式)在我司的实践
实时音视频reactvue.js微信小程序音视频小程序
腾讯实时音视频（Tencent Real-Time Communication，TRTC）将腾讯 21 年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
发声的沉默者
2021/06/14
1.9K0
关于 TRTC (实时音视频通话模式)在我司的实践
使用TRTC Web SDK实现实时音视频通话
实时音视频网站腾讯云开发者社区vue.jsjavascript
在使用 TRTC Web SDK 中，经常需要使用到两个对象，Client 客户端对象，Stream 流对象：
yuliang
2021/03/03
3.6K0
从零开始创建一个超简单的TRTC音视频通讯程序(web篇)
小程序sdk微信ideios
WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差。
F颜
2020/06/19
4.5K7
uni-app/vue接入腾讯TRCT(一)---基础音视频
sdkjavascriptide
最近需要做一个类似于视频会议的项目，也是选用了腾讯云TRCT，原因：简单易用，打算和IM即时通信结合，可以做一个简易聊天加视频应用，这里是一个简单用法的demo
代码哈士奇
2022/05/11
3.8K2
uni-app/vue接入腾讯TRCT(一)---基础音视频
vue使用TRTC Web SDK实现多人会话场景
实时音视频网站腾讯云开发者社区javascriptvue.js
基本的对话场景请参考 使用TRTC Web SDK实现实时音视频通话 。本文主要讲述 vue 使用 TRTC Web SDK 来实现多人会议的功能，废话不多说直接上代码：（注意下方代码中 sdkAppId 请使用自己的）
yuliang
2021/03/03
2.7K0
TRTC学习之旅（三）-- 使用vue+ts集成互动直播
云直播vue.js即时通信 IM互动直播
上次我们已经用vue+ts实现了多人会议室的搭建，这次我们继续在上次项目的基础上，实现互动直播功能。
黑眼圈云豆
2020/07/01
2.1K2
TRTC学习之旅（三）-- 使用vue+ts集成互动直播
VUE 实时音视频页面老是报错
sdkide
有没有大神可以帮忙看看 metting/lib-generate-test-usersig.min.js' //导入sdk import TRTC from "trtc-js-sdk"; export default { data () { return { userId: 'user_' + parseInt(Math.random() * 100000000),//用户id --可更改 roomId: 888888,//房间号--加入相同房间才能聊 client: '',//客户端服务 remoteStream: '',//远方播放流 localStream: '',//本地流 } }, mounted () { //测试用，所以直接创建了，其他需求可自行更改 this.createClient(this.userId) },
用户7517610
2020/07/02
4.2K1
TRTC零基础入门之Web篇（一）
实时音视频云直播短视频
在建立这个在线课堂应用过程中，可能会使用到腾讯云的IM、云直播等服务，以及对应安卓端SDK，下面将通过三篇文章来记录这个过程，本文为第一篇。
天上云间
2020/12/20
4.1K2
TRTC零基础入门之Web篇（一）
使用TRTC Web SDK实现互动直播
实时音视频互动直播网站腾讯云开发者社区javascript
以主播身份进入房间进行直播的场景跟实时音视频通话场景流程一样，请参考使用TRTC Web SDK实现实时音视频通话。本文主要介绍以观众身份进入直播间。
yuliang
2021/03/02
2.4K0
实时音视频开发学习3 - 实现web端跑通知识储备
sdkapi网站bootstrap编程算法
本节内容主要讲解如何快速使用SDK包，SDK集成方式，SDK目录结构解释以及在web端和小程序端进行跑通。
金林学音视频
2020/08/21
1.6K0
实时音视频开发学习3 - 实现web端跑通知识储备
iOS音视频接入 - TRTC接入实时视频通话
实时音视频
（前面我们已经了解TRTC的基本架构和功能，现在我们就来接入实时视频通话功能，此功能和微信的一对一视频通话是一致的，需要两个角色，一个角色是主动呼叫、一个为呼叫接听，结合使用场景我们来接入此功能。
小明同学接音视频
2020/10/13
5.9K0
iOS音视频接入 - TRTC接入实时视频通话
IM腾讯实时音视频小记
实时音视频im插件登录腾讯
测试使用script引入 也可以使用npm（https://cloud.tencent.com/document/product/647/78731）
游魂
2023/10/16
3610
IM腾讯实时音视频小记
实时音视频开发学习12 - web端API
访问管理api网站
从2019年10月11日开始，浏览器端API版本从4.0.0版本升至4.6.2版本。中间修复unpublish成功后又重新publish失败报错问题，修复上行 peerConnection 断开时没有打印日志的问题修复 getTransportStats 接口返回的 rtt 值为 NAN 的问题等。增加了NETWORK_QUALITY 事件，增加部署环境自动检测，对createClient 增加 streamId userdefinerecordid 字段等优化了。优化上行码率调控逻辑，优化 switchRole 参数校验逻辑，优化上行网络质量计算逻辑，优化错误提示信息等。以下内容为web端的核心内容和代码中未体现的内容。
金林学音视频
2020/08/28
1.7K0
实时音视频开发学习12 - web端API
实时音视频，小程序端WebRTC互通
小程序微信api实时音视频
我们在 LiteAVSDK 的最新版本里面加入了对 WebRTC 的支持能力，并且已经跟随微信APP的 6.6.6 版本发布出来，此文档主要介绍如何使用原生的 <live-pusher> 和 <live-player> 标签实现 WebRTC 互通能力。
腾讯云-chaoli
2019/05/24
11.2K0
实时音视频，小程序端WebRTC互通
【开发记录】网页实时音视频通话系统视频会议系统WebRTC中实现局域网视频连接的步骤说明介绍
网络安全apihttps
去年TSINGSEE青犀视频研发团队基于WEBRTC架构开了网页音视频通话平台EasyRTC，EasyRTC支持微信小程序、H5页面、APP、PC客户端等接入方式之间互通，快速从零开始搭建实时音视频通信；支持多人至百万人视频通话，满足语音视频社交。
EasyNVR
2020/11/03
1.3K0
实时音视频（TRTC）通话前如何进行网络测速？
实时音视频
因为用户的网络环境各不相同，所以推荐您在用户首次通话前先进行一次测速，这将有助于我们选择最佳的服务器。具体实现代码如下：
腾讯云-yyuanchen
2019/09/27
3K0
实时音视频SDK，如何实现类似微信的纯语音通话功能？
实时音视频ide腾讯专有云 PaaS 平台
实时音视频TRTCSDK适用的业务场景是视频会议、坐席视频、在线教育等，如果您希望实现类似微信的语音通话、语音会议功能，TRTCSDK也是支持的，只需要微调几个参数就可以实现，将采集音视频的api，换成只采集音频。
腾讯云-chaoli
2019/03/05
8K2
实时音视频SDK，如何实现类似微信的纯语音通话功能？
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
实时音视频通话？？？ios音视频双人通话？实时音视频通话，如何获得通话完整延迟？
相关课程
AI绘画-StableDiffusion图像生成微信小程序应用实践_《锋运票务系统》新知1 | 音视频核心技术详解
TRTC学习之旅（一）--多人聊天室web篇（官方demo）
4.7K0
TRTC学习之旅（二）-- 使用vue+ts集成TRTC实现多人会议室
4K3
体验腾讯云音视频
8K0
关于 TRTC (实时音视频通话模式)在我司的实践
1.9K0
使用TRTC Web SDK实现实时音视频通话
3.6K0
从零开始创建一个超简单的TRTC音视频通讯程序(web篇)
4.5K7
uni-app/vue接入腾讯TRCT(一)---基础音视频
3.8K2
vue使用TRTC Web SDK实现多人会话场景
2.7K0
TRTC学习之旅（三）-- 使用vue+ts集成互动直播
2.1K2
VUE 实时音视频页面老是报错
4.2K1
TRTC零基础入门之Web篇（一）
4.1K2
使用TRTC Web SDK实现互动直播
2.4K0
实时音视频开发学习3 - 实现web端跑通知识储备
1.6K0
iOS音视频接入 - TRTC接入实时视频通话
5.9K0
IM腾讯实时音视频小记
3610
实时音视频开发学习12 - web端API
1.7K0
实时音视频，小程序端WebRTC互通
11.2K0
【开发记录】网页实时音视频通话系统视频会议系统WebRTC中实现局域网视频连接的步骤说明介绍
1.3K0
实时音视频（TRTC）通话前如何进行网络测速？
3K0
实时音视频SDK，如何实现类似微信的纯语音通话功能？
8K2
相关推荐
TRTC学习之旅（一）--多人聊天室web篇（官方demo）
更多 >
楚歌0
LV.1
这个人很懒，什么都没有留下～
文章
8
获赞
49
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
肥晨0
相关课程
一站式学习中心 >
AI绘画-StableDiffusion图像生成
1667人在学
大模型图像创作引擎
高性能应用服务
微信小程序应用实践_《锋运票务系统》
314人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
新知1 | 音视频核心技术详解
144人在学
实时音视频
即时通信 IM
云直播
媒体处理
领券
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1
3
目录
查看详情【社区公告】 技术创作特训营有奖征文