JS: blob url pre video element

petersveter

JS: blob url pre video element
« kdy: 26. 05. 2024, 16:15:23 »
Mam video na url ktore vyzaduje access token. Aktualne pridavam moznost mat tento token ako authorization header namiesto url query argument.

Pre pistup k videu tymto sposobom je nutne pouzit blob url pretoze inak prehliadac nema ako ten header pre ten request nastavit.

Pri obrazku je to jednoduche:
Kód: [Vybrat]
      let src = ...
      let options = {headers: {'Authorization': "Basic " + token}};

      fetch(src, options)
        .then(res => res.blob())
        .then(blob => {
          this.src = URL.createObjectURL(blob);
        })
        .catch(() => {
          this.src = ""
        });

Obrazok sa nacita cely a nie je tam moc co riesit. Lenze pri videu je situacia ina, je tam seekovanie a bufferovanie a pretacanie a podobne.

"Problem" je ze ja len chcem video elementu podsunut zase len blob url ako src hodnotu a chcem aby prehliadac riesil sam vsetko okolo prehravania tak ako doteraz.

Lenze sa zda ze pri audio/video elemente nemam na vyber a musim pouzit MediaSource. A s tym sa naozaj nechcem babrat po predoslych skusenostiach pretoze tam treba riesit bufferovanie manualne a sledovat spravne eventy a reagovat na ne spravnou logikou, takze proste sa tomu chcem vyhnut lebo to nechcem robit ale ani to nepotrebujem takto dopodrobna riesit.

Ja len naozaj potrebujem pridat header do url requestu ktory prehliadac sam standardne robi.

Takze ma zaujima ci je nejak mozne toto dosiahnut bez media sourcu, pripadne ci sa media source da nejak "defaulnut" do standardneho spravania a ja mu len podsuniem spravnu "adresu"?


Re:JS: blob url pre video element
« Odpověď #1 kdy: 26. 05. 2024, 18:40:11 »
Nelze přidat hlavičky do požadavků, které dělá samotný prohlížeč (samozřejmě s výjimkou věcí, které přidává samotný prohlížeč, jako cookie).

Pochybuju o tom, že se vám do BLOBu vejde celé video.

petersveter

Re:JS: blob url pre video element
« Odpověď #2 kdy: 26. 05. 2024, 21:17:27 »
Polozim otazku inak teda - ako napisat logiku pre SourceBuffer ktory dam MediaSourcu tak aby fungoval sam a ja len dodam request builder. Cize sam si poriesi seekovanie a range requesty. Ja len dodam url/request builder ktory ma volat pri stahovani dat a s datami pracuje uz "normalne".

Asi najskor cez nejaku kniznicu. Nechcem totiz implementovat kompletne samostatny prehravac, ide mi cisto len o tu url/header a logika nech ostane standardna. Je mi jasne ze tam sa to musi implementovat uz vsetko a ze sa neda defaultnut na prehliadac ktory si standardne pod kapotou riesi MediaSource sam. Takze asi bez kniznice ktora toto uz riesi to nepojde, ale kao pisem, nechcem kompletne cely novy prehravac, len tu logiku pod tym.

Re:JS: blob url pre video element
« Odpověď #3 kdy: 26. 05. 2024, 22:26:35 »
Myslim si ze nechapes princip naco je Blob pouzivany. Blob sa da pouzit na poslanie suboru, s ktorym je nasledne manipulovane az po jeho kompletnom stiahnuti.

Ak chces robit video stream/prehravanie/...., tak to musis riesit inak ako cez blob, ten proste na to neni stavany.

petersveter

Re:JS: blob url pre video element
« Odpověď #4 kdy: 26. 05. 2024, 22:36:39 »
Myslim si ze nechapes princip naco je Blob pouzivany. Blob sa da pouzit na poslanie suboru, s ktorym je nasledne manipulovane az po jeho kompletnom stiahnuti.

Ak chces robit video stream/prehravanie/...., tak to musis riesit inak ako cez blob, ten proste na to neni stavany.

Precitaj si celu otazku, nie len polku, a potom reaguj nabuduce.


tecka

  • ***
  • 158
    • Zobrazit profil
    • E-mail
Re:JS: blob url pre video element
« Odpověď #5 kdy: 27. 05. 2024, 06:31:24 »
V Service Workeru jde odchytit všechny requesty (FetchEvent).
« Poslední změna: 27. 05. 2024, 06:33:32 od tecka »