Code Monkey home page Code Monkey logo

trtc_web's Introduction

TRTC Web SDK

English | 简体中文

Introduction

TRTC Web SDK is an object-oriented WebRTC SDK of Tencent Cloud's real-time communication solution. Web developers can use TRTC Web SDK to establish an audio/video calls or live streaming services on your website.

Supported Browsers

TRTC Web SDK supports major modern browsers. For details, please refer to Browsers Supported.

Chrome
Chrome
IE / Edge
Edge
Firefox
Firefox
Safari
Safari
iOS Safari
iOS Safari
Opera
Opera
56+ 80+ 56+ 11+ 11+ 46+

Install

npm:

$ npm install trtc-sdk-v5 --save

yarn:

$ yarn add trtc-sdk-v5

Download manually:

  1. download trtc.js.
  2. copy trtc.js to your project.

Usage

Refer to the following two tutorials for a quick run-through of the demo and how to use the SDK to implement basic audio and video calling functionality.

Explore SDK API documents:TRTC Web SDK.

API Overview

Directory

.
├── README.md
├── quick-demo-js           -- TRTC Web quick demo (JavaScript edition).
├── quick-demo-vue2-js      -- TRTC Web quick demo (Vue.js 2 edition).
├── quick-demo-vue3-ts      -- TRTC Web quick demo (Vue.js 3 edition).
├── SDK                     -- TRTC Web SDK v5.x (Recommended).
└── v4                      -- TRTC Web SDK v4.x (Not recommended).

SDK

quick-demo-js

  • Description: quick-demo-js is a TRTC Web quick running demo (native JS version), integrating the basic audio and video communication and device selection functions of TRTC Web SDK. It is developed in native JS and can be directly run in the browser.
  • Running: Refer to the README in the folder.
  • Online experience: Quick-demo-js online experience address.

quick-demo-vue2-js

  • Description: quick-demo-vue2-js is a TRTC Web quick running demo (Vue2 version), integrating the basic audio and video communication and device selection functions of TRTC Web SDK. It is developed in Vue2 + JavaScript and requires you to install the Node environment to run the experience according to the instructions below.
  • Running: Refer to the README in the folder.
  • Online experience: Quick-demo-vue2-js online experience address.

quick-demo-vue3-ts

  • Description: quick-demo-vue3-ts is a TRTC Web quick running demo (Vue3 version), integrating the basic audio and video communication and device selection functions of TRTC Web SDK. It is developed in Vue3 + TypeScript and requires you to install the Node environment.
  • Running: Refer to the README in the folder.
  • Online experience: Quick-demo-vue3-ts online experience address.

Contact Us

  • If you have questions, see FAQs.
  • Contact us for technical support.
  • To report bugs, please create an issue.

trtc_web's People

Contributors

anderlu avatar irisywzhang avatar paopaosecret avatar rychou avatar wbxl2000 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

trtc_web's Issues

H5端在当前页面视频录制后没有声音?IOS无法播放语音

问个问题,我们有一个视频面签的场景需要采集视频和音频,这个场景是用户点击链接后就进入房间,这个房间只有用户一个人,我们的页面有些面签问题需要用户回答,用户主动点击"开始"后就会语音播报问题让用户回答,"开始"后也会进行视频录制,用户需要回答的问题是我们自己研发的文本转音频然后播放转换后的音频来实现的,目前遇到的问题是,视频录制成功后,我们在腾讯云后台预览视频时发现,视频中只有用户自己回答问题的声音,而没有语音播报问题的声音,在录制过程中语音播报是正常发声的,但不知道为什么采集不到网页上播放的声音,我们测试了很多次,发现视频大约前10秒是有部分播报的声音,往后就没了,很疑惑。
想确认下我们的应用场景是否支持单人单录制视频并采集音频呢?还有ios下语音播报是否有问题呢?谢谢

直播流能区分客户端吗?

目前在stream-added回调参数里看了下,只有client_.basis_.os比较像,但是windows跟安卓的推流这个字段都是Windows
sdk的版本是4.15.0

[Q&A]改变了宫格布局,DOM结构变化了,如何重新更新显示?

开发环境:vue3 + [email protected]
问题描述:我模仿了官方示例,使用了右侧成员列表等布局,当切换布局的时候,之前容器id渲染到其他位置,导致DOM结构变化,视频不渲染了,我尝试使用trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, handleVideoStateChange)来解决问题:

const handleVideoStateChange = async (event) => {
  let { state, userId, streamType } = event;
  if (state === "PAUSED") {
    if (userId) {
      if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
        await nextTick();
        await trtc.updateRemoteVideo({
          userId,
          view: `${userId}_main`,
          streamType,
        });
      } else {
        await nextTick();
        await trtc.updateRemoteVideo({
          userId,
          view: `${userId}_screen`,
          streamType,
        });
      }
    } else {
      await nextTick();
      await trtc.updateLocalVideo({
        view: "local",
      });
    }
  }
};

发现切换的前几次可以正常渲染了,但是我多次切换测试后容器依旧变空白,video没有渲染了,我不知道该采用啥思路来解决这种问题,希望能解答

trtc.startLocalVideo 中的参数 config.view 要求

使用v5版本。
trtc.startLocalVideo 中的参数 config.view 是否可以是HTMLVideoElement?

在 html 中设置 <div id="local" style="position: absolute; width: 400px; height: 300px; right: 10px; top: 200px;"></div>
trtc.startLocalVideo({view: document.getElementById('local')}); 可以渲染出本地摄像头画面。

但是写为 <video id="local" style="position: absolute; width: 400px; height: 300px; right: 10px; top: 200px;"></video>
trtc.startLocalVideo({view: document.getElementById('local')}); 就无法渲染出本地摄像头画面。

这是什么原因?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.