实现语音和视频支持

发送语音实现思路

打开允许录音的权限

24、实现语音和视频支持 - 图1

然后把获取的录音上传到服务器,返回个公网可以访问路径

一、 采集语音

  1. navigator.mediaDevices.getUserMedia(
  2. {audio: true, video: true}
  3. ).then(successfunc).catch(errfunc);
  4. navigator.mediaDevices.getUserMedia(
  5. {audio: true, video: false}
  6. ).then(function(stream) {
  7. //请求成功
  8. this.recorder = new MediaRecorder(stream);
  9. this.recorder.start();
  10. this.recorder.ondataavailable = (event) => {
  11. uploadblob("attach/upload",event.data,".mp3",res=>{
  12. //获取语音的长度
  13. var duration = Math.ceil((new Date().getTime()-this.duration)/1000);
  14. this.sendaudiomsg(res.data,duration);
  15. })
  16. stream.getTracks().forEach(function (track) {
  17. track.stop();
  18. });
  19. this.showprocess = false
  20. }
  21. }.bind(this)).catch(function(err){
  22. mui.toast(err.msg)
  23. this.showprocess = false
  24. }.bind(this));

二、 上传语音

  1. function uploadblob(uri,blob,filetype,fn){
  2. var xhr = new XMLHttpRequest();
  3. xhr.open("POST","//"+location.host+"/"+uri, true);
  4. // 添加http头,发送信息至服务器时内容编码类型
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
  7. fn.call(this, JSON.parse(xhr.responseText));
  8. }
  9. };
  10. var _data=[];
  11. var formdata = new FormData();
  12. formdata.append("filetype",filetype);
  13. formdata.append("file",blob)
  14. xhr.send(formdata);
  15. }