Как сохранить изображение / видео файл с помощью gundb?

Question

Я знаю, что традиционный способ - сохранить файл изображения / видео в одном месте, а затем просто сохранить индекс ссылки в таблице базы данных.

Теперь я узнаю о gundb и могу очень легко хранить данные типа json типа ключ-значение, но, поскольку они децентрализованы, если я хочу создать приложение для чата, скажем, как мне следует хранить изображения (например, аватар пользователя)?

Мне также интересно, можно ли создать приложение для обмена фильмами, используя gundb?

Answer 1

@Retric, отличный вопрос! Я не уверен, почему люди против тебя, они должны быть ненавистниками.

Вы правы, лучше сохранить это изображение / видео и ссылаться на него через GUN. Для видео, в частности, WebTorrent/BitTorrent уже более 10 лет делится P2P-видео и в какой-то момент обрабатывает 40% мирового интернет-трафика!

Однако WebTorrent / BitTorrent не очень хороши для обнаружения / совместного использования этих URI (магнитных ссылок и т. Д.), Но GUN есть. Поэтому я бы рекомендовал это как один из вариантов.

Для изображений, особенно небольших, таких как аватары / значки / профили, я часто храню их в GUN напрямую Base64 их кодирование (многие веб-сайты по всему миру встраивают изображения / значки / спрайты / аватары в файлы CSS с URL-адресами base64 data, за исключением того, что теперь вы можете использовать GUN для этого).

Если вы заинтересованы в этом, я написал небольшую утилиту, использующую jQuery, которая позволяет перетаскивать изображения на ваш веб-сайт, и она автоматически изменяет размер (передает параметры для перезаписи) и кодирует base64, чтобы затем сохранить его в GUN:

https://github.com/amark/gun/blob/master/lib/upload.js

Вот небольшой пример того, как я его использую:

$('#profile').upload(function resize(e, up){
    if(e.err){ return } // handle error
    $('#profile').addClass('pulse'); // css to indicate image processing
    if(up){ return up.shrink(e, resize, 64) } // pass it `e` drag&drop/upload event, then I reuse the current function (named resize) as the callback for it, and tell it resize to 64px.
    $('#profile').removeClass('pulse'); // css indicate done processing.
    $("#profile img").attr('src', e.base64).removeClass('none'); // set photo in HTML!
    gun.user().get('who').get('face').get('small').put(e.base64); // save profile thumbnail to GUN
});

Наконец, как насчет хранения видео в GUN, если вы не хотите использовать BitTorrent?

Я настоятельно рекомендую использовать формат HLS для хранения видео в GUN, это позволит вам осуществлять децентрализованную потоковую передачу видео в реальном времени. Это красивый простой формат, позволяющий работать с потоковым видео даже из статических файлов, поскольку он хранит видео небольшими порциями, которые можно транслировать, что идеально подходит для GUN.

Уже есть видеоплеер на основе JS для формата HLS:

https://github.com/video-dev/hls.js/

Основываясь на демонстрационной странице, вы можете увидеть пример того, как хранится видео, как здесь на GitHub:

https://github.com/video-dev/streams/tree/master/x36xhzz

(если вы нажмете на файл m3u8, вы увидите, что в нем есть метаданные, в которых хранится 720p url_0 папка, в которой есть вложенные файлы)

Вместо того, чтобы хранить видеофайлы HLS на BitTorrent или централизованном сервере, вы можете сохранить их в GUN, используя ту же структуру папок gun.get('videos').get('x36xhzz').get('url_0').get('url_496').get('193039199_mp4_h264_aac_hd_7.ts').once(function(video_chunk){ passToHLSplayer(video_chunk) }) такой, что HLS.js будет легко интегрироваться с GUN.

Теперь вы будете иметь децентрализованное потоковое видео P2P!!!

И даже круче, вы можете комбинировать его с GUN lib/webrtc Адаптировать и сделать это полностью браузер для браузера!

Я надеюсь, что это помогло.

Answer 2

Здесь нужно понимать разницу между адресным пространством содержимого (замороженным пространством) и пользовательским пространством в gun.

Допустим, у вас есть медиафайлы, закодированные как base64, и вы знаете его тип контента (здесь я использовал текст, чтобы сделать пример кратким, но вы можете использовать видеоизображение и т. д.):

      // put avatar in frozen space:
let media = JSON.stringify({ b64 : "U2hlIHdhcyBib3JuIGFuIGFkdmVudHVyZXIuLi4=", type : "text/plain"})
// get hash of stringified media obj using gun's SEA lib:
let mediaID = await SEA.work(media, null, null, {name: "SHA-256"});
// put media in hash-addressed gundb
gun.get('#').get(mediaID).put(media,(r)=>console.log('Media put acknowledged?',r))

Для гипотетического приложения для чата вы можете использовать user spaceи поместите носитель под именем «аватар»:

      // put avatar in user space:
let user = await SEA.pair();
await gun.user().auth(user) 
gun.get('~' + user.pub).get('avatar').put('#' + mediaID)

// retrieve a user's avatar
gun.get('~' + usera.pub).get('avatar').once((hashid,k)=>{
    gun.get('#').get(hashid).once(media=>{
      console.log("Got user's avatar :-)",media)
      //do something with media
    })
})