工程项目门牌号:https://github.com/smackgg/reversevoice

整座工程项目只不过很单纯,从生前在抖音和 B 站看见火出来到终小流程上架也两天的午餐时间搞掂了,11月16日上架迄今采用者量却是蛮多的(主要就彼时做的快这类 app 较为少),那时早已再次出现了大批的更简洁更快的利穆县考验 app,本工程项目开放源码只供我们自学~(该文标识符须要以内翻转噢!)

新体验:小流程条码超火的利穆县考验-ReverseVoice(QQ小流程版其间端源代码)TsNodeTaro插图

2. 机能如是说/与此同时实现基本原理

机能及与此同时实现基本原理详述

① 小流程端采用者录音带并留存邻近地区

② 录音带后将录音带文档上载二位端展开利穆县处置,并回到处置后的音音频 url

③ 小流程端浏览 url 文档,提示信息采用者探底回升获得成功,将统计数据做邻近地区 map

④ 采用者点选撷取,聚合撷取镜像,并将该撷取正放、利穆县音频均传二位端留存至七牛云

⑤ 与此同时增建撷取 room 留存采用者重要信息,回到 roomId

⑥ 采用者撷取(电影海报撷取 canvas 静态聚合撷取码电影海报)

⑦ 其他采用者参与考验,储存基本原理同 4,而已减少将考验者重要信息了取走 room 的方法论

音音频利穆县

① 采用 ffmpeg 展开音音频利穆县,核心理念标识符:

// 参见 ./server/src/controllers/file.ts => function reverseVoice import ffmpegPath from @ffmpeg-installer/ffmpeg import ffprobePath from @ffprobe-installer/ffprobe import ffmpeg from fluent-ffmpeg ffmpeg.setFfprobePath(ffprobePath.path) ffmpeg.setFfmpegPath(ffmpegPath.path) ffmpeg(filepath) .format(mp4) // 探底回升 .outputOptions([ -vf reverse, -af areverse, -preset, superfast, -y, ]) .on(progress, (progress) => { // send upload progress console.log(upload-file-progress, progress.percent) }) .on(error, (err) => { console.log(`Ffmpeg has been killed${err.message}`) }) .toFormat(mp3) // 留存 .save(publicPath + saveFilePath) .on(end, () => { // 获取音音频重要信息(时长等) ffmpeg.ffprobe(publicPath + saveFilePath, (err, metadata) => { console.log(metadata.format.duration) }) })

小流程录音带

① 小流程录音带采用官方 api,详细方法论见 ./wechatapp/pages/index/index.tsx

录音带

电影海报聚合

① 利用 canvas 静态合成撷取电影海报./wechatapp/pages/sharePoster须要静态请求页面小流程码,涉及QQAccessToken鉴权等,参见./server/src/controllers/wechat.ts, 下面贴出部分核心理念标识符

// 画图 const draw = async () => { // 绘制之前 loading Taro.showLoading({ title: 电影海报聚合中…, mask: true, }) // 获取图片重要信息 const [productImgInfo, qrcodeImgInfo] = await Promise.all([ this.getImageInfo(sharePoster), // 获取主图 this.getQrImgInfo(), // 获取条码图片 ]) // product image 宽高 const pW = CANVAS_WIDTH const pH = (pW / productImgInfo.width) * productImgInfo.height // canvas 高度 let canvasHeight = pH const ctx = Taro.createCanvasContext(canvas, null) ctx.fillStyle = fff ctx.fillRect(0, 0, CANVAS_WIDTH, canvasHeight) // 绘制背景图片 ctx.drawImage(sharePoster, 0, 0, pW, pH) // 绘制条码 (因为有角度,须要旋转画布,再旋转回来) ctx.rotate(-Math.PI / 32) ctx.translate(-25 * ratio, 10 * ratio) ctx.drawImage(qrcodeImgInfo.path, QR_LEFT, QR_TOP, QR_WIDTH, QR_WIDTH) ctx.rotate(Math.PI / 32) this.setState({ canvasStyle: { …this.state.canvasStyle, height: canvasHeight, }, }) ctx.stroke() setTimeout(() => { Taro.hideLoading() ctx.draw() }, 500) }

② QQ撷取 HOC 函数./wechatapp/components/@withShare

// QQ小流程每个页面几乎都须要配置撷取的参数,并且须要静态更改撷取参数 // 所以抽离 HOC 组件,方便页面采用 import { ComponentClass } from react import Taro from @tarojs/taro import { connect } from @tarojs/redux; import defaultShareImg from @/assets/images/share.png type Options = { title?: string imageUrl?: string path?: string } const defalutOptions: Options = { title: 你能听懂我说啥么?最近很火的探底回升录音带来啦~, imageUrl: defaultShareImg, path: pages/index/index, } function withShare() { return function demoComponent(Component: ComponentClass) { @connect(({ user }) => ({ userInfo: user.userInfo })) class WithShare extends Component { $shareOptions?: Options async componentWillMount() { Taro.showShareMenu({ withShareTicket: true, }) if (super.componentWillMount) { super.componentWillMount() } } // 点选撷取的那一刻会展开调用 onShareAppMessage() { // const sharePath = `${path}&shareFromUser=${userInfo.shareId}` let options = defalutOptions if (this.$shareOptions) { options = { …defalutOptions, …this.$shareOptions, } } return options } render() { return super.render() } } return WithShare } } export default withShare

采用

@withShare() class Room extends Component { /** * 指定config的类型声明为: Taro.Config * * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型 * 对于像 navigationBarTextStyle: black 这样的推导出的类型是 string * 提示信息和声明 navigationBarTextStyle: black | white 类型冲突, 须要显示声明类型 */ config: Config = { navigationBarTitleText: 首页, } $shareOptions = { title: 利穆县考验!你能听懂我倒立洗头~, path: pages/index/index, imageUrl: , } /** …. */ }

QQ采用者登录流程

QQ官方文档登录流程 具体与此同时实现可以去看源代码

3. 工程项目运行-后端

准备

须要提前安装:

① Install Node.js

② Install MongoDB

开始

① 克隆工程项目并进入后端目录

cd server

② 安装依赖

npm install

③ 增建 .env 文档

在 wechatapp/src/utils 目录下克隆 env.example.ts 文档至同目录命名为 .env.ts 文档 此文档两个参数分别代表邻近地区开发和线上部署的请求门牌号

④ 运行工程项目

npm run dev:weapp // development mode 或者 npm run build:weapp // production mode

⑤ QQ开发者工具

选择导入工程项目,并选择 wechatapp/dist 目录 若邻近地区开发,须要在开发者工具中设置开启不校验合法域名

License

MIT

原文作者:Rolan

原文镜像:

http://www.wxapp-union.com/portal.php?mod=view&aid=5704

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: