javascript - Youtube API, Javascript - 上传视频

Question

我需要使用 Javascript 从我的 Web 应用程序将视频上​​传到 youtube。我尝试过两种方式：使用他们的官方 API 和使用 CORS。他们都没有工作。

解决方案 1：使用他们的 API

uploadVideo(infos: any, file: File) {
  const params: any = {
    part: 'id,snippet,status',
    media: {
      body: null
    },
    resource: {
      snippet: {
        title: infos.title
      },
      status: {}
    },
    fileSize: file.size
  };
  const fileReader = new FileReader();
  const optSnippetParams = ['description', 'categoryId', 'defaultLanguage'];
  const optStatusParams = ['publishAt', 'privacyStatus', 'license', 'publicStatsViewable'];

  for (const i of optSnippetParams) {
    if (infos[i]) {
      params.resource.snippet[i] = infos[i];
    }
  }

  for (const i of optStatusParams) {
    if (infos[i]) {
      params.resource.status[i] = infos[i];
    }
  }

  if (infos.tags) {
    params.resource.snippet.tags = infos.tags;
  }

  fileReader.onloadend = (e: ProgressEvent) => {
    params.media.body = fileReader.result;

    gapi.client.youtube.videos.insert(params).then((res: any) => {
      console.log(res);
    });
  };

  fileReader.readAsArrayBuffer(file);
}

此解决方案不起作用，我有以下错误：

{
  "domain": "youtube.video",
  "location": "body",
  "locationType": "other",
  "message": "The request does not include the video content.",
  "reason": "mediaBodyRequired"
}

视频内容实际设置在请求正文中的位置。

解决方案 2：使用 CORS（我从这个文件和这个文件中包含的示例中启发了自己）

uploadVideo(token: string, infos: any, file: File) {
  const body: any = {
    snippet: {
      title: infos.title
    },
    status: {}
  };
  const optSnippetParams = ['description', 'categoryId', 'defaultLanguage'];
  const optStatusParams = ['publishAt', 'privacyStatus', 'license', 'publicStatsViewable'];

  for (const i of optSnippetParams) {
    if (infos[i]) {
      body.snippet[i] = infos[i];
    }
  }

  for (const i of optStatusParams) {
    if (infos[i]) {
      body.status[i] = infos[i];
    }
  }

  if (infos.tags) {
    body.snippet.tags = infos.tags;
  }

  const xhr = new XMLHttpRequest();

  xhr.open('POST', 'https://www.googleapis.com/upload/youtube/v3/videos?part=id,snippet,status', true);
  xhr.setRequestHeader('Authorization', 'Bearer ' + token);

  /**
   * This should works, but doesn't. Error:
   *   {
   *     domain: "global",
   *     message: "Media type 'application/json' is not supported. Valid media types: [video/*, application/octet-stream]"
   *     reason: "badContent"
   *   }
   */
  // xhr.setRequestHeader('Content-Type', 'application/json');

  /** This works */
  xhr.setRequestHeader('Content-Type', file.type);

  /** This works */
  // xhr.setRequestHeader('Content-Type', 'application/octet-stream');

  xhr.setRequestHeader('X-Upload-Content-Length', String(file.size));
  xhr.setRequestHeader('X-Upload-Content-Type', file.type);

  xhr.onload = (e: any) => {
    /** location = null */
    const location = e.target.getResponseHeader('Location');


    /** location is needed to continue upload ... */
  };

  xhr.onerror = (e: any) => {
    console.log('Error:');
    console.log(e);
  };

  xhr.send(JSON.stringify(body));
}

这段代码中的第一件事是设置'Content-Type'为'application/json'不起作用。我有以下错误：

{
  domain: "global",
  message: "Media type 'application/json' is not supported. Valid media types: [video/*, application/octet-stream]"
  reason: "badContent"
}

但是，这是第 131 行使用的，所以我选择使用文件类型，它可以工作。

第二件事是我需要PUT在请求成功后做一个请求POST来上传文件。为此，我需要使用POST请求'Location'标头。然而，当我试图得到它时，我总是得到它null。所以我不能继续任何事情。

解决这个问题的方法是什么？

标签： javascriptyoutube-apiyoutube-data-api