Реагировать на загрузку видео на YouTube (застрял в обработке) - PullRequest
Новая
       20

Реагировать на загрузку видео на YouTube (застрял в обработке)

0 голосов
/ 10 ноября 2019

Я пытаюсь загрузить видеофайлы на YouTube, используя API v3 и MediaUploader. Это работает в моем приложении ReactJS, но не в моем приложении React Native. При загрузке через React Native загрузка завершается, а затем останавливается на 100%. В моей учетной записи на YouTube я вижу новый видеофайл, но он застрял на «Видео все еще обрабатывается».

Мне кажется, проблема в том, что мне нужно отправить видео файл , а не объект с видео uri , но я не знаю, как обойти этоэто.

Я использую YouTube MediaUploader из примера CORS на https://github.com/youtube/api-samples/blob/master/javascript/cors_upload.js Я использую идентификатор клиента OAuth 2.0, и эта настройка работает правильно при использовании приложения ReactJS через мой веб-сайт. Я использую React Native Expo с камерой, которая возвращает мне объект с URI, например:

Видеофайл: Object {"uri": "file: /// var / mobile / Containers / Data /Приложение / 353A7969-E2A8-4C80-B641-C80B2B029555 / Библиотека / Кэши / ExponentExperienceData /% 2540dj_walksalot% 252Fwandereo / Камера / E971DFEC-AB3E-4B6D-892F-9027AFE47A1A.mov * Можно просмотреть * 101 * *3 *}в приложении, и я даже могу успешно отправить его на свой сервер для воспроизведения в веб-приложении и в приложении React Native. Однако отправка этого объекта в MediaUploader не работает. Для загрузки потребуется соответствующее время, но затем он будет равен 100%, в то время как мой аккаунт YouTube покажет, что он получил видео с правильными метаданными, но само видео по-прежнему застряло на «Видео все еще обрабатывается».

video_file: Object {"uri": "file: /// var / mobile / Containers / Data / Application / 353A7969-E2A8-4C80-B641-C80B2B029555 / Библиотека / Caches / ExponentExperienceData /% 2540dj_walksalot% 252Fwandeo/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, а не с самим файлом.

1 Ответ

0 голосов
/ 11 ноября 2019

Я смог решить эту проблему из сообщения в 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.

...