My Tip Menu - Overlay

Overlay design pentru programe de live streaming

VEZI DEMO ONLINE
OBS SplitCam

Ce este

Tip Menu Overlay este o pagina web care poate fi folosita de pe calculator sau laptop in OBS sau SplitCam

Instalare si Editare

Instalarea este simpla si nu necesita cunostinte avansate, pe de alta parte, editarea e un pic mai dificila in functie programul live stream pe care il folosesti OBS sau SplitCam

Alege versiunea de instalare comform programului pe care-l folosesti si urmeaza pasi aferenti.
Pentru ca unii utilizatori au selectata limba Romana in setarile OBS, voi folosi ambele variante pentru denumiri (acolo unde se aplica)

OBS

Descarca si instaleaza programul OBS daca nu il ai deja instalat in laptop sau PC.

Descarca arhiva zip My Tip Menu si dezarhiveaza continutul intr-un fisier vizibil (ca sa nu-l cauti mai tarziu)

Deschide programul OBS. In panoul (defapt, sub panoul) Sources/Surse click pe iconita plus (in print-screen-ul meu are o alta culoare pentru ca folosesc o tema personalizata pentru OBS, dar functionalitatea e aceeasi.

Din optiunile afisate, selecteaza Browser

Fig.1 Selecteaza sursa Browser Adauga Sursa Browser

Bifeaza optiunea Fisier local/ Local file si butonul Rasfoieste/Browse

Fig.2 Optiuni Browser Selecteaza Sursa

Cauta folderul pe care l-ai descarcat si selecteaza fisierul my-tip-menu.html

Seteaza Latime/Width si Inaltime/Height. Personal folosesc un laptop cu rezolutie de 1920/1080, rezoltia device-ului tau poate fi diferita asa ca, va trebui sa faci anumite setari pe cont propriu. Oricum, OBS permite redimensionare in fereastra Previzualizare/Preview daca manipulezi chenarul rosu.

Fig.3 Setari sursa Browser Setari Sursa

Click dreapta pe browserul sursa si alege Interactioneaza / Interact

Aceasta functie OBS permite interactia cu pagina sursa si reda in timp real modificarile pe care le fac - In modul Studio, poti vedea ce editari se fac in Interact.
Modul Studio este optiunea OBS care afiseaza doua ferestre, Previzualizeaza/Preview in stanga si Program in dreapta

Fig.4 Interactiune via OBS Interact si Editare

Click pe oricare element text si editeaza/schimba continutul

Modificarile prin functia OBS Interact NU sunt permanente, nu schimba sursa si continutul paginii web permanent. Click pe Reimprospateaza/Refresh si tot continutul revine la cel initial

Video incarcat pe canalul YouTube

Vezi Video

SplitCam

Ai nevoie de arhiva zip, dezarhivata in laptopul sau pc-ul tau si programul SplitCam Software

Deschide programul SpliCam. Langa panoul Media Layers click pe iconita plus si selecteaza optiunea Browser

Cauta folderul pe care l-ai descarcat si selecteaza fisierul my-tip-menu.html in browserul tau. Copie adresa URL din bara de sus

Click pe butonul albastru Add

Fig.1 Selecteaza Browser ca sursa layer Selecteaza sursa Browser
Fig.2 Adauga fisierul html Adauga layerul Browser

In SplitCam nu exista optiunea de a interactiona cu sursa Browser iar modificarile/editarile continutului paginii web my-tip-menu.html se pot face doar manual editand liniile de cod sau varianta mai simpla, deschide fisierul my-tip-menu.html in browserul tau prestabilit, click pe elementele text, editeaza continut dupa care adaugi URL in SplitCam (pasul 2 mentional mai sus).

Daca vrei sa editezi continutul permanent, dar nu ai un editor markup la indemana, iti recomand Editorul Sursa, este o pagina html simpla care iti permite accesul la sursa codului, editare manuala a codului si deasemenea poti salva aceste mofificari pe care le-ai facut

Video incarcat pe canalul YouTube

Vezi Video

Tweet