1. 程式人生 > >小程式的相機使用和音訊播放

小程式的相機使用和音訊播放

攝像頭前後切換問題 和蒙層問題,前或後,分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'
          })
      }
  }

})