React Native集成AXIS M1014外接摄像头实现拍照功能方案咨询

方案一：直接调用AXIS摄像头的HTTP快照API（推荐，比RTSP更轻量） #

AXIS M1014支持官方VAPIX API，无需处理RTSP流就能直接获取摄像头快照，步骤如下：

• 确保摄像头和设备处于同一局域网，在摄像头Web管理界面（默认IP通常为192.168.0.90）配置好网络与登录账号密码
• 构造HTTP请求URL：http://[摄像头IP]/axis-cgi/jpg/image.cgi，需认证时可将账号密码拼入URL：http://[用户名]:[密码]@[摄像头IP]/axis-cgi/jpg/image.cgi，也可在请求头中添加Basic Auth
• 在React Native中使用fetch或axios发送GET请求，将返回的二进制图片数据转为base64格式，即可在<Image>组件中显示，或调用RN文件系统API保存到本地
• 示例代码片段：

  const takeSnapshot = async () => {
    const cameraUrl = 'http://admin:password@192.168.0.90/axis-cgi/jpg/image.cgi';
    try {
      const response = await fetch(cameraUrl);
      const blob = await response.blob();
      const base64 = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => resolve(reader.result);
      });
      setImageSource(base64); // 将base64存入state用于显示，或执行保存逻辑
    } catch (error) {
      console.error('获取快照失败:', error);
    }
  };
  

方案二：通过RTSP流截取帧实现拍照 #

若必须使用RTSP协议，需先解码RTSP流再截取帧，可通过以下方式实现：

安卓原生模块扩展 #

• 安卓端使用ExoPlayer的RTSP扩展库（com.google.android.exoplayer:exoplayer-rtsp）播放RTSP流
• 自定义原生模块，监听ExoPlayer的帧回调，将获取到的帧转为Bitmap，再传递给React Native层（转为base64或文件路径）
• 在React Native中调用原生模块的拍照方法，获取处理后的图片数据

使用第三方RN库 #

• 集成react-native-rtsp-player这类支持RTSP播放的库，在此基础上扩展截取帧功能：
  1. 先配置并播放RTSP流（AXIS M1014的RTSP地址通常为rtsp://[用户名]:[密码]@[摄像头IP]/axis-media/media.amp?videocodec=h264）
  2. 通过原生层回调获取当前播放帧，转为图片格式后返回给RN
• 注意：部分第三方库需额外配置安卓依赖，需注意ExoPlayer版本兼容性

通用注意事项 #

• 确保设备与摄像头在同一局域网内，若需公网访问需配置端口映射等网络设置
• 处理摄像头认证：AXIS设备默认启用基本认证，需在请求中携带正确账号密码，避免401错误
• 安卓端需在AndroidManifest.xml中添加INTERNET权限，RN端无需额外配置网络权限（已默认包含）
• 测试时先通过浏览器或VLC播放器验证HTTP快照URL和RTSP地址是否可用，排除摄像头本身配置问题

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