小程式的相機使用和音訊播放
阿新 • • 發佈:2018-11-05
攝像頭前後切換問題 和蒙層問題,前或後,分2個page寫
音訊自動播放和退出不停止問題,看boaudio,定義一個const變數,方法裡要實現停止、播放、暫停等方法.
<view class="pt" > <camera device-position="{{position}}" flash="off" > <cover-image wx:if="{{!ishide}}" src='/static/images/111.jpg' style='opacity:0.3'></cover-image> <cover-image wx:if="{{ishide}}" src='{{imagePaths}}' ></cover-image> </camera> </view> <view class="xia"> <view class="z"><image bindtap='takePhoto' style="margin-left:{{ishide?'9999rpx':''}}" src="/static/images/pt_ico.png"/></view> <view class="y"><image bindtap='fanzhuan' style="margin-left:{{ishide?'9999rpx':''}}" src="/static/images/fanzhuan.jpg"/></view> </view>
const util = require('../../utils/util.js'); const api = require('../../config/api.js'); const user = require('../../services/user.js'); const innerAudioContext = wx.createInnerAudioContext(); Page({ /** * 頁面的初始資料 */ data: { width: 0, height: 0, src: "", ishide:false, isfanzhuan: false, position: 'back', imagePaths: '', audio: '', audoSrc: '/static/1.mp3' }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var that = this; that.boaudio(); }, onUnload: function () { console.log('退出'); this.data.audio.stop(); }, boaudio: function () { this.innerAudioContext = wx.createInnerAudioContext(); this.setData({ audio: innerAudioContext }) // this.data.audio.autoplay = true; this.data.audio.src = this.data.audoSrc; this.data.audio.onPlay(function () { console.log('播放'); }) this.data.audio.onStop(function () { console.log('停止'); }) this.data.audio.onError((res) => { console.log(res.errMsg) console.log(res.errCode) }) this.data.audio.play(); }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { }, onShow: function () { let that =this; that.setData({ ishide: false, imagePaths: '' }) }, onReady:function(){ let that=this; }, /** * 拍照 */ takePhoto: function() { var that = this that.setData({ ishide: true }); const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { //res.tempImagePath, console.log(res); that.setData({ imagePaths: res.tempImagePath }) wx.showLoading({ title: '正在識別中', mask: true }); that.upload(res); }, bindstop:(e)=>{ console.log(e); } }) }, upload: function (res) { var that = this; const uploadTask = wx.uploadFile({ url: api.StorageUpload, header: { "content-type": "multipart/form-data" }, method: 'POST', filePath: res.tempImagePath, name: 'file', success: function (res) { console.log("上傳圖片伺服器返回資料" + res); console.log(res); var _res = JSON.parse(res.data); if (_res.errno === 0) { var url = _res.data.url that.facialEvaluateInfo(url, _res.data.id); } else { that.showerror(); } }, fail: function (e) { wx.showModal({ title: '錯誤', content: '圖片上傳失敗', showCancel: false }) } }) }, facialEvaluateInfo: function (url, imgId) { let that = this; let userId = -1;//朋友 // if (that.data.ismyself == 'friend') { // userId = -1; // } util.request(api.FacialEvaluate, { imageAddress: url, imgId: imgId, userId: userId }).then(function (res) { console.log("服務端返回人臉識別資料" + res); console.log(res); if (res.errno === 0) { wx.showToast({ title: '檢測成功', icon: 'succes', duration: 1000, mask: true }) that.navigateToPage(res.data.faceFourdataId); } else { that.showerror(); } }); }, navigateToPage: function (faceFourdataId) { console.log('進入facialEvaluate?faceFourdataId=' + faceFourdataId); wx.hideLoading(); wx.navigateTo({ url: '../facialEvaluate/facialEvaluate?faceFourdataId=' + faceFourdataId + '&userId=' + wx.getStorageSync('userId'), }) }, showerror: function () { wx.hideLoading(); let that = this; wx.showModal({ title: '提示', content: '照片檢測失敗,是否重新拍照', success: function (res) { console.log(res) if (res.confirm) { console.log('使用者點選了確定') that.setData({ ishide: false, imagePaths:'' }); } else { console.log('使用者點選了取消') wx.navigateBack(); } } }) }, fanzhuan: function () { let that = this; let isfanzhuan = !that.data.isfanzhuan; if (isfanzhuan) { that.setData({ isfanzhuan: isfanzhuan, position: 'front' }) } else { that.setData({ isfanzhuan: isfanzhuan, position: 'back' }) } } })