使用Facebook Graph API+Angular上传视频超时问题求助

问题场景 #

尝试通过Facebook Graph API、Angular结合facebook-js-sdk从本地电脑上传视频至广告账户素材库，使用以下初始化及创建视频的代码操作时，遇到OAuthException错误：

• 错误码：390
• 子错误码：1363030
• 错误提示：视频上传超时，因网络缓慢或视频过大导致

初始化Facebook代码 #

initFacebook() {
  FB.init({
    appId: 'appId',
    xfbml: true,
    cookie: true,
    version: 'v16.0'
  });

  FB.getLoginStatus((response) => {
    if (response.status === 'connected') {
      this.storeLoggedUser();
    } else {
      console.error('Couldn\'t authenticate to Facebook');
    }
  });
}

创建视频代码 #

createVideo(videoFile: File): Observable<any> {
  return new Observable((observer) => {
    const videoData = new FormData();
    videoData.append("source", videoFile);
    videoData.append("title", "test title");

    FB.api(`/act_${this.accountId}/advideos?fields=id,name`, "post", videoData, (response: any) => {
      observer.next(response);
      observer.complete();
    });
  });
}

错误信息详情 #

{
    "message": "There was a problem uploading your video file. Please try again.",
    "type": "OAuthException",
    "code": 390,
    "error_subcode": 1363030,
    "is_transient": true,
    "error_user_title": "Video Upload Time Out",
    "error_user_msg": "Your video upload timed out before it could be completed. This is probably because of a slow network connection or because the video you're trying to upload is too large. Please try again.",
    "fbtrace_id": "AI6AbowqTGtMs6ZxlwWUyfE"
}

解决方案 #

1. 改用分段上传（Resumable Upload） #

直接通过FormData上传大视频极易触发超时，Facebook官方推荐使用分段上传流程，步骤如下：

• 创建上传会话，获取会话ID和上传地址
• 将视频分割为固定大小的块（建议5MB），依次上传每个块
• 所有块上传完成后，结束会话触发视频处理

示例代码（适配Angular）：

createResumableVideo(videoFile: File): Observable<any> {
  return new Observable((observer) => {
    // 第一步：初始化上传会话
    FB.api(`/act_${this.accountId}/advideos`, 'post', {
      upload_phase: 'start',
      file_size: videoFile.size,
      title: "test title"
    }, (startResponse) => {
      if (startResponse.error) {
        observer.error(startResponse.error);
        return;
      }
      const uploadSessionId = startResponse.id;
      const uploadUrl = startResponse.upload_url;

      // 第二步：分段上传视频块
      const chunkSize = 5 * 1024 * 1024; // 5MB每块
      let offset = 0;

      const uploadChunk = () => {
        const end = Math.min(offset + chunkSize, videoFile.size);
        const chunk = videoFile.slice(offset, end);
        const formData = new FormData();
        formData.append('video_file_chunk', chunk);

        // 使用Angular HttpClient上传块（FB.api对二进制块支持有限）
        this.http.post(uploadUrl, formData, {
          headers: {
            'Content-Range': `bytes ${offset}-${end-1}/${videoFile.size}`
          }
        }).subscribe({
          next: () => {
            offset = end;
            if (offset >= videoFile.size) {
              // 第三步：结束上传会话
              FB.api(`/${uploadSessionId}`, 'post', {
                upload_phase: 'finish'
              }, (finishResponse) => {
                finishResponse.error ? observer.error(finishResponse.error) : observer.next(finishResponse);
                observer.complete();
              });
            } else {
              uploadChunk();
            }
          },
          error: (err) => {
            observer.error(err);
            observer.complete();
          }
        });
      };

      uploadChunk();
    });
  });
}

2. 优化上传基础条件 #

• 网络环境：确保上传时网络稳定，关闭占用带宽的后台任务
• 视频压缩：对过大的视频进行压缩（降低分辨率、码率或帧率），减少上传体积

3. 验证权限与API版本 #

• 确认当前用户已获得ads_management、business_management权限，且应用通过Facebook审核
• 升级API版本至最新稳定版（如v18.0），旧版本可能存在上传兼容性问题

4. 本地开发配置检查 #

• 在Facebook应用后台的OAuth设置中，添加本地服务地址到有效跳转域（如http://localhost:4200）
• 优先使用HTTPS协议上传，部分浏览器对HTTP的大文件上传有更严格的限制

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