Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including tttwebsdk with all npm packages installed. Try it out:

var tttwebsdk = require("tttwebsdk")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

tttwebsdk v3.4.48

webrtc of 3ttech.cn

根据本文指导快速集成 TTT Web SDK 并在你自己的 app 里实现音视频互动直播。

阅读本文档需要有es6、npm基础, 以及node环境

本地调试仅localhost / 127.0.0.1可以正常使用,如需IP访问,请使用HTTPS部署本地环境

线上生产环境请确保使用HTTPS部署,以保证功能正常使用

DEMO 体验

我们在 GitHub 上提供一个开源的基础视频互动直播示例项目,在开始开发之前你可以通过该示例项目体验互动直播效果。

名词解释

在使用tttwebsdk时,你主要操作两种对象:

  • Client: 一个客户端。Client类的方法提供了加入房间、发布Stream、接收房间事件等方法。
  • Stream: 本地音视频流以及远端音视频流。Stream类的方法提供了调用本地音视频设备、播放远端音视频等方法。

集成 SDK

  • 安装tttwebsdk

npm install tttwebsdk --save

  • 在你的项目中引入websdk
import TTTRtcWeb from 'tttwebsdk';

加入直播房间

下图展示了加入直播房间的基本流程(图中的方法是对不同的对象调用的)

avatar

本文为快速入门指导,介绍 TTTWebSDK 基本用法。完整的 API 方法和回调详见 WebSDK API 参考


下面是代码具体实现

  1. 加入房间
    import TTTRtcWeb from 'tttwebsdk';
    let TTTRtc = new TTTRtcWeb();

    const APP_ID = 'xxxxxxxxxxxxxxxxxxx';
    const USER_ID = 91619846;
    const ROOM_ID = 31819684;
    const token = ''; // 如果无需认证,则该参数取值为 ''

    /*创建本地客户端,并设置加入房间的角色为主播
     * role : 1 主播 | 2 副播 | 3 观众)
     * rtmpUrl : 设置 cdn 推流地址
     */
    let client = TTTRtc.createClient({role: 1, rtmpUrl: '**rtmp url**'});
    
    /*初始化客户端*/
    client.init(APP_ID, USER_ID, ()=>{
        /*client.init success callback*/
        client.join(token, ROOM_ID, ()=>{
            console.log("join room successful")
        }, (error)=>{
            console.error("join room fail: ", error)
        })
    }, (error) => {
        /*client.init fail callback*/
    })

注: APP_ID: 类型为字符串,请联系三体云获取; USER_ID: 类型为整型,大于0且小于2^32,用户在该房间内的唯一标识; ROOM_ID: 类型为整型,大于0且小于2^32,要加入的房间号,如果该房间不存在,则会创建该房间。

  1. 监听房间相关事件

这些事件是服务器收到其他用户的加入/离开房间、发布流等事件后,推送到client的事件。

    client.on("peer-join", (evt) => {console.log("remote user joined: ", evt) }) // 有用户加入

    client.on("peer-leave", (evt) => {console.log("remote user left: ", evt) })  // 有用户离开

    // 有音频流加入 -- 可通过 client.subscribe 订阅该流播放
    client.on('audio-added', (evt) => {
        var stream = evt.stream;
        if (!stream)
            return;

        client.subscribe(stream, (event) => {
            // successful doing someting, like play remote video or audio.
        }, (err) => {
            // some error occur
        });
    })

    client.on('video-added', (evt) => {
        var stream = evt.stream;
        if (!stream)
            return;

        client.subscribe(stream, (event) => {
            // successful doing someting, like play remote video or audio.
        }, (err) => {
            // some error occur
        });
    })

    // 某路流订阅成功,将执行 play
    client.on("stream-subscribed", (evt) => {
        // 订阅成功
        let { stream } = evt;

        if(stream.hasVideo()) {
            // 若此时 stream 中有视频
            let video = document.createElement('video');
            video.id = `3t_remote_${stream.getId()}`;
            video.setAttribute('playsinline', '');
            video.style.cssText = 'height: 300px; width: 300px; background: black; position:relative; display:inline-block;'
            videoEle.append(video);

            stream.play(video.id, {}, () => {}, () => {});
        }
        else {
            // 若此时 stream 中仅有音频
            stream.play('', {}, () => {}, () => {});
        }
    })

    client.on("stream-unsubscribed", (evt) => {})   // 已取消订阅的流  

    client.on("disconnected", (evt) => {})          // 已经和服务器断开链接
    //...  更多事件请参考三体云websdk文档

注:我们建议在 createClient 成功后就监听这些事件。

  1. 发布本地音视频流

在加入房间(client.join)成功后,创建一个本地音视频流。

    let localStream = TTTRtc.createStream({
        userId: USER_ID,
        audio: true,
        video: true
    })

调用 Stream.init 方法初始化创建的流,成功后用client.publish发布这个流。

    localStream.init(() => {
        console.log("localStream.init success")

        // 初始化本地流成功,使用client.publish发布这路流
        client.publish(localStream, () => {
            // 发布成功,房间内其他人会收到 video-added、audio-added 事件
            console.log("client.publish success")
        }, (error) => {
            console.log("client.publish fail", error)
        })
    }, (error) => {
        console.log("localStream.init fail: ", error)
    })
  1. 离开房间
    localStream.close();
    client.leave();
    client.close();

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free