在uni-app中，虽然官方没有直接提供一个内置的H5扫码组件，但你可以通过一些第三方库来实现扫码功能。以下是一个使用qrcode-scanner库在uni-app的H5端实现扫码功能的示例代码。需要注意的是，由于H5环境的限制，扫码功能依赖于浏览器的摄像头权限，并且不同浏览器的支持情况可能有所不同。

首先，你需要安装qrcode-scanner库。在uni-app项目中，你可以通过以下方式安装（假设你使用的是npm或yarn）：

npm install qrcode-scanner --save
# 或者
yarn add qrcode-scanner

然后，在你的H5页面中使用该库。以下是一个简单的示例代码：

<template>
  <view class="container">
    <canvas canvas-id="qrcodeCanvas" style="width: 100%; height: 300px;"></canvas>
    <button @click="startScan">开始扫码</button>
    <button @click="stopScan">停止扫码</button>
    <view v-if="scanResult">扫码结果: {{ scanResult }}</view>
  </view>
</template>

<script>
import QrScanner from 'qrcode-scanner';

export default {
  data() {
    return {
      scanner: null,
      scanResult: ''
    };
  },
  methods: {
    startScan() {
      if (this.scanner) {
        this.stopScan();
      }
      this.scanner = new QrScanner(document.getElementById('qrcodeCanvas'), result => {
        this.scanResult = result;
        console.log(result);
        this.stopScan(); // 扫码成功后自动停止
      }, (errorMessage) => {
        console.error(errorMessage);
      });
      this.scanner.start();
    },
    stopScan() {
      if (this.scanner) {
        this.scanner.stop();
        this.scanner = null;
      }
    }
  },
  onUnload() {
    this.stopScan(); // 页面卸载时停止扫码
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

在这个示例中，我们创建了一个<canvas>元素用于显示扫码区域，并提供了两个按钮来控制扫码的开始和停止。QrScanner实例被用于处理扫码逻辑，并在扫码成功后将结果存储在scanResult中。

请注意，由于H5环境的限制，某些浏览器可能不支持或需要额外的权限配置才能使用摄像头。因此，在实际应用中，你可能需要处理浏览器权限请求和兼容性问题。此外，对于生产环境，建议对扫码结果进行进一步的验证和处理，以确保安全性。