Image & Text Live Streaming

This document describes how to integrate the image-text live streaming component on the receiving end of the interactive feature. After integration, the audience can view image-text live streaming content.

Before introducing and using this component, you need to perform common configuration for the interactive feature receiving end SDK. For details, please refer to: Interactive Feature Receiving End UI Component - SDK Configuration.

Import

Online File Import

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileTuwen/MobileTuwen.umd.min.js"></script>
<script>
    const MobileTuwen = window.PolyvIRScene.MobileTuwen.default;
</script>

Import via import (Recommended)

import MobileTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/MobileTuwen';

Code Example

First, instantiate the SDK, then pass it into the image-text live streaming component for internal logic processing.

Taking PC integration as an example:

<template>
  <div id="tuwenContain" class="plv-demo-tuwen">
    <!-- 参考切换图文和图片模式的 demo代码，具体样式可按实际要求设计 -->
    <button @click="changeType(1)">图文模式</button>
    <button @click="changeType(2)">图片模式</button>
    <div v-show="messageTotal > 0" class="plv-ia-tuwen-top">
      <div class="plv-ia-tuwen-top__tip"> 共 {{ messageTotal }} 图文直播</div>
    </div>
    <Tuwen
        ref="tuwen"
        scroll-container="tuwenContain"
        :tuwen-sdk="TuwenSdk"
        :mode="mode"
        :lang="lang"
        :scroll-distance="scrollDistance"
        :disable-preview="isWeChatPreview"
        @change-message-total="changeMessageTotal"
        @show-preview="showPreview"
    />
  </div>
</template>

<script>
import { Tuwen } from '@polyv/interactions-receive-sdk';
import PcTuwen from '@polyv/interactions-receive-sdk-ui-default/lib/PcTuwen';

export default {
  components: {
    Tuwen: PcTuwen,
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 图文直播 SDK 实例
      TuwenSdk: null,
      mode: 1,
      messageTotal: 0,
      // 滚动底部距离阈值, 触发滚动加载
      scrollDistance: 200
    };
  },
  computed: {
    // 判断是否在手机微信环境下，且配置wx可以使用微信图片预览功能，否则使用内部图片预览功能
    isWeChatPreview() {
      // TODO 参考代码
      // return isMobile() && isWeixin() && window.wx
    }
  },

  created() {
    this.TuwenSdk = new Tuwen();
  },

  beforeDestroy() {
    this.TuwenSdk?.destroy();
  },

  methods: {
    changeType(val) {
      this.mode = val;
    },
    changeMessageTotal(val) {
      this.messageTotal = val;
    },
    // 微信环境下，使用 wx 图片预览功能体验更好。
    async showPreview(arg) {
      const { images, index } = arg;
      if (this.isWeChatPreview) {
        wx && wx.previewImage({
          urls: images,
          current: images[index]
        });
      }
    }
  }
};
</script>

<style lang="scss">
.plv-demo-tuwen {
  padding: 0 16px;
  height: 1600px;
  overflow-y: scroll;
}
.plv-ia-tuwen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 16px;
  .plv-ia-tuwen-tip {
    font-size: 12px;
    color: #aaa;
  }
}
</style>

Attributes

Events