快速接入🚀

对接前先读

为了让您深入了解欢拓对接流程,我们制作了一个流程图,带您了解其核心概念
浏览器兼容及注意事项
Web-Demo工程下载

1、引入 JS-SDK 最新版本

<!--@ SDK包文件，用于 Web 端使用(PC/H5)公用 -->

最新版本可通过以下链接获取

2、定义HTML结构且在 `<head>` 标签定义 `access_token` 变量(如何获取access_token?)

<!-- .html <head> 定义 access_token 变量 -->
<head>
    <script>
        var access_token = "${access_token}";
    </script>
</head>
<body>
    <!-- #容器DOM -->
    <div id="pptPlayer">课件播放器容器</div>
    <div id="cameraPlayer">摄像头播放器容器</div>
    <div id="videoPlayer">视频播放器容器</div>
</body>

初始化 & 配置项

// 配置初始化额外参数
let extConf = {
    config: {
        techOrder: 'HLS', // 建议: 移动端使用HLS, PC端使用FLV
        controls: true // 视频播放器导航（全屏，刷新）
    },
    // 原生视频配置属性
    video: {
        autoplay: true, // video.autoplay
        controls: false, // video.controls
        preload: 'auto', // video.preload
        poster: false, // 视频海报图
    }
}
// 初始化传入配置项
let _HT = new MT.SDK.main(access_token, extConf, data => {
    callback(data)
});

3、监听事件 & 调用方法

// 成功连接
HT.on('connect', function () {
  console.log('TalkFun通信 => 连接成功...')
})

// 课件播放器
HT.whiteboardPlayer('pptPlayer', 'modPPTPlayer', function (player) {
    console.log('课件播放器 => 初始化成功')
})

// 摄像头播放器
HT.camera('cameraPlayer', 'modCameraPlayer', function () {
    console.log('摄像头播放器 => 初始化成功')
})

// 桌面 + 视频插播播放器
HT.videoPlayer('videoPlayer', 'modVideoPlayer', function () {
    console.log('视频播放器 => 初始化成功')
})

// 监听事件 `on`
HT.on("chat:send", function(chat){
    // 在dom指定位置插入一条聊天信息
    var li = document.createElement('li');
    li.innerHTML = chat.msg;
    // 把 `li` 元素插入到 `#chat_dom` 内
    document.querySelector("#chat_dom").appendChild(li);
});

results matching ""

No results matching ""