404 lines
10 KiB
Vue
404 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="text-white text-center" style="margin-top: 200rpx;">
|
|||
|
|
<view class="datt">严重危害生命财产安全 </view>
|
|||
|
|
<view class="datt margin-top-sm">求助专属通道</view>
|
|||
|
|
<view class="margin-top">平台将为您，保留录音证据，实时位置，通知平台联系人</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- <view style="background: #fff;width: 200rpx;text-align: center;margin: 30rpx auto;padding: 20rpx 0;"
|
|||
|
|
@touchstart.stop.prevent="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
|||
|
|
@touchcancel.stop.prevent="voiceCancel">开始录音</view> -->
|
|||
|
|
|
|||
|
|
<view class="text-center" style="margin-top: 120rpx;" @touchstart.stop.prevent="voiceBegin"
|
|||
|
|
@touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
|||
|
|
@touchcancel.stop.prevent="voiceCancel">
|
|||
|
|
<image src="/static/images/index/yuyin.png" style="width: 300rpx;height: 300rpx;pointer-events: none;">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 录音UI效果 -->
|
|||
|
|
<view class="record" :class="recording ? '' : 'hidden'">
|
|||
|
|
<view class="ing" :class="willStop ? 'hidden' : ''">
|
|||
|
|
<view class="icon luyin2"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cancel" :class="willStop ? '' : 'hidden'">
|
|||
|
|
<view class="icon chehui"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 旧版本 -->
|
|||
|
|
<!-- <view class="text-center" style="margin-top:200rpx;" @touchstart.stop.prevent="voiceBegin"
|
|||
|
|
@touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
|||
|
|
@touchcancel.stop.prevent="voiceCancel">
|
|||
|
|
<image src="/static/images/index/sos.png" style="width: 200rpx;height: 200rpx;pointer-events: none;">
|
|||
|
|
</image>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<view class="text-center" style="margin-top:200rpx;" @tap="callPhone">
|
|||
|
|
<image src="/static/images/index/sos.png" style="width: 200rpx;height: 200rpx;pointer-events: none;">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as websocketUtils from 'utils/websocketUtils.js';
|
|||
|
|
var innerAudioContext; //播放
|
|||
|
|
// #ifdef H5
|
|||
|
|
var recorder; // 定义一个MediaRecorder对象
|
|||
|
|
var stream; //定义一个音频流的对象
|
|||
|
|
var chunks = []; // 定义一个用于存储音频数据片段的数组
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
latitude: '',
|
|||
|
|
longitude: '',
|
|||
|
|
content: '',
|
|||
|
|
//录音相关参数
|
|||
|
|
|
|||
|
|
//H5不能录音
|
|||
|
|
RECORDER: uni.getRecorderManager(),
|
|||
|
|
|
|||
|
|
isVoice: false,
|
|||
|
|
voiceTis: '按住 说话',
|
|||
|
|
recordTis: "手指上滑 取消发送",
|
|||
|
|
recording: false,
|
|||
|
|
willStop: false,
|
|||
|
|
initPoint: {
|
|||
|
|
identifier: 0,
|
|||
|
|
Y: 0
|
|||
|
|
},
|
|||
|
|
recordTimer: null,
|
|||
|
|
recordLength: 0,
|
|||
|
|
|
|||
|
|
//播放语音相关参数
|
|||
|
|
AUDIO: uni.createInnerAudioContext(),
|
|||
|
|
playMsgid: null,
|
|||
|
|
VoiceTimer: null,
|
|||
|
|
blobData: '',
|
|||
|
|
voicePaths: '',
|
|||
|
|
voicePath: '',
|
|||
|
|
phoneNumberList: ["0431-81873999", "18143098929"],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad: function (option) {
|
|||
|
|
// #ifndef H5
|
|||
|
|
//录音开始事件
|
|||
|
|
this.RECORDER.onStart((e) => {
|
|||
|
|
this.recordBegin(e);
|
|||
|
|
})
|
|||
|
|
//录音结束事件
|
|||
|
|
this.RECORDER.onStop((e) => {
|
|||
|
|
this.recordEnd(e);
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
let that = this;
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'wgs84',
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log('当前位置的经度：' + res.longitude);
|
|||
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|||
|
|
that.latitude = res.latitude
|
|||
|
|
that.longitude = res.longitude
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onBackPress() {
|
|||
|
|
this.AUDIO.stop();
|
|||
|
|
},
|
|||
|
|
onHide() {
|
|||
|
|
this.AUDIO.stop();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
innerAudioContext = uni.createInnerAudioContext(); //播放
|
|||
|
|
let _this = this;
|
|||
|
|
|
|||
|
|
// #ifndef H5
|
|||
|
|
//录音停止事件
|
|||
|
|
// recorderManager.onStop(function(res) {
|
|||
|
|
// console.log('recorder stop' + res.tempFilePath);
|
|||
|
|
// // _this.recordEnd(res);
|
|||
|
|
// _this.voicePath = res.tempFilePath;
|
|||
|
|
// });
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
innerAudioContext.destroy();
|
|||
|
|
// var recorder; // 定义一个MediaRecorder对象
|
|||
|
|
// chunks = [];
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 紧急求助拨打电话
|
|||
|
|
callPhone() {
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: this.phoneNumberList,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log(this.phoneNumberList[res?.tapIndex]);
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: this.phoneNumberList[res?.tapIndex],
|
|||
|
|
success() { },
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
console.log(res.errMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 切换语音/文字输入
|
|||
|
|
switchVoice() {
|
|||
|
|
this.isVoice = this.isVoice ? false : true;
|
|||
|
|
},
|
|||
|
|
setChatSave() {
|
|||
|
|
let userId = this.$queue.getData('userId');
|
|||
|
|
let userName = this.$queue.getData('userName');
|
|||
|
|
let data = {
|
|||
|
|
image: this.content,
|
|||
|
|
state: 9,
|
|||
|
|
typeId: this.longitude,
|
|||
|
|
typeName: this.latitude,
|
|||
|
|
userId: userId,
|
|||
|
|
userName: userName
|
|||
|
|
}
|
|||
|
|
this.$Request.postJson('/app/message/insertMessage', data).then(
|
|||
|
|
res => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$queue.showToast('上传成功！');
|
|||
|
|
} else {
|
|||
|
|
this.$queue.showToast(res.msg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 录音开始
|
|||
|
|
voiceBegin(e) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
if (stream) {
|
|||
|
|
stream.getTracks().forEach((track) => track.stop())
|
|||
|
|
stream = null
|
|||
|
|
}
|
|||
|
|
if (recorder) {
|
|||
|
|
recorder = null
|
|||
|
|
}
|
|||
|
|
this.recordLength = 0
|
|||
|
|
this.voicePaths = '';
|
|||
|
|
this.voicePath = '';
|
|||
|
|
this.startRecord()
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
if (e.touches.length > 1) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.initPoint.Y = e.touches[0].clientY;
|
|||
|
|
this.initPoint.identifier = e.touches[0].identifier;
|
|||
|
|
// #ifndef H5
|
|||
|
|
this.RECORDER.start({
|
|||
|
|
format: "mp3"
|
|||
|
|
}); //录音开始,
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//开始录音
|
|||
|
|
startRecord: async function () {
|
|||
|
|
|
|||
|
|
let _this = this
|
|||
|
|
// 获取麦克风音频数据流
|
|||
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|||
|
|
audio: true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 初始化MediaRecorder对象
|
|||
|
|
recorder = new MediaRecorder(stream);
|
|||
|
|
console.log('asdsad___' + recorder)
|
|||
|
|
// alert('asdsad___' + recorder)
|
|||
|
|
// 将 stream 转成 blob 来存放
|
|||
|
|
recorder.ondataavailable = (blobEvent) => {
|
|||
|
|
chunks.push(blobEvent.data);
|
|||
|
|
}
|
|||
|
|
// 停止时生成预览的 blob url
|
|||
|
|
recorder.onstop = () => {
|
|||
|
|
const blob = new Blob(chunks, {
|
|||
|
|
type: 'audio/mp3'
|
|||
|
|
})
|
|||
|
|
// const mediaUrl = URL.createObjectURL(blob);
|
|||
|
|
_this.voicePaths = blob;
|
|||
|
|
_this.blobData = blob;
|
|||
|
|
// that.voicePath = mediaUrl;
|
|||
|
|
// const newbold = new File([recordPath]),{type:'audio/mp3'}
|
|||
|
|
// alert(that.voicePaths,URL.createObjectURL(blob))
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
recorder.start();
|
|||
|
|
_this.recordBegin()
|
|||
|
|
},
|
|||
|
|
//录音开始UI效果
|
|||
|
|
recordBegin(e) {
|
|||
|
|
this.recording = true;
|
|||
|
|
this.voiceTis = '松开 结束';
|
|||
|
|
this.recordLength = 0;
|
|||
|
|
this.recordTimer = setInterval(() => {
|
|||
|
|
this.recordLength++;
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
// 录音被打断
|
|||
|
|
voiceCancel() {
|
|||
|
|
this.recording = false;
|
|||
|
|
this.voiceTis = '按住 说话';
|
|||
|
|
this.recordTis = '手指上滑 取消发送'
|
|||
|
|
this.willStop = true; //不发送录音
|
|||
|
|
this.RECORDER.stop(); //录音结束
|
|||
|
|
},
|
|||
|
|
// 录音中(判断是否触发上滑取消发送)
|
|||
|
|
voiceIng(e) {
|
|||
|
|
|
|||
|
|
// // #ifdef H5
|
|||
|
|
// this.startRecord()
|
|||
|
|
// // #endif
|
|||
|
|
|
|||
|
|
if (!this.recording) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let touche = e.touches[0];
|
|||
|
|
//上滑一个导航栏的高度触发上滑取消发送
|
|||
|
|
if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
|
|||
|
|
this.willStop = true;
|
|||
|
|
this.recordTis = '松开手指 取消发送'
|
|||
|
|
} else {
|
|||
|
|
this.willStop = false;
|
|||
|
|
this.recordTis = '手指上滑 取消发送'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 结束录音
|
|||
|
|
voiceEnd(e) {
|
|||
|
|
|
|||
|
|
if (!this.recording) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.recording = false;
|
|||
|
|
this.voiceTis = '按住 说话';
|
|||
|
|
this.recordTis = '手指上滑 取消发送'
|
|||
|
|
|
|||
|
|
//原生录音停止
|
|||
|
|
// #ifdef H5
|
|||
|
|
//停止录音
|
|||
|
|
|
|||
|
|
if (recorder.state != "inactive") {
|
|||
|
|
recorder.stop();
|
|||
|
|
}
|
|||
|
|
//把音频流也停止掉
|
|||
|
|
stream.getTracks().forEach((track) => track.stop())
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.uplodMp3(this.voicePaths);
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
this.RECORDER.stop(); //录音结束
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//录音结束(回调文件)
|
|||
|
|
recordEnd(e) {
|
|||
|
|
clearInterval(this.recordTimer);
|
|||
|
|
if (!this.willStop) {
|
|||
|
|
this.$queue.showLoading('发送中...')
|
|||
|
|
console.log("e: " + JSON.stringify(e));
|
|||
|
|
let msg = {
|
|||
|
|
length: 0,
|
|||
|
|
url: e.tempFilePath
|
|||
|
|
}
|
|||
|
|
let min = parseInt(this.recordLength / 60);
|
|||
|
|
let sec = this.recordLength % 60;
|
|||
|
|
min = min < 10 ? '0' + min : min;
|
|||
|
|
sec = sec < 10 ? '0' + sec : sec;
|
|||
|
|
if (this.recordLength % 60 > 1) {
|
|||
|
|
msg.length = min + ':' + sec;
|
|||
|
|
console.log('msg.length___:' + msg.length)
|
|||
|
|
uni.uploadFile({ // 上传接口
|
|||
|
|
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
|||
|
|
filePath: e.tempFilePath,
|
|||
|
|
name: 'file',
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
this.content = JSON.parse(uploadFileRes.data).data;
|
|||
|
|
console.log("语音：" + this.content)
|
|||
|
|
|
|||
|
|
this.setChatSave();
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$queue.showToast('语音要大于一秒才可以发送！')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('取消发送录音');
|
|||
|
|
}
|
|||
|
|
this.willStop = false;
|
|||
|
|
},
|
|||
|
|
//上传mp3格式的音频
|
|||
|
|
uplodMp3(recordPath) {
|
|||
|
|
let _this = this;
|
|||
|
|
// var newbold = new File([recordPath],{type:'audio/mp3'})
|
|||
|
|
|
|||
|
|
clearInterval(_this.recordTimer);
|
|||
|
|
if (!_this.willStop) {
|
|||
|
|
// that.$queue.showLoading('发送中...')
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '录音上传中...'
|
|||
|
|
})
|
|||
|
|
let msg = {
|
|||
|
|
length: 0,
|
|||
|
|
url: recordPath
|
|||
|
|
}
|
|||
|
|
let min = parseInt(_this.recordLength / 60);
|
|||
|
|
let sec = _this.recordLength % 60;
|
|||
|
|
min = min < 10 ? '0' + min : min;
|
|||
|
|
sec = sec < 10 ? '0' + sec : sec;
|
|||
|
|
if (_this.recordLength % 60 > 1) {
|
|||
|
|
msg.length = min + ':' + sec;
|
|||
|
|
// console.log('msg.length___:' + msg.length)
|
|||
|
|
setTimeout(function () {
|
|||
|
|
uni.uploadFile({ // 上传接口
|
|||
|
|
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
|||
|
|
file: _this.blobData,
|
|||
|
|
// file: recordPath,
|
|||
|
|
name: 'file',
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
console.error('uploadFileRes------' + uploadFileRes)
|
|||
|
|
uni.hideLoading();
|
|||
|
|
_this.content = JSON.parse(uploadFileRes.data).data;
|
|||
|
|
// console.log("语音：" + that.content)
|
|||
|
|
_this.setChatSave();
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, 1000)
|
|||
|
|
} else {
|
|||
|
|
_this.$queue.showToast('语音要大于一秒才可以发送！')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('取消发送录音');
|
|||
|
|
}
|
|||
|
|
_this.willStop = false;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import "./css/style.scss";
|
|||
|
|
|
|||
|
|
page {
|
|||
|
|
background: linear-gradient(to right, #223845, #00a85b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.datt {
|
|||
|
|
font-size: 42rpx;
|
|||
|
|
font-family: PingFang SC;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
</style>
|