如何使用JavaScript或React.js提取视频位置元数据及经纬度？

要提取视频里的GPS位置信息（纬度、经度），前端可以借助File API读取本地视频文件，再用专门的元数据解析库实现。以下是两种实用方案：

方案一：用exifr快速解析（支持多格式） #

exifr是个轻量库，既能处理图片EXIF，也能解析视频里的GPS元数据，React项目里直接用就行。

步骤： #

1. 安装依赖：

npm install exifr

2. 代码实现（React组件示例）：

import exifr from 'exifr';

// 提取GPS的异步函数
async function getVideoGPS(file) {
  try {
    const gps = await exifr.gps(file);
    if (gps) {
      return {
        latitude: gps.latitude,
        longitude: gps.longitude
      };
    }
    return null; // 无GPS数据
  } catch (err) {
    console.error('解析失败:', err);
    return null;
  }
}

// React组件
function VideoGPSExtractor() {
  const handleFileSelect = async (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile || !selectedFile.type.startsWith('video/')) return;

    const gpsData = await getVideoGPS(selectedFile);
    if (gpsData) {
      console.log('提取到的位置:', gpsData);
      // 这里可以把数据渲染到页面或者做其他处理
    } else {
      alert('这个视频没有包含GPS位置信息');
    }
  };

  return (
    <div>
      <input type="file" accept="video/*" onChange={handleFileSelect} />
    </div>
  );
}

export default VideoGPSExtractor;

方案二：用mp4box.js解析MP4底层元数据 #

如果是MP4格式的视频，mp4box.js可以直接解析文件的原子结构，适合需要更底层控制的场景。

步骤： #

1. 安装依赖：

npm install mp4box

2. 代码实现：

import MP4Box from 'mp4box';

// 解析MP4视频的GPS数据
function extractMP4GPS(file) {
  return new Promise((resolve, reject) => {
    const mp4File = MP4Box.createFile();

    mp4File.onReady((info) => {
      // 遍历所有轨道，查找GPS相关元数据
      for (const track of info.tracks) {
        if (track.type === 'meta' || track.name === 'GPS') {
          // 获取第一个样本数据（GPS信息通常存在第一个样本里）
          mp4File.getSample(track.id, 0, (sample) => {
            if (sample?.data) {
              // 这里的解析逻辑需要根据实际数据格式调整，不同设备可能有差异
              const dataView = new DataView(sample.data);
              // 假设前8字节是纬度（双精度浮点数），接下来8字节是经度
              const lat = dataView.getFloat64(0, true);
              const lng = dataView.getFloat64(8, true);
              resolve({ latitude: lat, longitude: lng });
            } else {
              resolve(null);
            }
          });
          return;
        }
      }
      resolve(null); // 未找到GPS轨道
    });

    mp4File.onError(reject);

    // 分块读取文件并传入mp4box
    const reader = new FileReader();
    reader.onload = (e) => {
      mp4File.appendBuffer(e.target.result);
      mp4File.flush();
    };
    reader.readAsArrayBuffer(file);
  });
}

// React组件里的使用方式和方案一类似，调用extractMP4GPS即可

关键注意点 #

• 浏览器限制：只能读取用户上传的本地视频，或者通过CORS请求获取的视频文件（需转为ArrayBuffer），不能直接读取跨域的远程视频元数据。
• 格式支持：上述库对MP4、MOV等主流格式支持较好，小众视频格式可能无法解析。
• 设备差异：部分拍摄设备不会写入GPS信息，或者写入的格式有差异，要做好异常处理和空值判断。

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