uni-app IOS端真机调试时，视频播放的同时执行录音，录音结束后未正确还回视频播放焦点，导致视频无声

uni-app IOS端真机调试时，视频播放的同时执行录音，录音结束后未正确还回视频播放焦点，导致视频无声

产品分类

uniapp/App

示例代码

<template>  
  <view class="page-container">  
    <input v-model="videoUrl" />  
    <video class="video" :src="videoUrl" :muted="muted" controls @pause="handlePause" @error="handleError"></video>  
    <view class="record-button" @touchstart="startRecord" @touchend="stopRecord">点击录音</view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      videoUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',  
      recorderManager: null,  
      recordStartTime: 0,  
      muted: false,  
    };  
  },  
  onLoad() {  
    this.recorderManager = uni.getRecorderManager();  
    this.recorderManager.onStop((res) => {  
      console.log('recorder stop', res);  
      const draution = new Date().getTime() - this.recordStartTime;  
      if (draution < 1000) {  
        uni.showToast({ title: '说话时间太短', icon: 'none' });  
      }  
      // 上传录音  
    });  
  },  
  methods: {  
    startRecord() {  
      this.muted = true;  
      this.recordStartTime = new Date().getTime();  
      this.recorderManager.start({  
        sampleRate: 16000,  
        numberOfChannels: 2,  
      });  
    },  
    stopRecord() {  
      this.muted = false;  
      this.recorderManager.stop();  
    },  
    handlePause(e) {  
      console.log('video pause', e);  
    },  
    handleError(e) {  
      console.log('video error', e);  
    },  
  },  
};  
</script>  

<style>  
.page-container {  
  padding: 66px 0;  
}  

.video {  
  width: 100%;  
  height: 300px;  
  background: #000;  
  margin-top: 20px;  
}  

.record-button {  
  margin-top: 20px;  
  padding: 20px;  
  background-color: #f5f5f5;  
  text-align: center;  
}  
</style>

更多关于uni-app IOS端真机调试时，视频播放的同时执行录音，录音结束后未正确还回视频播放焦点，导致视频无声的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了吗？

更多关于uni-app IOS端真机调试时，视频播放的同时执行录音，录音结束后未正确还回视频播放焦点，导致视频无声的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发中，如果在 iOS 端进行真机调试时，遇到视频播放和录音功能同时执行，录音结束后视频播放无声的问题，通常是由于音频会话（Audio Session）的配置不当导致的。iOS 的音频会话管理决定了应用程序如何处理音频的输入和输出，如果配置不正确，可能会导致音频焦点无法正确释放或切换。

解决方案

  1. 正确配置音频会话类别： iOS 提供了多种音频会话类别（Audio Session Categories），不同的类别决定了音频的行为。在同时进行视频播放和录音时，建议使用 AVAudioSessionCategoryPlayAndRecord 类别，它允许同时进行音频播放和录音。

    在 uni-app 中，你可以通过原生插件或直接调用 iOS 原生代码来设置音频会话类别。以下是一个示例：

    // 在需要设置音频会话的地方调用原生方法
plus.ios.import("AVFoundation").AVAudioSession.sharedInstance().setCategoryError("AVAudioSessionCategoryPlayAndRecord");

  2. 处理音频会话的中断： 在录音结束后，你可能需要手动恢复音频会话的激活状态，以确保视频播放能够继续正常发声。可以通过监听音频会话的中断通知来处理这种情况。

    plus.ios.import("AVFoundation").AVAudioSession.sharedInstance().setActive(true);

  3. 确保音频焦点的正确释放： 在录音结束后，确保音频焦点正确释放，以便视频播放能够重新获取焦点。你可以尝试在录音结束后手动暂停并重新播放视频，以触发音频焦点的重新获取。

    // 假设 videoContext 是视频播放器的上下文
videoContext.pause();
videoContext.play();

  4. 使用原生插件： 如果 uni-app 的内置功能无法满足需求，可以考虑使用原生插件来更精细地控制音频会话。你可以编写一个原生插件，专门处理音频会话的配置和焦点管理。

示例代码

以下是一个简单的示例，展示如何在 uni-app 中设置音频会话类别并处理录音结束后的音频焦点问题：

// 设置音频会话类别为 PlayAndRecord
plus.ios.import("AVFoundation").AVAudioSession.sharedInstance().setCategoryError("AVAudioSessionCategoryPlayAndRecord");

// 开始录音
startRecording();

// 录音结束后处理
function onRecordingEnd() {
    // 恢复音频会话的激活状态
    plus.ios.import("AVFoundation").AVAudioSession.sharedInstance().setActive(true);

    // 重新获取视频播放焦点
    videoContext.pause();
    videoContext.play();
}
回到顶部