更新记录

1.0.0（2026-03-12）

推流插件

平台兼容性

uni-app(4.66)

uni-app x(4.66)

插件地址https://ext.dcloud.net.cn/plugin?id=26956

使用说明

导入示例项目制作自定义基座 运行到安卓手机或者模拟器

购买源码版直接修改kotlin代码，功能不完善的自己改源码。

目前主要实现功能

1. 切换摄像头
2. 缩放
3. 预览
4. RTMP推流

插件没有获取权限需要在你项目获取相机相册麦克风权限参考示例项目 安卓模块配置需要勾上相机和录音 使用示例

<template>
  <view class="container">
    <text class="title">推流组件测试</text>
    <!-- 预览组件，必须设置宽高，注意不要设置背景色遮罩 -->
    <my-streaming
      ref="streamer"
      style="width: 750rpx; height: 1000rpx; margin-top: 50rpx;"
    />

    <view class="controls">
      <input v-model="rtmpUrl" placeholder="输入RTMP推流地址" class="url-input" />
      <view class="button-row">
        <button @click="startPreview" class="btn preview">预览</button>
        <button @click="stopPreview" class="btn stop">停止预览</button>
        <button @click="switchCamera" class="btn preview">切换摄像头</button>
      </view>
      <view class="button-row">
        <button @click="startPush" class="btn push">开始推流</button>
        <button @click="stopPush" class="btn stop">停止推流</button>
      </view>
      <view class="button-row">
        <button @click="zoomRange" class="btn stop">获取缩放范围</button>
        <button @click="zoomA" class="btn stop">-</button>
        <button @click="zoomB" class="btn stop">+</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
       rtmpUrl: '',
      // rtmpUrl: 'rtmp://81.70.104.12:18881/live/livestream',
      zoom:1
    }
  },
  onLoad() {
    // 申请权限
    // uni.authorize({
    //   scope: 'scope.camera',
    //   success: () => console.log('相机权限已授权'),
    //   fail: () => uni.showModal({ title: '需要相机权限' })
    // });
    // uni.authorize({
    //   scope: 'scope.record',
    //   success: () => console.log('录音权限已授权'),
    //   fail: () => uni.showModal({ title: '需要录音权限' })
    // });
  },
  onReady() {
  },
  methods: {
      switchCamera() {
        this.$refs.streamer.switchCamera();
      },
    zoomB(){
        this.zoom=this.zoom+0.1
        this.$refs.streamer.setZoom(this.zoom)
    },
    zoomA(){
        this.zoom=this.zoom-0.1
        this.$refs.streamer.setZoom(this.zoom)
    },
    zoomRange(){
        this.$refs.streamer.getZoomRange()
    },
    startPreview() {
      this.$refs.streamer.startPreview(640, 480);
    },
    stopPreview() {
      this.$refs.streamer.stopPreview();
    },
    startPush() {
      if (!this.rtmpUrl) {
        uni.showToast({ title: '请输入推流地址', icon: 'none' });
        return;
      }
      // 推流地址，宽，高 ，fps，码率 2000kbps
      this.$refs.streamer.startPush(this.rtmpUrl, 1280, 720, 30, 2000 * 1000);
      uni.showLoading({ title: '推流中...' });
    },
    stopPush() {
      this.$refs.streamer.stopPush();
      uni.hideLoading();
    }
  }
}
</script>

<style>
.container {
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
.controls {
  width: 700rpx;
  margin-top: 50rpx;
}
.url-input {
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  padding: 2rpx;

}
.button-row {
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 30rpx;
}
.btn {
  width: 150rpx;
  height: 60rpx;
  padding: 20rpx 0;
  border-radius: 10rpx;
  color: white;
  font-size: 20rpx;
}
.preview {
  background-color: #17a2b8;
}
.push {
  background-color: #28a745;
}
.stop {
  background-color: #dc3545;
}
</style>