释放创意无限，uni-app 拖动视频随心所欲

2024-01-22 06:55:17

在 Uni-app 中实现类似 QQ 视频通话的视频窗口随意拖动功能

简介

在当今信息爆炸的时代，视频已成为人们获取信息和表达自我不可或缺的方式。其中，视频通话的便捷性更是让人们之间的沟通更加顺畅。如果你也想在自己的应用中实现类似于 QQ 视频通话那样的视频窗口随意拖动功能，那么本文将为你提供详细的解决方案，让你轻松掌握 uni-app 中实现拖动的诀窍。

实现步骤

1. 布局结构

首先，我们需要在页面布局中添加一个承载视频窗口的容器元素，并设置其定位方式为绝对定位（absolute），这样才能实现视频窗口的自由拖动。同时，还需要在容器元素中添加一个用于显示视频的原生组件 <webrtc-view>。

<template>
  <view>
    <view class="video-container" style="position: absolute; width: 320px; height: 180px;">
      <webrtc-view ref="remoteView" :src="remoteStream" class="video" style="width: 100%; height: 100%;"></webrtc-view>
    </view>
  </view>
</template>

2. 拖动事件监听

接下来，我们需要为视频容器元素添加拖动事件监听器。当用户手指按下视频窗口时，触发 touchstart 事件，记录手指的初始位置；当手指移动时，触发 touchmove 事件，计算手指移动的距离，并更新视频窗口的位置；当手指抬起时，触发 touchend 事件，停止更新视频窗口的位置。

methods: {
  touchstart(e) {
    this.startX = e.touches[0].clientX
    this.startY = e.touches[0].clientY
    this.isDragging = true
  },
  touchmove(e) {
    if (!this.isDragging) return
    const dx = e.touches[0].clientX - this.startX
    const dy = e.touches[0].clientY - this.startY
    this.updatePosition(dx, dy)
  },
  touchend() {
    this.isDragging = false
  },
}

3. 更新视频窗口位置

在 touchmove 事件中，我们需要计算手指移动的距离，并更新视频窗口的位置。这里使用 uni.getSystemInfoSync() 方法获取屏幕的宽度和高度，保证视频窗口不会超出屏幕范围。

updatePosition(dx, dy) {
  const { screenWidth, screenHeight } = uni.getSystemInfoSync()
  const left = Math.min(Math.max(0, this.left + dx), screenWidth - this.width)
  const top = Math.min(Math.max(0, this.top + dy), screenHeight - this.height)
  this.left = left
  this.top = top
  this.videoContainerStyle = `left: ${left}px; top: ${top}px;`
}

4. 初始化视频窗口位置

在页面初始化时，我们需要为视频窗口设置初始位置。这里将视频窗口定位在屏幕的右上角。

data() {
  return {
    isDragging: false,
    startX: 0,
    startY: 0,
    left: 0,
    top: 0,
    width: 320,
    height: 180,
    videoContainerStyle: 'left: 0px; top: 0px;',
  }
},

完整代码示例

<template>
  <view>
    <view class="video-container" :style="videoContainerStyle">
      <webrtc-view ref="remoteView" :src="remoteStream" class="video" style="width: 100%; height: 100%;"></webrtc-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      left: 0,
      top: 0,
      width: 320,
      height: 180,
      videoContainerStyle: 'left: 0px; top: 0px;',
    }
  },
  methods: {
    touchstart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.isDragging = true
    },
    touchmove(e) {
      if (!this.isDragging) return
      const dx = e.touches[0].clientX - this.startX
      const dy = e.touches[0].clientY - this.startY
      this.updatePosition(dx, dy)
    },
    touchend() {
      this.isDragging = false
    },
    updatePosition(dx, dy) {
      const { screenWidth, screenHeight } = uni.getSystemInfoSync()
      const left = Math.min(Math.max(0, this.left + dx), screenWidth - this.width)
      const top = Math.min(Math.max(0, this.top + dy), screenHeight - this.height)
      this.left = left
      this.top = top
      this.videoContainerStyle = `left: ${left}px; top: ${top}px;`
    }
  },
}
</script>

<style>
.video-container {
  position: absolute;
  width: 320px;
  height: 180px;
}

.video {
  width: 100%;
  height: 100%;
}
</style>