React Native 将视频上传到 YouTube（卡在处理中）答案

【问题标题】：React Native Uploading Video to YouTube (Stuck at Processing)React Native 将视频上传到 YouTube（卡在处理中）
【发布时间】：2020-03-06 13:39:10
【问题描述】：

我正在尝试使用他们的 v3 API 和他们的 MediaUploader 将视频文件上传到 YouTube。它适用于我的 ReactJS 应用程序，但不适用于我的 React Native 应用程序。通过 React Native 上传时，上传完成，然后停滞在 100%。在我的 YouTube 帐户中，我可以看到新的视频文件，但它卡在“视频仍在处理中”。

我认为问题可能是我需要发送视频 file 而不是带有视频 uri 的对象，但我不知道如何解决这个问题.

我正在使用来自 https://github.com/youtube/api-samples/blob/master/javascript/cors_upload.js 的 CORS 示例中的 YouTube MediaUploader 我正在使用 OAuth 2.0 客户端 ID，并且当通过我的网站使用 ReactJS 应用程序时，此设置可以正常工作。我正在使用带有相机的 React Native Expo，它返回一个带有 URI 的对象，例如：

视频文件：对象 { "uri": "file:///var/mobile/Containers/Data/Application/353A7969-E2A8-4C80-B641-C80B2B029555/Library/Caches/ExponentExperienceData/%2540dj_walksalot%252Fwandereo/Camera/E971DFEC-AB3E-4B6D-892F -9027AFE47A1A.mov", }

这个文件可以在应用程序中查看，我什至可以成功地将它发送到我的服务器，以便在 Web 应用程序和 React Native 应用程序中播放。但是，在 MediaUploader 中发送此对象不起作用。上传需要适当的时间，然后会达到 100%，而我的 YouTube 帐户会显示它已收到包含正确元数据的视频，但视频本身仍停留在“视频仍在处理中”。

video_file: 对象 { "uri": "file:///var/mobile/Containers/Data/Application/353A7969-E2A8-4C80-B641-C80B2B029555/Library/Caches/ExponentExperienceData/%2540dj_walksalot%252Fwandereo/Camera/E971DFEC-AB3E-4B6D-892F -9027AFE47A1A.mov", }

export const uploadToYouTube = (access_token, video_file, metadata) => async (dispatch) => {
...cors_upload...

var uploader = new MediaUploader({
baseUrl: `https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&key=API_KEY`,
file: video_file,
token: access_token,
metadata: metadata,
contentType: 'video/quicktime', 
// contentType: 'application/octet-stream',//"video/*",
// contentType = options.contentType || this.file.type || 'application/octet-stream';
params: {
   part: Object.keys(metadata).join(',')
},

onError: function(data) {
  // onError code
  let err = JSON.parse(data);
  dispatch(returnErrors(err.message, err.code))
  console.log('Error: ', err);
},

onProgress: function(progressEvent){
  // onProgress code
  let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  dispatch({
    type: UPLOAD_PROGRESS,
    payload: percentCompleted
  });
},

onComplete: function(data) {
  console.log('Complete');
   // onComplete code
  let responseData = JSON.parse(data);
  dispatch({
    type: UPLOAD_YOUTUBE_VIDEO,
    payload: JSON.parse(data)
  })
  dispatch({
    type: UPLOAD_PROGRESS,
    payload: 0
  });
}

});

uploader.upload(); }

类似于我当前工作的网络应用程序，完成上传后，“onComplete”功能应该触发，YouTube 应该处理视频。这不会发生。我相信这是因为我附加了一个带有 URI 的对象，而不是实际的文件。

【问题讨论】：

标签： react-native youtube-api

【解决方案1】：

我可以通过乔·埃德加（Joe Edgar）在 Expert Mill 上的帖子解决这个问题，https://www.expertmill.com/2018/10/19/using-and-uploading-dynamically-created-local-files-in-react-native-and-expo/

通过使用 fetch 和 .blob() 我能够将 URI 对象转换为数据对象并上传。附加代码：

const file = await fetch(video_file.uri); const file_blob = await file.blob();

无需安装 RNFetchBlob，因为它在 Expo SDK 中。

【讨论】：