uni-app 微信小程序中 使用live-pusher 自定义拍照 snapshot快门方法 不能正确触发回调

在 uni-app 中使用 live-pusher 组件进行自定义拍照时，可能会遇到 snapshot 方法无法正确触发回调的问题。这个问题通常与微信小程序的实现机制以及 uni-app 的封装方式有关。以下是一些可能的解决方案和排查步骤：

1. 确保 live-pusher 组件正确初始化

live-pusher 需要正确初始化后才能使用 snapshot 方法。确保 live-pusher 已经成功启动并且处于运行状态。

<live-pusher
  id="livePusher"
  url="rtmp://example.com/live/stream"
  mode="SD"
  autopush
  @statechange="onStateChange"
></live-pusher>

export default {
  methods: {
    onStateChange(e) {
      console.log('live-pusher state change:', e.detail.code);
      if (e.detail.code === 2004) {
        // 2004 表示推流成功
        this.isPusherReady = true;
      }
    },
    takeSnapshot() {
      if (!this.isPusherReady) {
        console.error('live-pusher is not ready');
        return;
      }
      const livePusher = uni.createLivePusherContext('livePusher', this);
      livePusher.snapshot({
        success(res) {
          console.log('snapshot success:', res);
        },
        fail(err) {
          console.error('snapshot failed:', err);
        },
      });
    },
  },
};

2. 检查 snapshot 方法的调用时机

snapshot 方法需要在 live-pusher 组件完全加载后调用。如果 live-pusher 尚未准备好，可能会导致回调无法触发。可以通过 @statechange 事件监听组件的状态，确保在推流成功后再调用 snapshot。

3. 使用原生微信小程序代码测试

为了确定是否是 uni-app 封装导致的问题，可以尝试在原生微信小程序中直接使用 live-pusher 和 snapshot 方法，看看是否能正常触发回调。

Page({
  takeSnapshot() {
    const livePusher = this.selectComponent('#livePusher');
    livePusher.snapshot({
      success(res) {
        console.log('snapshot success:', res);
      },
      fail(err) {
        console.error('snapshot failed:', err);
      },
    });
  },
});

如果原生微信小程序中可以正常触发回调，那么问题可能出在 uni-app 的封装上。

4. 检查 uni-app 版本

确保使用的 uni-app 版本是最新的，因为旧版本可能存在兼容性问题。可以通过以下命令更新 uni-app：

npm install @dcloudio/uni-app@latest

5. 使用 uni.createLivePusherContext 获取上下文

在 uni-app 中，需要使用 uni.createLivePusherContext 获取 live-pusher 的上下文对象，而不是直接使用 this.selectComponent。

const livePusher = uni.createLivePusherContext('livePusher', this);
livePusher.snapshot({
  success(res) {
    console.log('snapshot success:', res);
  },
  fail(err) {
    console.error('snapshot failed:', err);
  },
});

6. 检查微信开发者工具版本

确保使用的是最新版本的微信开发者工具，旧版本可能存在兼容性问题。

7. 调试错误信息

如果 snapshot 方法仍然无法触发回调，可以通过 fail 回调获取详细的错误信息，帮助定位问题。

livePusher.snapshot({
  success(res) {
    console.log('snapshot success:', res);
  },
  fail(err) {
    console.error('snapshot failed:', err);
  },
});

8. 尝试其他方法

如果 snapshot 方法始终无法正常工作，可以尝试使用其他方式实现拍照功能，例如使用 camera 组件。

<camera
  device-position="back"
  flash="off"
  @error="onCameraError"
></camera>
<button @click="takePhoto">拍照</button>

export default {
  methods: {
    takePhoto() {
      const camera = uni.createCameraContext('camera', this);
      camera.takePhoto({
        quality: 'high',
        success(res) {
          console.log('拍照成功:', res.tempImagePath);
        },
        fail(err) {
          console.error('拍照失败:', err);
        },
      });
    },
  },
};