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（我从this file和this file中包含的示例中汲取了灵感）

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行上的here，因此我选择使用有效的文件类型。

第二件事是，在PUT请求成功上传后，我需要执行一个POST请求。为此，我需要使用POST请求'Location'标头。但是，当我尝试获取它时，结果总是会有null。所以我无法继续任何事情。

解决此问题的方法是什么？

Youtube API，JavaScript-上传视频

0 个答案: