diff --git a/uniapp-api-examples/App.vue b/uniapp-api-examples/App.vue new file mode 100644 index 000000000..8c2b73210 --- /dev/null +++ b/uniapp-api-examples/App.vue @@ -0,0 +1,17 @@ + + + diff --git a/uniapp-api-examples/README.md b/uniapp-api-examples/README.md new file mode 100644 index 000000000..abfd6fd15 --- /dev/null +++ b/uniapp-api-examples/README.md @@ -0,0 +1 @@ +uniapp 对接WebSocket api 用HBuilder X打开,修改对接服务器地址直接运行 \ No newline at end of file diff --git a/uniapp-api-examples/common/RecorderManager.js b/uniapp-api-examples/common/RecorderManager.js new file mode 100644 index 000000000..dce8b3c3d --- /dev/null +++ b/uniapp-api-examples/common/RecorderManager.js @@ -0,0 +1,311 @@ +import Recorder from 'recorder-core'; // 注意如果未引用Recorder变量,可能编译时会被优化删除 +import RecordApp from 'recorder-core/src/app-support/app'; +import '@/uni_modules/Recorder-UniCore/app-uni-support.js'; +import 'recorder-core/src/engine/mp3'; +import 'recorder-core/src/engine/wav'; +import 'recorder-core/src/engine/mp3-engine'; + +import 'recorder-core/src/extensions/waveview'; +var chunk = null; +var pcmBuffer = new Int16Array(0); +var world = ""; +var pcmindex = 0; +var socket = {}; +class RecorderManager { + + constructor() { + this.startindex = -1; + this.isMounted = false; + //this.socket = {}; + this.webSocketTask = null; + this.waveView = null; + this.clearBufferIdx = 0; + this.pcmBuffer = new Int16Array(0); + + } +to16BitPCM(input) { + var dataLength = input.length * (16 / 8); + var dataBuffer = new ArrayBuffer(dataLength); + var dataView = new DataView(dataBuffer); + var offset = 0; + + for (var i = 0; i < input.length; i++, offset += 2) { + var s = Math.max(-1, Math.min(1, input[i])); + dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true); + } + + return dataView; + } + + to16kHz(audioData) { + var sampleRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 44100; + var data = new Float32Array(audioData); + var fitCount = Math.round(data.length * (16000 / sampleRate)); + var newData = new Float32Array(fitCount); + var springFactor = (data.length - 1) / (fitCount - 1); + newData[0] = data[0]; + + for (var i = 1; i < fitCount - 1; i++) { + var tmp = i * springFactor; + var before = Math.floor(tmp).toFixed(); + var after = Math.ceil(tmp).toFixed(); + var atPoint = tmp - before; + newData[i] = data[before] + (data[after] - data[before]) * atPoint; + } + + newData[fitCount - 1] = data[data.length - 1]; + return newData; + } + + init(url) { + var that = this; + + this.url = url; + + socket = new WebSocket(url); + socket.onopen = () => { + console.log('WebSocket connection opened'); + }; + + socket.onerror = error => { + console.error('WebSocket error:', error); + }; + + socket.onclose = () => { + this.reconnectWebSocket(); + console.log('WebSocket connection closed'); + }; + console.log(socket); + + const receiveTask = this.receiveResults(socket); + + } + reconnectWebSocket() { + // 重新创建 WebSocket 实例 + socket = new WebSocket(this.url); + + socket.onopen = () => { + + console.log('WebSocket reconnected'); + }; + socket.onclose = () => { + this.reconnectWebSocket(); + console.log('WebSocket connection closed'); + }; + const receiveTask = this.receiveResults(socket); + } + + mounted() { + this.isMounted = true; + RecordApp.UniPageOnShow(this); + } + + onLoad() { + + } + + // socket() { + // this.webSocketTask = uni.connectSocket({ + // url: this.url, + // header: { + // 'content-type': 'application/json' + // }, + // success(res) { + // console.log('成功', res); + // } + // }); + + // this.webSocketTask.onOpen((res) => { + // this.webSocketTask.send({ + // data: JSON.stringify({ + // type: 'pong' + // }) + // }); + // console.info("监听WebSocket连接打开事件", res); + // }); + + // uni.onSocketError((res) => { + // console.info("监听WebSocket错误" + res); + // }); + // } + + onShow() { + + } + + onUnload() { + uni.closeSocket({ + success: () => { + console.info("退出成功"); + } + }); + } + + recReq() { + RecordApp.UniWebViewActivate(this); + RecordApp.RequestPermission(() => { + console.log("已获得录音权限,可以开始录音了"); + }, (msg, isUserNotAllow) => { + if (isUserNotAllow) { + // 用户拒绝了录音权限 + } + console.error("请求录音权限失败:" + msg); + }); + } + async receiveResults(socket) { + let lastMessage = ''; + while (true) { + const message = await new Promise(resolve => socket.onmessage = e => resolve(e.data)); + // const message = socket.data; + if (message !== 'Done!') { + if (lastMessage !== message) { + lastMessage = message; + if (lastMessage) { + //console.log(lastMessage); + this.talkStart(lastMessage); + lastMessage = JSON.parse(lastMessage); + //console.log(lastMessage.is_final); + if (lastMessage.is_final) { + this.talkEnd(lastMessage.text); + } + + } + } + } else { + return lastMessage; + } + } + } + startIdentify(res) { + chunk = null; + //console.log("开始识别"); + } + + talkStart(res) { + //console.log("一句话开始"); + console.log(res); + } + identifyChange(res) { + //console.log("识别变化时"); + } + + talkEnd(res) { + console.log("一句话结束") + console.log(res); + + } + + + + callback(buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) { + //console.log(powerLevel); + // this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate); + //console.log("数据:" + this.startindex); + + + + if (powerLevel >= 0) { + chunk = Recorder.SampleData(buffers, sampleRate, 16000, chunk) + // chunk = Recorder.SampleData(buffers, sampleRate, 16000, chunk) + //console.log(chunk); + var pcm = chunk.data; + var tmp = new Int16Array(pcmBuffer.length + pcm.length); + tmp.set(pcmBuffer, 0); + tmp.set(pcm, pcmBuffer.length); + pcmBuffer = tmp; + + + this.identifyChange(powerLevel); + var int16Data = pcmBuffer; + const float32Data = new Float32Array(int16Data.length); + for (let i = 0; i < int16Data.length; i++) { + float32Data[i] = int16Data[i] / 32768.0; + } + + this.startIdentify(powerLevel); + + + socket.send(float32Data); + + pcmBuffer = new Int16Array(0); + // chunk =[]; + if (this.clearBufferIdx > newBufferIdx) { + this.clearBufferIdx = 0; + } + for (let i = this.clearBufferIdx || 0; i < newBufferIdx; i++) { + buffers[i] = null; + } + this.clearBufferIdx = newBufferIdx; + } + // this.chunk=RecordApp.SampleData(buffers,bufferSampleRate,pcmBufferSampleRate,chunk); + //chunk=Recorder.SampleData(rec2.buffers,rec2.srcSampleRate,pcmBufferSampleRate,chunk); //直接使用rec2.buffers来处理也是一样的,rec2.buffers的采样率>=buffers的采样率 + //这个就是当前最新的pcm,采样率已转成16000,Int16Array可以直接发送使用,或发送pcm.buffer是ArrayBuffer + + + } + recStart() { + + const set = { + type: "wav", + sampleRate: 16000, + bitRate: 16, + // disableEnvInFix:true, + onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => { + // console.log(powerLevel); + this.callback(buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd); + + + + + + + } + + }; + + RecordApp.UniWebViewActivate(this); + RecordApp.Start(set, () => { + console.log("已开始录音"); + }, (msg) => { + console.error("开始录音失败:" + msg); + }); + } + + recPause() { + if (RecordApp.GetCurrentRecOrNull()) { + RecordApp.Pause(); + console.log("已暂停"); + } + } + + recResume() { + if (RecordApp.GetCurrentRecOrNull()) { + RecordApp.Resume(); + console.log("继续录音中..."); + } + } + + recStop() { + chunk = null; + RecordApp.Stop((arrayBuffer, duration, mime) => { + + //console.log(arrayBuffer, (window.URL || webkitURL).createObjectURL(arrayBuffer)); + }, (msg) => { + console.error("结束录音失败:" + msg); + }); + } + + setupWaveView(canvasId) { + RecordApp.UniFindCanvas(this, [canvasId], ` + this.waveView = Recorder.WaveView({ compatibleCanvas: canvas1, width: 300, height: 100 }); + `, (canvas1) => { + this.waveView = Recorder.WaveView({ + compatibleCanvas: canvas1, + width: 300, + height: 100 + }); + }); + } +} + +export default RecorderManager; \ No newline at end of file diff --git a/uniapp-api-examples/index.html b/uniapp-api-examples/index.html new file mode 100644 index 000000000..c3ff205f6 --- /dev/null +++ b/uniapp-api-examples/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + +
+ + + diff --git a/uniapp-api-examples/main.js b/uniapp-api-examples/main.js new file mode 100644 index 000000000..c1caf3606 --- /dev/null +++ b/uniapp-api-examples/main.js @@ -0,0 +1,22 @@ +import App from './App' + +// #ifndef VUE3 +import Vue from 'vue' +import './uni.promisify.adaptor' +Vue.config.productionTip = false +App.mpType = 'app' +const app = new Vue({ + ...App +}) +app.$mount() +// #endif + +// #ifdef VUE3 +import { createSSRApp } from 'vue' +export function createApp() { + const app = createSSRApp(App) + return { + app + } +} +// #endif \ No newline at end of file diff --git a/uniapp-api-examples/manifest.json b/uniapp-api-examples/manifest.json new file mode 100644 index 000000000..b40c416f6 --- /dev/null +++ b/uniapp-api-examples/manifest.json @@ -0,0 +1,72 @@ +{ + "name" : "uniapp_demo", + "appid" : "__UNI__5C09921", + "description" : "", + "versionName" : "1.0.0", + "versionCode" : "100", + "transformPx" : false, + /* 5+App特有相关 */ + "app-plus" : { + "usingComponents" : true, + "nvueStyleCompiler" : "uni-app", + "compilerVersion" : 3, + "splashscreen" : { + "alwaysShowBeforeRender" : true, + "waiting" : true, + "autoclose" : true, + "delay" : 0 + }, + /* 模块配置 */ + "modules" : {}, + /* 应用发布信息 */ + "distribute" : { + /* android打包配置 */ + "android" : { + "permissions" : [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "" + ] + }, + /* ios打包配置 */ + "ios" : {}, + /* SDK配置 */ + "sdkConfigs" : {} + } + }, + /* 快应用特有相关 */ + "quickapp" : {}, + /* 小程序特有相关 */ + "mp-weixin" : { + "appid" : "", + "setting" : { + "urlCheck" : false + }, + "usingComponents" : true + }, + "mp-alipay" : { + "usingComponents" : true + }, + "mp-baidu" : { + "usingComponents" : true + }, + "mp-toutiao" : { + "usingComponents" : true + }, + "uniStatistics" : { + "enable" : false + }, + "vueVersion" : "3" +} diff --git a/uniapp-api-examples/package.json b/uniapp-api-examples/package.json new file mode 100644 index 000000000..95e0ffc80 --- /dev/null +++ b/uniapp-api-examples/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "recorder-core": "^1.3.24102001" + } +} diff --git a/uniapp-api-examples/pages.json b/uniapp-api-examples/pages.json new file mode 100644 index 000000000..40663e016 --- /dev/null +++ b/uniapp-api-examples/pages.json @@ -0,0 +1,21 @@ +{ + "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages + { + "path": "pages/index/index", + + "style": { + "navigationBarTitleText": "uni-app", + "app-plus": { + "titleNView": false + } + } + } + ], + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "uni-app", + "navigationBarBackgroundColor": "#F8F8F8", + "backgroundColor": "#F8F8F8" + }, + "uniIdRouter": {} +} diff --git a/uniapp-api-examples/pages/index/index.vue b/uniapp-api-examples/pages/index/index.vue new file mode 100644 index 000000000..ae265a8e6 --- /dev/null +++ b/uniapp-api-examples/pages/index/index.vue @@ -0,0 +1,119 @@ + + + + + \ No newline at end of file diff --git a/uniapp-api-examples/static/logo3.png b/uniapp-api-examples/static/logo3.png new file mode 100644 index 000000000..ed9640007 Binary files /dev/null and b/uniapp-api-examples/static/logo3.png differ diff --git a/uniapp-api-examples/static/logo4.png b/uniapp-api-examples/static/logo4.png new file mode 100644 index 000000000..5fc111da0 Binary files /dev/null and b/uniapp-api-examples/static/logo4.png differ diff --git a/uniapp-api-examples/uni.promisify.adaptor.js b/uniapp-api-examples/uni.promisify.adaptor.js new file mode 100644 index 000000000..5fec4f330 --- /dev/null +++ b/uniapp-api-examples/uni.promisify.adaptor.js @@ -0,0 +1,13 @@ +uni.addInterceptor({ + returnValue (res) { + if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { + return res; + } + return new Promise((resolve, reject) => { + res.then((res) => { + if (!res) return resolve(res) + return res[0] ? reject(res[0]) : resolve(res[1]) + }); + }); + }, +}); \ No newline at end of file diff --git a/uniapp-api-examples/uni.scss b/uniapp-api-examples/uni.scss new file mode 100644 index 000000000..b9249e9d9 --- /dev/null +++ b/uniapp-api-examples/uni.scss @@ -0,0 +1,76 @@ +/** + * 这里是uni-app内置的常用样式变量 + * + * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 + * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App + * + */ + +/** + * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 + * + * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 + */ + +/* 颜色变量 */ + +/* 行为相关颜色 */ +$uni-color-primary: #007aff; +$uni-color-success: #4cd964; +$uni-color-warning: #f0ad4e; +$uni-color-error: #dd524d; + +/* 文字基本颜色 */ +$uni-text-color:#333;//基本色 +$uni-text-color-inverse:#fff;//反色 +$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 +$uni-text-color-placeholder: #808080; +$uni-text-color-disable:#c0c0c0; + +/* 背景颜色 */ +$uni-bg-color:#ffffff; +$uni-bg-color-grey:#f8f8f8; +$uni-bg-color-hover:#f1f1f1;//点击状态颜色 +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 + +/* 边框颜色 */ +$uni-border-color:#c8c7cc; + +/* 尺寸变量 */ + +/* 文字尺寸 */ +$uni-font-size-sm:12px; +$uni-font-size-base:14px; +$uni-font-size-lg:16px; + +/* 图片尺寸 */ +$uni-img-size-sm:20px; +$uni-img-size-base:26px; +$uni-img-size-lg:40px; + +/* Border Radius */ +$uni-border-radius-sm: 2px; +$uni-border-radius-base: 3px; +$uni-border-radius-lg: 6px; +$uni-border-radius-circle: 50%; + +/* 水平间距 */ +$uni-spacing-row-sm: 5px; +$uni-spacing-row-base: 10px; +$uni-spacing-row-lg: 15px; + +/* 垂直间距 */ +$uni-spacing-col-sm: 4px; +$uni-spacing-col-base: 8px; +$uni-spacing-col-lg: 12px; + +/* 透明度 */ +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 + +/* 文章场景相关 */ +$uni-color-title: #2C405A; // 文章标题颜色 +$uni-font-size-title:20px; +$uni-color-subtitle: #555555; // 二级标题颜色 +$uni-font-size-subtitle:26px; +$uni-color-paragraph: #3F536E; // 文章段落颜色 +$uni-font-size-paragraph:15px; diff --git a/uniapp-api-examples/uni_modules/Recorder-UniCore/app-uni-support.js b/uniapp-api-examples/uni_modules/Recorder-UniCore/app-uni-support.js new file mode 100644 index 000000000..c83bef308 --- /dev/null +++ b/uniapp-api-examples/uni_modules/Recorder-UniCore/app-uni-support.js @@ -0,0 +1,38 @@ +/** +本代码为RecordApp在uni-app下使用的适配代码,为压缩版(功能和源码版一致) +GitHub、详细文档、许可及服务协议: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp + +【授权】 +在uni-app中编译到App平台时仅供测试用(App平台包括:Android App、iOS App),不可用于正式发布或商用,正式发布或商用需先联系作者获取到商用授权许可 + +在uni-app中编译到其他平台时无此授权限制,比如:H5、小程序,均为免费授权 + +获取商用授权方式:到DCloud插件市场购买授权 https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin-Android (会赠送Android版原生插件);购买后可联系客服,同时提供订单信息,客服拉你进入VIP支持QQ群,入群后在群文件中可下载此js文件最新源码 + +客服联系方式:QQ 1251654593 ,或者直接联系作者QQ 753610399 (回复可能没有客服及时)。 +**/ + +/*** +录音 RecordApp: uni-app支持文件,支持 H5、App vue、App nvue、微信小程序 +GitHub、详细文档、许可及服务协议: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp + +DCloud插件地址:https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore +App配套原生插件:https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin + +全局配置参数: + RecordApp.UniAppUseLicense:"" App中使用的授权许可,获得授权后请赋值为"我已获得UniAppID=***的商用授权"(***为你项目的uni-app应用标识),设置了UniNativeUtsPlugin时默认为已授权;如果未授权,将会在App打开后第一次调用`RecordApp.RequestPermission`请求录音权限时,弹出“未获得商用授权时,App上仅供测试”提示框。 + + RecordApp.UniNativeUtsPlugin:null App中启用原生录音插件或uts插件,由App提供原生录音,将原生插件或uts插件赋值给这个变量即可开启支持;使用原生录音插件只需赋值为{nativePlugin:true}即可(提供nativePluginName可指定插件名字,默认为Recorder-NativePlugin),使用uts插件只需import插件后赋值即可(uts插件还未开发,目前不可集成);如果未提供任何插件,App中将使用H5录音(在renderjs中提供H5录音)。 + + RecordApp.UniWithoutAppRenderjs:false 不要使用或没有renderjs时,应当设为true,此时App中RecordApp完全运行在逻辑层,比如nvue页面,此时音频编码之类的操作全部在逻辑层,需要提供UniNativeUtsPlugin配置由原生插件进行录音,可视化绘制依旧可以在renderjs中进行。默认为false,RecordApp将在renderjs中进行实际的工作,然后将处理好的数据传回逻辑层,数据比较大时传输会比较慢。 + +不同平台环境下使用说明: + 【H5】 引入RecordApp和本js,按RecordApp的文档使用即可,和普通网页开发没有区别 + + 【微信小程序】 引入RecordApp和本js,同时引入RecordApp中的app-miniProgram-wx-support.js即可,录音操作和H5完全相同,其他可视化扩展等使用请参考RecordApp中的小程序说明 + + 【App vue】 引入RecordApp和本js,并创建一个 +``` + +``` html + + + +``` + + +*⠀* + +*⠀* + +## 二、调用录音 +``` javascript +/**在逻辑层中编写**/ +//import ... 上面那些import代码 + +//var vue3This=getCurrentInstance().proxy; //当用vue3 setup组合式 API (Composition API) 编写时,直接在import后面取到当前实例this,在需要this的地方传vue3This变量即可,其他的和选项式 API (Options API) 没有任何区别;import {getCurrentInstance} from 'vue';详细可以参考Demo项目中的 page_vue3____composition_api.vue + +//RecordApp.UniNativeUtsPlugin={ nativePlugin:true }; //App中启用配套的原生录音插件支持,配置后会使用原生插件进行录音,没有原生插件时依旧使用renderjs H5录音 +//App中提升后台录音的稳定性:配置了原生插件后,可配置 `RecordApp.UniWithoutAppRenderjs=true` 禁用renderjs层音频编码(WebWorker加速),变成逻辑层中直接编码(但会降低逻辑层性能),后台运行时可避免部分手机WebView运行受限的影响 +//App中提升后台录音的稳定性:需要启用后台录音保活服务(iOS不需要),Android 9开始,锁屏或进入后台一段时间后App可能会被禁止访问麦克风导致录音静音、无法录音(renderjs中H5录音也受影响),请调用配套原生插件的`androidNotifyService`接口,或使用第三方保活插件 + +export default { +data() { return {} } //视图没有引用到的变量无需放data里,直接this.xxx使用 + +,mounted() { + this.isMounted=true; + //页面onShow时【必须调用】的函数,传入当前组件this + RecordApp.UniPageOnShow(this); +} +,onShow(){ //onShow可能比mounted先执行,页面可能还未准备好 + if(this.isMounted) RecordApp.UniPageOnShow(this); +} + +,methods:{ + //请求录音权限 + recReq(){ + //编译成App时提供的授权许可(编译成H5、小程序为免费授权可不填写);如果未填写授权许可,将会在App打开后第一次调用请求录音权限时,弹出“未获得商用授权时,App上仅供测试”提示框 + //RecordApp.UniAppUseLicense='我已获得UniAppID=*****的商用授权'; + + //RecordApp.RequestPermission_H5OpenSet={ audioTrackSet:{ noiseSuppression:true,echoCancellation:true,autoGainControl:true } }; //这个是Start中的audioTrackSet配置,在h5(H5、App+renderjs)中必须提前配置,因为h5中RequestPermission会直接打开录音 + + RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView + RecordApp.RequestPermission(()=>{ + console.log("已获得录音权限,可以开始录音了"); + },(msg,isUserNotAllow)=>{ + if(isUserNotAllow){//用户拒绝了录音权限 + //这里你应当编写代码进行引导用户给录音权限,不同平台分别进行编写 + } + console.error("请求录音权限失败:"+msg); + }); + } + + //开始录音 + ,recStart(){ + //Android App如果要后台录音,需要启用后台录音保活服务(iOS不需要),需使用配套原生插件、或使用第三方保活插件 + //RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ title:"正在录音" ,content:"正在录音中,请勿关闭App运行" }).then(()=>{...}).catch((e)=>{...}) + + //录音配置信息 + var set={ + type:"mp3",sampleRate:16000,bitRate:16 //mp3格式,指定采样率hz、比特率kbps,其他参数使用默认配置;注意:是数字的参数必须提供数字,不要用字符串;需要使用的type类型,需提前把格式支持文件加载进来,比如使用wav格式需要提前加载wav.js编码引擎 + /*,audioTrackSet:{ //可选,如果需要同时播放声音(比如语音通话),需要打开回声消除(打开后声音可能会从听筒播放,部分环境下(如小程序、App原生插件)可调用接口切换成扬声器外放) + //注意:H5、App+renderjs中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效 + echoCancellation:true,noiseSuppression:true,autoGainControl:true} */ + ,onProcess:(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd)=>{ + //全平台通用:可实时上传(发送)数据,配合Recorder.SampleData方法,将buffers中的新数据连续的转换成pcm上传,或使用mock方法将新数据连续的转码成其他格式上传,可以参考Recorder文档里面的:Demo片段列表 -> 实时转码并上传-通用版;基于本功能可以做到:实时转发数据、实时保存数据、实时语音识别(ASR)等 + + //注意:App里面是在renderjs中进行实际的音频格式编码操作,此处的buffers数据是renderjs实时转发过来的,修改此处的buffers数据不会改变renderjs中buffers,所以不会改变生成的音频文件,可在onProcess_renderjs中进行修改操作就没有此问题了;如需清理buffers内存,此处和onProcess_renderjs中均需要进行清理,H5、小程序中无此限制 + //注意:如果你要用只支持在浏览器中使用的Recorder扩展插件,App里面请在renderjs中引入此扩展插件,然后在onProcess_renderjs中调用这个插件;H5可直接在这里进行调用,小程序不支持这类插件;如果调用插件的逻辑比较复杂,建议封装成js文件,这样逻辑层、renderjs中直接import,不需要重复编写 + + //H5、小程序等可视化图形绘制,直接运行在逻辑层;App里面需要在onProcess_renderjs中进行这些操作 + // #ifdef H5 || MP-WEIXIN + if(this.waveView) this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate); + // #endif + + /*实时释放清理内存,用于支持长时间录音;在指定了有效的type时,编码器内部可能还会有其他缓冲,必须同时提供takeoffEncodeChunk才能清理内存,否则type需要提供unknown格式来阻止编码器内部缓冲,App的onProcess_renderjs中需要进行相同操作 + if(this.clearBufferIdx>newBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置 + for(var i=this.clearBufferIdx||0;inewBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置 + for(var i=this.clearBufferIdx||0;i 转发给逻辑层onProcess -> onProcess_renderjs + }` + + ,takeoffEncodeChunk:true?null:(chunkBytes)=>{ + //全平台通用:实时接收到编码器编码出来的音频片段数据,chunkBytes是Uint8Array二进制数据,可以实时上传(发送)出去 + //App中如果未配置RecordApp.UniWithoutAppRenderjs时,建议提供此回调,因为录音结束后会将整个录音文件从renderjs传回逻辑层,由于uni-app的逻辑层和renderjs层数据交互性能实在太拉跨了,大点的文件传输会比较慢,提供此回调后可避免Stop时产生超大数据回传 + + //App中使用原生插件时,可方便的将数据实时保存到同一文件,第一帧时append:false新建文件,后面的append:true追加到文件 + //RecordApp.UniNativeUtsPluginCallAsync("writeFile",{path:"xxx.mp3",append:回调次数!=1, dataBase64:RecordApp.UniBtoa(chunkBytes.buffer)}).then(...).catch(...) + } + ,takeoffEncodeChunk_renderjs:true?null:`function(chunkBytes){ + //App中这里可以做一些仅在renderjs中才生效的事情,不提供也行,this是renderjs模块的this(也可以用This变量) + }` + + ,start_renderjs:`function(){ + //App中可以放一个函数,在Start成功时renderjs中会先调用这里的代码,this是renderjs模块的this(也可以用This变量) + //放一些仅在renderjs中才生效的事情,比如初始化,不提供也行 + }` + ,stop_renderjs:`function(arrayBuffer,duration,mime){ + //App中可以放一个函数,在Stop成功时renderjs中会先调用这里的代码,this是renderjs模块的this(也可以用This变量) + //放一些仅在renderjs中才生效的事情,不提供也行 + }` + }; + + RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView + RecordApp.Start(set,()=>{ + console.log("已开始录音"); + //【稳如老狗WDT】可选的,监控是否在正常录音有onProcess回调,如果长时间没有回调就代表录音不正常 + //var wdt=this.watchDogTimer=setInterval ... 请参考示例Demo的main_recTest.vue中的watchDogTimer实现 + + //创建音频可视化图形绘制,App环境下是在renderjs中绘制,H5、小程序等是在逻辑层中绘制,因此需要提供两段相同的代码 + //view里面放一个canvas,canvas需要指定宽高(下面style里指定了300*100) + // + RecordApp.UniFindCanvas(this,[".recwave-WaveView"],` + this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100}); + `,(canvas1)=>{ + this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100}); + }); + },(msg)=>{ + console.error("开始录音失败:"+msg); + }); + } + + //暂停录音 + ,recPause(){ + if(RecordApp.GetCurrentRecOrNull()){ + RecordApp.Pause(); + console.log("已暂停"); + } + } + //继续录音 + ,recResume(){ + if(RecordApp.GetCurrentRecOrNull()){ + RecordApp.Resume(); + console.log("继续录音中..."); + } + } + + //停止录音 + ,recStop(){ + //RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ close:true }) //关闭Android App后台录音保活服务 + + RecordApp.Stop((arrayBuffer,duration,mime)=>{ + //全平台通用:arrayBuffer是音频文件二进制数据,可以保存成文件或者发送给服务器 + //App中如果在Start参数中提供了stop_renderjs,renderjs中的函数会比这个函数先执行 + + //注意:当Start时提供了takeoffEncodeChunk后,你需要自行实时保存录音文件数据,因此Stop时返回的arrayBuffer的长度将为0字节 + + //如果是H5环境,也可以直接构造成Blob/File文件对象,和Recorder使用一致 + // #ifdef H5 + var blob=new Blob([arrayBuffer],{type:mime}); + console.log(blob, (window.URL||webkitURL).createObjectURL(blob)); + var file=new File([arrayBuffer],"recorder.mp3"); + //uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue + // #endif + + //如果是App、小程序环境,可以直接保存到本地文件,然后调用相关网络接口上传 + // #ifdef APP || MP-WEIXIN + RecordApp.UniSaveLocalFile("recorder.mp3",arrayBuffer,(savePath)=>{ + console.log(savePath); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`,小程序为 `wx.env.USER_DATA_PATH` 路径 + //uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vue + },(errMsg)=>{ console.error(errMsg) }); + // #endif + },(msg)=>{ + console.error("结束录音失败:"+msg); + }); + } + +} +} +``` + + + + + + +*⠀* + +*⠀* + +*⠀* + +*⠀* + +# 部分原理和需要注意的细节 +## 编译成H5时录音和权限 +编译成H5时,录音功能由Recorder H5提供,无需额外处理录音权限。 + + +*⠀* + +## 编译成微信小程序时录音和权限 +编译成微信小程序时,录音功能由小程序的`RecorderManager`提供,屏蔽了微信原有的底层细节(无录音时长限制)。 + +小程序录音需要用户授予录音权限,调用`RecordApp.RequestPermission`的时候会检查是否能正常录音,如果用户拒绝了录音权限,会进入错误回调,回调里面你应当编写代码检查`wx.getSetting`中的`scope.record`录音权限,然后引导用户进行授权(可调用`wx.openSetting`打开设置页面,方便用户给权限)。 + +更多细节请参考 [miniProgram-wx](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample/miniProgram-wx) 测试项目文档。 + + +*⠀* + +## 编译成App时录音和权限 +编译成App录音时,分两种情况: +1. 默认未配置`RecordApp.UniNativeUtsPlugin`(未使用原生录音插件和uts插件)时,会在renderjs中使用Recorder H5进行录音,录音数据会实时回传到逻辑层。 +2. 配置了`RecordApp.UniNativeUtsPlugin`使用原生录音插件或uts插件时,会直接调用原生插件进行录音;录音数据默认会传递到renderjs中进行音频编码处理(WebWorker加速),然后再实时回传到逻辑层,如果配置了`RecordApp.UniWithoutAppRenderjs=true`时,音频编码处理将会在逻辑层中直接处理。 + +当App是在renderjs中使用H5进行录音时(未使用原生录音插件和uts插件),iOS上只支持14.3以上版本,**且iOS上每次进入页面后第一次请求录音权限时、或长时间无操作再请求录音权限时WebView均会弹出录音权限对话框**,不同旧iOS版本(低于iOS17)下H5录音可能存在的问题在App中同样会存在;使用配套的[原生录音插件](https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin)或uts插件时无以上问题和版本限制(uts插件开发中暂不可用),Android也无以上问题。 + +当音频编码是在renderjs中进行处理时,录音结束后会将整个录音文件传回逻辑层,由于uni-app的逻辑层和renderjs层大点的文件传输会比较慢,**建议Start时使用takeoffEncodeChunk实时获取音频文件数据可避免Stop时产生超大数据回传**;配置了`RecordApp.UniWithoutAppRenderjs=true`后,因为音频编码直接是在逻辑层中进行,将不存在传输性能损耗,但会影响逻辑层的性能(正常情况轻微不明显),需要配套使用原生录音插件才可以进行此项配置。 + +在调用`RecordApp.RequestPermission`的时候,`Recorder-UniCore`组件会自动处理好App的系统录音权限,只需要在uni-app项目的 `manifest.json` 中配置好Android和iOS的录音权限声明。 +``` +//Android需要勾选的权限,第二个也必须勾选 + + +【注意】Android如果需要在后台录音,需要启用后台录音保活服务,Android 9开始,锁屏或进入后台一段时间后App可能会被禁止访问麦克风导致录音静音、无法录音(renderjs中H5录音、原生插件录音均受影响),请调用配套原生插件的`androidNotifyService`接口,或使用第三方保活插件 + +//iOS需要声明的权限 +NSMicrophoneUsageDescription +【注意】iOS需要在 `App常用其它设置`->`后台运行能力`中提供`audio`配置,不然App切到后台后立马会停止录音 +``` + + +*⠀* + +## 语音通话、回声消除、声音外放 +在App、H5中,使用[BufferStreamPlayer](https://gitee.com/xiangyuecn/Recorder/tree/master/src/extensions/buffer_stream.player.js)可以实时播放语音;其中App中需要在renderjs中加载BufferStreamPlayer,在逻辑层中调用`RecordApp.UniWebViewVueCall`等方法将逻辑层中接收到的实时语音数据发送到renderjs中播放;播放声音的同时进行录音,声音可能会被录进去产生回声,因此一般需要打开回声消除。 + +微信小程序请参考 [miniProgram-wx](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample/miniProgram-wx) 文档里面的同名章节,使用WebAudioContext播放。 + +配置audioTrackSet可尝试打开回声消除,或者切换听筒播放或外放,打开回声消除时,一般会转为听筒播放显著降低回声。 +``` js +//打开回声消除 +RecordApp.Start({ + ... 更多配置参数请参考RecordApp文档 + //此配置App、H5、小程序均可打开回声消除;注意:H5、App+renderjs中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效 + ,audioTrackSet:{echoCancellation:true,noiseSuppression:true,autoGainControl:true} + + //Android指定麦克风源(App搭配原生插件、小程序可用),0 DEFAULT 默认音频源,1 MIC 主麦克风,5 CAMCORDER 相机方向的麦,6 VOICE_RECOGNITION 语音识别,7 VOICE_COMMUNICATION 语音通信(带回声消除) + ,android_audioSource:7 //提供此配置时优先级比audioTrackSet更高,默认值为0 + + //iOS的AVAudioSession setCategory的withOptions参数值(App搭配原生插件可用),取值请参考配套原生插件文档中的iosSetDefault_categoryOptions + //,ios_categoryOptions:0x1|0x4 //默认值为5(0x1|0x4) +}); + +//App搭配原生插件时尝试切换听筒播放或外放 +await RecordApp.UniNativeUtsPluginCallAsync("setSpeakerOff",{off:true或false}); +//小程序尝试切换 +wx.setInnerAudioOption({ speakerOn:false或true }) +//H5不支持切换 +``` + + + + +*⠀* + +*⠀* + +*⠀* + +# 详细文档、RecordApp方法、属性文档 +请先阅读 [demo_UniApp文档](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp),含Demo项目;更高级使用还需深入阅读 [Recorder文档](https://gitee.com/xiangyuecn/Recorder)、[RecordApp文档](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample) (均为完整的一个README.md文档),Recorder文档中包含了更丰富的示例代码:基础录音、实时处理、格式转码、音频分析、音频混音、音频生成 等等,大部分能在uniapp中直接使用。 + + + + +*⠀* + +*⠀* + +*⠀* + +# 本组件的授权许可限制 +**本组件内的app-uni-support.js文件在uni-app中编译到App平台时仅供测试用(App平台包括:Android App、iOS App),不可用于正式发布或商用,正式发布或商用需先到DCloud插件市场购买[此带授权的插件](https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin-Android)(费用为¥199元,赠送Android版原生插件),即可获得授权许可**;编译到其他平台时无此授权限制,比如:H5、小程序,均为免费授权。 + +在App中,如果未获得授权许可,将会在App打开后第一次调用`RecordApp.RequestPermission`请求录音权限时,弹出“未获得商用授权时,App上仅供测试”提示框。 + +在DCloud插件市场购买了[带授权的插件](https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin-Android)获得了授权后,请在调用`RecordApp.RequestPermission`请求录音权限前,赋值`RecordApp.UniAppUseLicense="我已获得UniAppID=***的商用授权"`(星号为你项目的uni-app应用标识),就不会弹提示框了;或者直接使用配套的[原生录音插件](https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin),设置`RecordApp.UniNativeUtsPlugin`参数后,也不会弹提示框;其他情况请联系作者咨询,更多细节请参考[本组件的GitHub文档](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp)。 + +获取授权、需要技术支持、或有不清楚的地方可以联系我们,客服联系方式:QQ 1251654593 ,或者直接联系作者QQ 753610399 (回复可能没有客服及时)。 + +插件开发维护不易,感谢支持~ + + +*⠀* + +*⠀* + +