{"id":94138,"date":"2020-09-13T07:42:42","date_gmt":"2020-09-13T05:42:42","guid":{"rendered":"https:\/\/prohoster.info\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets"},"modified":"2020-09-13T07:42:42","modified_gmt":"2020-09-13T05:42:42","slug":"pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","title":{"rendered":"(P\u00ebr nearly) streaming t\u00eb pa dobish\u00ebm t\u00eb kamer\u00ebs prej shfletuesit. Media Stream dhe Websockets","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

N\u00eb k\u00ebt\u00eb artikull, do t\u00eb ndaj p\u00ebrpjekjet e mia p\u00ebr t\u00eb realizuar streaming video p\u00ebrmes websockets pa p\u00ebrdorur plugins t\u00eb jashtme p\u00ebr shfletuesin, si Adobe Flash Player. \u00c7far\u00eb kam arritur, lexoni m\u00eb posht\u00eb.
\n<\/a><\/noindex>
\nAdobe Flash \u2014 m\u00eb par\u00eb Macromedia Flash, \u00ebsht\u00eb nj\u00eb platform\u00eb p\u00ebr krijimin e aplikacioneve q\u00eb funksionojn\u00eb n\u00eb shfletuesin n\u00eb internet. Para implementimit t\u00eb Media Stream API, ishte praktikisht platforma e vetme p\u00ebr transmetimin e videos dhe z\u00ebrit nga kamera e uebit, si dhe p\u00ebr krijimin e konferencave dhe bisedave t\u00eb ndryshme n\u00eb shfletues. Protokolli p\u00ebr transmetimin e informacionit mediatik, RTMP (Real Time Messaging Protocol), ishte faktikisht nj\u00eb protokoll i mbyllur p\u00ebr nj\u00eb koh\u00eb t\u00eb gjat\u00eb, \u00e7ka do t\u00eb thoshte: n\u00ebse d\u00ebshiron t\u00eb ngresh sh\u00ebrbimin t\u00ebnd t\u00eb transmetimit, duhej ta p\u00ebrdorje softuerin e vet\u00eb Adobe \u2014 Adobe Media Server (AMS). <\/p>\n

Pas disa koh\u00ebsh, n\u00eb vitin 2012, Adobe \"u dor\u00ebzua dhe e hodhi\" n\u00eb gjykimin e publikut specifikimi<\/a><\/noindex> protokollin RTMP, i cili p\u00ebrmbante gabime dhe n\u00eb thelb nuk ishte i plot\u00eb. N\u00eb at\u00eb koh\u00eb, zhvilluesit filluan t\u00eb b\u00ebnin implementimet e tyre t\u00eb k\u00ebtij protokolli, k\u00ebshtu u shfaq serveri Wowza. N\u00eb vitin 2011, Adobe paditi Wowza p\u00ebr p\u00ebrdorim t\u00eb paligjsh\u00ebm t\u00eb patentave t\u00eb lidhura me RTMP, dhe pas 4 vjet\u00ebsh, konflikti u zgjidh paq\u00ebsisht. <\/p>\n

Platforma Adobe Flash tani \u00ebsht\u00eb m\u00eb shum\u00eb se 20 vje\u00e7are, dhe gjat\u00eb k\u00ebsaj kohe kan\u00eb dal\u00eb n\u00eb pah shum\u00eb dob\u00ebsi kritike, mb\u00ebshtetja u premtoi<\/a><\/noindex> t\u00eb kishte mbaruar deri n\u00eb vitin 2020, k\u00ebshtu q\u00eb alternativat p\u00ebr sh\u00ebrbimin e transmetimit nuk kan\u00eb shum\u00eb. <\/p>\n

P\u00ebr projektin tim, vendosa menj\u00ebher\u00eb t\u00eb heq dor\u00eb nga p\u00ebrdorimi i Flash n\u00eb shfletues. Arsyeja kryesore e kam p\u00ebrmendur m\u00eb lart; gjithashtu, Flash nuk mb\u00ebshtetet fare n\u00eb platformat mobile, dhe s\u00eb pari nuk doja aspak t\u00eb implementoja Adobe Flash p\u00ebr zhvillim n\u00eb Windows (n\u00eb emuluesin Wine). Prandaj, fillova t\u00eb shkruaj nj\u00eb klient n\u00eb JavaScript. Ky do t\u00eb jet\u00eb vet\u00ebm nj\u00eb prototip, pasi m\u00eb von\u00eb m\u00ebsova se transmetimi mund t\u00eb realizohet shum\u00eb m\u00eb efektivisht n\u00eb baz\u00eb t\u00eb p2p, vet\u00ebm se k\u00ebtu do t\u00eb jet\u00eb peer \u2014 server \u2014 peers, por p\u00ebr k\u00ebt\u00eb do t\u00eb flasim nj\u00eb her\u00eb tjet\u00ebr, sepse akoma nuk \u00ebsht\u00eb gati.<\/p>\n

P\u00ebr t\u00eb filluar pun\u00ebn, na nevojitet nj\u00eb server websockets. Krijova nj\u00eb t\u00eb thjesht\u00eb n\u00eb baz\u00eb t\u00eb paket\u00ebs Go, melody:<\/p>\n

Kodi i pjes\u00ebs server<\/b><\/p>\n

package main\n\nimport (\n\t"errors"\n\t"github.com\/go-chi\/chi"\n\t"gopkg.in\/olahol\/melody.v1"\n\t"log"\n\t"net\/http"\n\t"time"\n)\n\nfunc main() {\n\tr := chi.NewRouter()\n\tm := melody.New()\n\n\tm.Config.MaxMessageSize = 204800\n\n\tr.Get("\/", func(w http.ResponseWriter, r *http.Request) {\n\t\thttp.ServeFile(w, r, "public\/index.html")\n\t})\n\tr.Get("\/ws", func(w http.ResponseWriter, r *http.Request) {\n\t\tm.HandleRequest(w, r)\n\t})\n\n         \/\/ \u0411\u0440\u043e\u0434\u043a\u0430\u0441\u0442\u0438\u043c \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u0442\u043e\u043a \n\tm.HandleMessageBinary(func(s *melody.Session, msg []byte) {\n\t\tm.BroadcastBinary(msg)\n\t})\n\n\tlog.Println("Starting server...")\n\n\thttp.ListenAndServe(":3000", r)\n}\n<\/code><\/pre>\n
N\u00eb klient (an\u00ebs transmetues) fillimisht duhet t\u00eb sigurohemi q\u00eb kemi qasje n\u00eb kamer\u00eb. Kjo b\u00ebhet p\u00ebrmes MediaStream API<\/a><\/noindex>.<\/p>\n
Sigurojm\u00eb qasje (leje) n\u00eb kamer\u00eb\/ mikrofon p\u00ebrmes Media Devices API<\/a><\/noindex>. Ky API ofron metod\u00ebn MediaDevices.getUserMedia()<\/a><\/noindex>, e cila shfaq nj\u00eb dritare t\u00ebrheq\u00ebse, duke pyetur p\u00ebrdoruesin p\u00ebr lejen e qasjes n\u00eb kamer\u00eb dhe\/ose mikrofon. Do t\u00eb doja t\u00eb v\u00ebrej se t\u00eb gjitha eksperimentet i kam realizuar n\u00eb Google Chrome, por mendoj se n\u00eb Firefox do t\u00eb funksionoj\u00eb p\u00ebraf\u00ebrsisht nj\u00ebsoj.<\/p>\n
M\u00eb tej, getUserMedia() kthen nj\u00eb Promise, e cila d\u00ebrgon objektin MediaStream \u2014 nj\u00eb rrjedh\u00eb t\u00eb dh\u00ebnash video-audio. Ky objekt e caktuar n\u00eb pron\u00ebn src t\u00eb elementit video. Kodi:<\/p>\n
                        An\u00ebs transmetues<\/b><\/p>\n
<style>\n  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }\n<\/style>\n<\/head>\n<body>\n<!-- \u0417\u0434\u0435\u0441\u044c \u0432 \u044d\u0442\u043e\u043c "\u043e\u043a\u043e\u0448\u0435\u0447\u043a\u0435" \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f -->\n<video autoplay id="videoObjectHtml5ApiServer"><\/video>\n\n<script type="application\/javascript">\n  var\n        video = document.getElementById('videoObjectHtml5ApiServer');\n\n\/\/ \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d MediaDevices API, \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u043c\u0435\u0440\u0435 (\u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0438 \u043a \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0443)\n\/\/ getUserMedia \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0432 \u043a\u043e\u043b\u0431\u0435\u043a\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 video \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\n\nif (navigator.mediaDevices.getUserMedia) {\n        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {\n          \/\/ \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a video \u0442\u0435\u0433\u0443, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0433 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \n          video.srcObject = stream;\n        });\n}\n<\/script>\n<\/code><\/pre>\n
P\u00ebr t\u00eb transmetuar nj\u00eb video stream p\u00ebrmes soket\u00ebve, ne duhet ta kodifikojm\u00eb, ta buferizojm\u00eb dhe ta d\u00ebrgojm\u00eb n\u00eb pjes\u00eb. Nj\u00eb video stream e pap\u00ebrcaktuar nuk mund t\u00eb d\u00ebrgohet p\u00ebrmes websockets. K\u00ebtu na ndihmon MediaRecorder API<\/a><\/noindex>. Ky API lejon kodimin dhe ndarjen e rrjedh\u00ebs n\u00eb cop\u00ebza. Kodimi e b\u00ebj p\u00ebr t\u00eb kompresuar videon, n\u00eb m\u00ebnyr\u00eb q\u00eb t\u00eb d\u00ebrgoj sa m\u00eb pak byte p\u00ebrmes rrjetit. Pasi t\u00eb ndar\u00eb n\u00eb cop\u00ebza, \u00e7do cop\u00ebza mund t\u00eb d\u00ebrgohet n\u00eb websocket. Kodi:<\/p>\n
                        E kodifikojm\u00eb videon, e ndajm\u00eb n\u00eb pjes\u00eb<\/b><\/p>\n
<style>\n  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }\n<\/style>\n<\/head>\n<body>\n<!-- \u0417\u0434\u0435\u0441\u044c \u0432 \u044d\u0442\u043e\u043c "\u043e\u043a\u043e\u0448\u0435\u0447\u043a\u0435" \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f -->\n<video autoplay id="videoObjectHtml5ApiServer"><\/video>\n\n<script type="application\/javascript">\n  var\n        video = document.getElementById('videoObjectHtml5ApiServer');\n\n\/\/ \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d MediaDevices API, \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u043c\u0435\u0440\u0435 (\u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0438 \u043a \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0443)\n\/\/ getUserMedia \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0432 \u043a\u043e\u043b\u0431\u0435\u043a\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 video \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\n\nif (navigator.mediaDevices.getUserMedia) {\n        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {\n          \/\/ \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a video \u0442\u0435\u0433\u0443, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0433 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \n          video.srcObject = s;\n          var\n            recorderOptions = {\n                mimeType: 'video\/webm; codecs=vp8' \/\/ \u0431\u0443\u0434\u0435\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 webm \u043a\u043e\u0434\u0435\u043a\u043e\u043c vp8\n              },\n              mediaRecorder = new MediaRecorder(s, recorderOptions ); \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 MediaRecorder\n\n               mediaRecorder.ondataavailable = function(e) {\n                if (e.data && e.data.size > 0) {\n                  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430 \u0432 e.data\n                }\n            }\n\n            mediaRecorder.start(100); \/\/ \u0434\u0435\u043b\u0438\u0442 \u043f\u043e\u0442\u043e\u043a \u043d\u0430 \u043a\u0443\u0441\u043e\u0447\u043a\u0438 \u043f\u043e 100 \u043c\u0441 \u043a\u0430\u0436\u0434\u044b\u0439\n\n        });\n}\n<\/script>\n<\/code><\/pre>\n
Tani e shtojm\u00eb d\u00ebrgimin p\u00ebrmes websockets. Si\u00e7 mund t\u00eb duket e \u00e7uditshme, p\u00ebr k\u00ebt\u00eb na nevojitet vet\u00ebm objekti WebSocket<\/a><\/noindex>. Ka vet\u00ebm dy metoda send dhe close. Emrat flasin vet\u00eb p\u00ebr veten. Kodi i plot\u00ebsuar:<\/p>\n
                        D\u00ebrgojm\u00eb video stream n\u00eb server<\/b><\/p>\n
<style>\n  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }\n<\/style>\n<\/head>\n<body>\n<!-- \u0417\u0434\u0435\u0441\u044c \u0432 \u044d\u0442\u043e\u043c "\u043e\u043a\u043e\u0448\u0435\u0447\u043a\u0435" \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f -->\n<video autoplay id="videoObjectHtml5ApiServer"><\/video>\n\n<script type="application\/javascript">\n  var\n        video = document.getElementById('videoObjectHtml5ApiServer');\n\n\/\/ \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d MediaDevices API, \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u043c\u0435\u0440\u0435 (\u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0438 \u043a \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0443)\n\/\/ getUserMedia \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0432 \u043a\u043e\u043b\u0431\u0435\u043a\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 video \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\n\nif (navigator.mediaDevices.getUserMedia) {\n        navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {\n          \/\/ \u0432\u0438\u0434\u0435\u043e \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a video \u0442\u0435\u0433\u0443, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0433 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u0431\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \n          video.srcObject = s;\n          var\n            recorderOptions = {\n                mimeType: 'video\/webm; codecs=vp8' \/\/ \u0431\u0443\u0434\u0435\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 webm \u043a\u043e\u0434\u0435\u043a\u043e\u043c vp8\n              },\n              mediaRecorder = new MediaRecorder(s, recorderOptions ), \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 MediaRecorder\n              socket = new WebSocket('ws:\/\/127.0.0.1:3000\/ws');\n\n               mediaRecorder.ondataavailable = function(e) {\n                if (e.data && e.data.size > 0) {\n                  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430 \u0432 e.data\n                 socket.send(e.data);\n                }\n            }\n\n            mediaRecorder.start(100); \/\/ \u0434\u0435\u043b\u0438\u0442 \u043f\u043e\u0442\u043e\u043a \u043d\u0430 \u043a\u0443\u0441\u043e\u0447\u043a\u0438 \u043f\u043e 100 \u043c\u0441 \u043a\u0430\u0436\u0434\u044b\u0439\n\n        }).catch(function (err) { console.log(err); });\n}\n<\/script>\n<\/code><\/pre>\n
\u0422\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u0430! \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0427\u0442\u043e \u043d\u0430\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f? \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0441\u043e\u043a\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435. \u041d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 WebSocket \u0432\u0435\u0448\u0430\u0435\u043c \u00ab\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c\u00bb (listener), \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 ‘message’. \u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0440\u043e\u0434\u043a\u0430\u0441\u0442\u0438\u0442 \u0435\u0433\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 callback-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u00ab\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u043c\u00bb \u0441\u043e\u0431\u044b\u0442\u0438\u044f ‘message’, \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u2014 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430, \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 vp8. <\/p>\n
                        Marrim video stream<\/b><\/p>\n
<style>\n  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }\n<\/style>\n<\/head>\n<body>\n<!-- \u0417\u0434\u0435\u0441\u044c \u0432 \u044d\u0442\u043e\u043c "\u043e\u043a\u043e\u0448\u0435\u0447\u043a\u0435" \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u0431\u044f -->\n<video autoplay id="videoObjectHtml5ApiServer"><\/video>\n\n<script type="application\/javascript">\n  var\n        video = document.getElementById('videoObjectHtml5ApiServer'),\n         socket = new WebSocket('ws:\/\/127.0.0.1:3000\/ws'), \n         arrayOfBlobs = [];\n\n         socket.addEventListener('message', function (event) {\n                \/\/ "\u043a\u043b\u0430\u0434\u0435\u043c" \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \n                arrayOfBlobs.push(event.data);\n                \/\/ \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u043c \u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0443\u0441\u043e\u0447\u043a\u0438\n                readChunk();\n            });\n<\/script>\n<\/code><\/pre>\n
Ka shum\u00eb koh\u00eb q\u00eb p\u00ebrpiqesha t\u00eb kuptoja pse nuk mund t\u00eb d\u00ebrgoja menj\u00ebher\u00eb copat e marra p\u00ebr t'u luajtur n\u00eb elementin video, por rezultoi se nuk mund t\u00eb b\u00ebhej k\u00ebshtu, s\u00eb pari duhet ta vendos\u00ebsh cop\u00ebn n\u00eb nj\u00eb bufer t\u00eb ve\u00e7ant\u00eb, t\u00eb lidhur me elementin video, dhe vet\u00ebm at\u00ebher\u00eb do t\u00eb filloj\u00eb t\u00eb luaj\u00eb video-streamin. P\u00ebr k\u00ebt\u00eb do t\u00eb nevojitet MediaSource API<\/a><\/noindex> dhe FileReader API<\/a><\/noindex>.<\/p>\n
MediaSource vepron si nj\u00eb nd\u00ebrmjet\u00ebs midis objektit q\u00eb luan media dhe burimit t\u00eb k\u00ebtij streami mediatik. Objekti MediaSource p\u00ebrmban nj\u00eb bufer t\u00eb lidhur p\u00ebr burimin e streamit video\/audio. Nj\u00eb ve\u00e7ori \u00ebsht\u00eb se buferi mund t\u00eb p\u00ebrmbaj\u00eb vet\u00ebm t\u00eb dh\u00ebna nga lloji Uint8, prandaj p\u00ebr t\u00eb krijuar nj\u00eb bufer t\u00eb till\u00eb do t\u00eb nevojitet FileReader. Shikoni kodin, dhe do t\u00eb b\u00ebhet m\u00eb e qart\u00eb:<\/p>\n
                        Po luajm\u00eb video-streamin<\/b><\/p>\n
<style>\n  #videoObjectHtml5ApiServer { width: 320px; height: 240px; background: #666; }\n<\/style>\n<\/head>\n<body>\n<!-- \u0417\u0434\u0435\u0441\u044c \u0432 \u044d\u0442\u043e\u043c "\u043e\u043a\u043e\u0448\u0435\u0447\u043a\u0435" \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u0431\u044f -->\n<video autoplay id="videoObjectHtml5ApiServer"><\/video>\n\n<script type="application\/javascript">\n  var\n        video = document.getElementById('videoObjectHtml5ApiServer'),\n         socket = new WebSocket('ws:\/\/127.0.0.1:3000\/ws'),\n        mediaSource = new MediaSource(), \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 MediaSource\n        vid2url = URL.createObjectURL(mediaSource), \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 URL \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430 \u0441 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u0435\u043c\n        arrayOfBlobs = [],\n        sourceBuffer = null; \/\/ \u0431\u0443\u0444\u0435\u0440, \u043f\u043e\u043a\u0430 \u043d\u0443\u043b\u044c-\u043e\u0431\u044a\u0435\u043a\u0442\n\n         socket.addEventListener('message', function (event) {\n                \/\/ "\u043a\u043b\u0430\u0434\u0435\u043c" \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \n                arrayOfBlobs.push(event.data);\n                \/\/ \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u043c \u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0443\u0441\u043e\u0447\u043a\u0438\n                readChunk();\n            });\n\n         \/\/ \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e MediaSource \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d , \u0447\u0442\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0433\u043e\u0442\u043e\u0432 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0443\u0441\u043e\u0447\u043a\u0438 \n        \/\/ \u0432\u0438\u0434\u0435\u043e\/\u0430\u0443\u0434\u0438\u043e \u043f\u043e\u0442\u043e\u043a\u0430\n        \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u0443\u0444\u0435\u0440 , \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0431\u0443\u0444\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \n        \/\/ \u043a\u0430\u043a\u0438\u043c \u043a\u043e\u0434\u0435\u043a\u043e\u043c \u0431\u044b\u043b \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d \u043f\u043e\u0442\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u043c \u0436\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\n         mediaSource.addEventListener('sourceopen', function() {\n            var mediaSource = this;\n            sourceBuffer = mediaSource.addSourceBuffer("video\/webm; codecs="vp8"");\n        });\n\n      function readChunk() {\n        var reader = new FileReader();\n        reader.onload = function(e) { \n          \/\/ \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e FileReader \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432, \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0441\u0435\u0431\u0435 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430\n          \/\/ \u043c\u044b "\u043f\u0440\u0438\u0446\u0435\u043f\u043b\u044f\u0435\u043c" \u043f\u0435\u0440\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 Uint8Array (\u0431\u044b\u043b Blob) \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432 \u0431\u0443\u0444\u0435\u0440, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439\n          \/\/ \u0441 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0432\u0438\u0434\u0435\u043e\/\u0430\u0443\u0434\u0438\u043e\n          sourceBuffer.appendBuffer(new Uint8Array(e.target.result));\n\n          reader.onload = null;\n        }\n        reader.readAsArrayBuffer(arrayOfBlobs.shift());\n      }\n<\/script>\n<\/code><\/pre>\n
Prototipi i sh\u00ebrbimit t\u00eb streaming \u00ebsht\u00eb gati. Minus kryesor \u00ebsht\u00eb se reproduktimi i videos do t\u00eb mbetet prapa pal\u00ebs transmetuese me 100 ms, q\u00eb ne e vendos\u00ebm vet\u00eb gjat\u00eb ndarjes s\u00eb streamit t\u00eb videos p\u00ebrpara se ta d\u00ebrgonim n\u00eb server. P\u00ebr m\u00eb tep\u00ebr, kur kontrollova n\u00eb laptopin tim, filloi t\u00eb grumbullohej vonesa midis pal\u00ebs transmetuese dhe asaj nj\u00ebpranuese; kjo ishte shum\u00eb e dukshme. Fillova t\u00eb k\u00ebrkoj m\u00ebnyra p\u00ebr t\u00eb kap\u00ebrcyer k\u00ebt\u00eb mang\u00ebsi, dhe... ra n\u00eb RTCPeerConnection API<\/a><\/noindex>, i cili lejon d\u00ebrgimin e video-streamit pa nd\u00ebrlikime si ndarja e streamit n\u00eb copa. Vonesa e grumbulluar, mendoj se ndodh p\u00ebr shkak se n\u00eb shfletues p\u00ebrpara d\u00ebrgimit ndodh ricodimi i \u00e7do cope n\u00eb formatin webm. Nuk u thella m\u00eb tej, dhe fillova t\u00eb m\u00ebsoj p\u00ebr WebRTC, p\u00ebr rezultatet e k\u00ebrkimeve t\u00eb mia mendoj se do t\u00eb shkruaj nj\u00eb artikull t\u00eb ve\u00e7ant\u00eb, n\u00ebse e konsideroj t\u00eb till\u00eb interesante p\u00ebr komunitetin.
\n
Burimi: habr.com<\/a> <\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"
\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0440\u0438\u043c\u043c\u0438\u043d\u0433 \u0432\u0438\u0434\u0435\u043e \u0447\u0435\u0440\u0435\u0437 websockets \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0442\u0438\u043f\u0430 Adobe Flash Player. \u0427\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u0430\u043b\u0435\u0435. Adobe Flash \u2014 \u0440\u0430\u043d\u0435\u0435 Macromedia Flash, \u044d\u0442\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0414\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f Media Stream API \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0438\u043c\u043c\u0438\u043d\u0433\u0430 \u0441 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u044b […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-94138","post","type-post","status-publish","format-standard","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47(Gati) streaming i pa p\u00ebrdoruesh\u00ebm i kamer\u00ebs n\u00eb internet nga shfletuesi. Media Stream dhe Websockets | ProHoster","description":"N\u00eb k\u00ebt\u00eb artikull, dua t\u00eb ndaj p\u00ebrpjekjet e mia p\u00ebr t\u00eb b\u00ebr\u00eb streaming video p\u00ebrmes websockets pa p\u00ebrdorur plugina t\u00eb jashtme t\u00eb shfletuesit si Adobe Flash Player.","canonical_url":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sq_AL","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47(\u041f\u043e\u0447\u0442\u0438) \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u0432\u0435\u0431\u043a\u0430\u043c\u0435\u0440\u044b \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. Media Stream \u0438 Websockets | ProHoster","og:description":"\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0440\u0438\u043c\u043c\u0438\u043d\u0433 \u0432\u0438\u0434\u0435\u043e \u0447\u0435\u0440\u0435\u0437 websockets \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0442\u0438\u043f\u0430 Adobe Flash Player.","og:url":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2020-09-13T05:42:42+00:00","article:modified_time":"2020-09-13T05:42:42+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"94138","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":null,"breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 11:32:23","updated":"2022-10-01 11:18:30","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts\/94138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/comments?post=94138"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/posts\/94138\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/media?parent=94138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/categories?post=94138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sq\/wp-json\/wp\/v2\/tags?post=94138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}