TG Video SDK

一个用于视频处理的SDK工具，支持在Vue3和Element Plus项目中使用。

安装

npm install tg-video-sdk

在Vue3项目中使用

全局引入

在main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import { TG_VIDEO_SDK } from 'tg-video-sdk'

const app = createApp(App)
app.config.globalProperties.$videoSDK = TG_VIDEO_SDK
app.mount('#app')

组件中使用

<template>
  <div>
    <div ref="videoContainer" style="width: 640px; height: 480px;"></div>
    <button @click="startPlay">开始播放</button>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { TG_VIDEO_SDK } from 'tg-video-sdk'

const { proxy } = getCurrentInstance()
const videoContainer = ref(null)
let player = null

onMounted(() => {
  // 初始化SDK
  TG_VIDEO_SDK.JS_API.login('127.0.0.1:8080', 'admin', 'admin')
    .then(res => {
      console.log('登录成功', res)
    })
    .catch(err => {
      console.error('登录失败', err)
    })
})

const startPlay = () => {
  player = TG_VIDEO_SDK.JS_Rtc.StartPlayerService(videoContainer.value, {
    devId: 'your-device-id',
    playId: 0,
    playMode: '2D'
  })
  
  player.play({
    devId: 'your-device-id',
    playId: 0
  })
    .then(res => {
      console.log('播放成功', res)
    })
    .catch(err => {
      console.error('播放失败', err)
    })
}
</script>

API文档

登录

TG_VIDEO_SDK.JS_API.login(serverAddress, username, password)

视频播放

// 创建播放器实例
const player = TG_VIDEO_SDK.JS_Rtc.StartPlayerService(domElement, options)

// 开始播放
player.play({
  devId: 'your-device-id',
  playId: 0
})

// 停止播放
player.close()

云台控制

// 向左转动
TG_VIDEO_SDK.JS_Ptz.Left(deviceId, speed)

// 向右转动
TG_VIDEO_SDK.JS_Ptz.Right(deviceId, speed)

// 向上转动
TG_VIDEO_SDK.JS_Ptz.Up(deviceId, speed)

// 向下转动
TG_VIDEO_SDK.JS_Ptz.Down(deviceId, speed)

// 放大
TG_VIDEO_SDK.JS_Ptz.ZoomIn(deviceId, speed)

// 缩小
TG_VIDEO_SDK.JS_Ptz.ZoomOut(deviceId, speed)

// 停止
TG_VIDEO_SDK.JS_Ptz.Stop(deviceId)

注意事项

• 使用前请确保已正确安装依赖
• 需要在Vue3环境下使用
• 支持Element Plus组件库