Chromium浏览器中JavaScript处理非标准HTTP响应获取IP摄像头音频流

一、用XMLHttpRequest替代fetch #

Chromium的fetch API对HTTP响应格式校验更严格，而XMLHttpRequest对非标准响应的兼容性更好。可以用以下代码获取二进制音频流：

const xhr = new XMLHttpRequest();
xhr.open('GET', URL, true);
xhr.responseType = 'arraybuffer'; // 针对二进制流设置类型

xhr.onload = function() {
  if (xhr.status === 200 || xhr.status === 0) { // 无HTTP头时状态可能返回0
    const audioBuffer = xhr.response;
    // 处理音频数据，比如解码播放
  }
};

xhr.onerror = function() {
  console.error('请求音频流失败');
};

xhr.send();

二、通过后端代理转发请求 #

如果前端直接请求受限于浏览器的安全校验，可以搭建简单后端服务，由后端请求IP摄像头的音频流，再将数据封装成标准HTTP响应返回给前端。

以Node.js + Express为例：

const express = require('express');
const http = require('http');
const app = express();

app.get('/audio-proxy', (req, res) => {
  const cameraUrl = '你的IP摄像头音频流地址';
  http.get(cameraUrl, (cameraRes) => {
    // 转发摄像头二进制数据，同时添加标准HTTP头
    res.setHeader('Content-Type', 'audio/mpeg'); // 根据实际音频格式调整
    cameraRes.pipe(res);
  }).on('error', (err) => {
    res.status(500).send('代理请求失败');
  });
});

app.listen(3000, () => {
  console.log('代理服务运行在端口3000');
});

前端直接请求http://localhost:3000/audio-proxy即可，此时后端返回的响应带有标准HTTP头，Chromium系浏览器的fetch能正常处理。

三、检查IP摄像头配置选项 #

部分IP摄像头支持配置输出带标准HTTP头的音频流，比如切换流媒体协议（如HTTP-FLV、HLS），或者开启响应头自动添加功能。查看摄像头管理后台，确认是否有相关设置，若能配置成标准响应，可直接用fetch正常请求。

内容的提问来源于stack exchange，提问作者alexeynl