JavaScript 中怎么用 AbortController 取消音视频流加载-js教程-PHP中文网

abortcontroller不能直接取消mediastream播放或采集，但可取消媒体资源网络加载、fetch请求、getusermedia权限请求及通过track.stop()终止音视频轨道。

javascript 中怎么用 abortcontroller 取消音视频流加载

在 JavaScript 中，AbortController 本身不能直接取消音视频流（如 MediaStream）的播放或采集，但它可以有效取消 音视频资源的网络加载过程，比如 <video></video> 或 <audio></audio> 元素调用 load()、play()（触发自动预加载时），或通过 fetch() 加载媒体文件（如 MP4、WebM）再用 URL.createObjectURL() 播放的场景。

取消

当设置 video.src 或 audio.src 后浏览器开始加载，此时无法用原生 API 中断 HTTP 请求 —— 但可通过 切换为 fetch + Blob + objectURL 方式，把加载控制权交给 JS，从而支持中止：

创建 AbortController 实例，获取 signal
用 fetch(url, { signal }) 请求媒体文件（需服务端支持 CORS）
将响应转为 Blob，生成临时 URL：URL.createObjectURL(blob)
赋值给 video.src 并调用 video.load()
调用 controller.abort() 即可中断 fetch，后续 createObjectURL 不会生效，且已生成的 URL 可手动回收

示例：

const controller = new AbortController();
const { signal } = controller;

fetch('video.mp4', { signal })
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    video.src = url;
    video.load(); // 触发加载
  })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('加载已取消');
    }
  });

// 任意时机取消（例如用户点击“停止加载”）
controller.abort();

取消 MediaRecorder 录制或 getUserMedia 流采集

MediaRecorder 和 navigator.mediaDevices.getUserMedia() 均支持 AbortSignal（部分浏览器已支持，注意兼容性）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

MediaRecorder.start() 本身不接受 signal，但可通过 stop() 主动终止录制
getUserMedia() 在 Chrome 117+、Firefox 119+ 支持传入 { signal } 选项，调用 abort() 会拒绝 Promise 并清理权限请求（如用户尚未授权，可立即中止弹窗）
更通用的做法：拿到 MediaStream 后，遍历其 getTracks()，对每个 MediaStreamTrack 调用 track.stop()，彻底释放摄像头/麦克风

示例（安全兼容写法）：

let stream;
const controller = new AbortController();

async function startCamera() {
  try {
    stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    // 绑定到 video 元素
    video.srcObject = stream;

    // 监听 abort，主动停止轨道
    controller.signal.addEventListener('abort', () => {
      stream.getTracks().forEach(track => track.stop());
      console.log('媒体流已停止');
    });
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('权限请求被取消');
    }
  }
}

// 取消采集
controller.abort();