ReactJS中如何从视频文件提取经纬度（GPS）信息

可用的前端库推荐 #

替代仅支持图片的EXIF-JS，你可以使用exifr——这是一个支持图片和视频（包括MP4、MOV）元数据读取的轻量库，能直接提取GPS信息。

集成步骤 #

• 安装依赖：

npm install exifr
# 或
yarn add exifr

• 修改你的onUploadVideo函数，加入GPS提取逻辑：

import exifr from 'exifr';

onUploadVideo = async (e) => {
    let file = e.target.files[0];
    window.URL = window.URL || window.webkitURL;
    const video = document.createElement('video');
    video.preload = 'metadata';

    // 提取视频GPS信息
    let gpsData = null;
    try {
        gpsData = await exifr.gps(file);
        // 若GPS数据存在，可在这里处理（比如存储到状态或上传时携带）
        console.log('视频GPS信息:', gpsData);
    } catch (err) {
        console.error('提取GPS失败:', err);
        // 无GPS数据时的 fallback 逻辑
    }

    const videoDuration = await new Promise(resolve => {
      video.onloadedmetadata = function () {
        window.URL.revokeObjectURL(video.src);
        resolve(video.duration);
      }
      video.src = URL.createObjectURL(file);
    });
    if (videoDuration >= ALLOW_VIDEO_DURATION) {
      this.props.actions.showToast(true, { toastType: ERROR, toastInfo: MESSAGE_ERROR_OVER_ALLOW_VIDEO_DURATION_UPLOAD.replace("%s", file.name) });
      return;
    }

    this.isUploadImg = true;
    this.setState({
      isUploadding: true
    })
    let data = new FormData();
    data.append('photo', file);
    // 若需要上传GPS数据，可添加到FormData中
    if (gpsData) {
        data.append('gpsLatitude', gpsData.latitude);
        data.append('gpsLongitude', gpsData.longitude);
    }

    this.props.actions.userFilePostActions(Actions.ActionTypes.UPLOAD_ADVENTURE_VIDEO(this.generateFileName('mp4')), data, getAccessToken(this.props.state.login_data));
  }

关键说明 #

• exifr.gps() 方法会直接返回包含latitude、longitude等字段的GPS对象，无需手动解析复杂元数据。
• 如果视频文件本身不包含GPS元数据，gpsData会返回null，需提前做好异常处理。
• 该库完全在前端运行，无需后端参与，适配你的React项目需求。

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