{"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\/hu\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","title":{"rendered":"(Majdnem) haszontalan webkamera streaming a b\u00f6ng\u00e9sz\u0151b\u0151l. Media Stream \u00e9s Websockets","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

A cikkben megosztom k\u00eds\u00e9rleteimet, hogy vide\u00f3 streaminget v\u00e9gezzek websockets haszn\u00e1lat\u00e1val, k\u00fcls\u0151 b\u00f6ng\u00e9sz\u0151 pluginok, mint az Adobe Flash Player, n\u00e9lk\u00fcl. Az eredm\u00e9nyekr\u0151l a tov\u00e1bbiakban olvashatnak.
\n<\/a><\/noindex>
\nAz Adobe Flash, kor\u00e1bban Macromedia Flash, egy platform, amely lehet\u0151v\u00e9 teszi web b\u00f6ng\u00e9sz\u0151ben fut\u00f3 alkalmaz\u00e1sok k\u00e9sz\u00edt\u00e9s\u00e9t. A Media Stream API bevezet\u00e9se el\u0151tt ez volt szinte az egyetlen platform a vide\u00f3- \u00e9s hangstreaminghez webkamer\u00e1b\u00f3l, illetve k\u00fcl\u00f6nf\u00e9le konferenci\u00e1k \u00e9s cseveg\u00e9sek l\u00e9trehoz\u00e1s\u00e1hoz a b\u00f6ng\u00e9sz\u0151ben. A m\u00e9dia inform\u00e1ci\u00f3k tov\u00e1bb\u00edt\u00e1s\u00e1ra szolg\u00e1l\u00f3 protokoll, az RTMP (Real Time Messaging Protocol) hossz\u00fa id\u0151n \u00e1t l\u00e9nyeg\u00e9ben z\u00e1rt volt, ami azt jelentette: ha szeretn\u00e9l streaming szolg\u00e1ltat\u00e1st ind\u00edtani, akkor haszn\u00e1ld az Adobe szoftver\u00e9t \u2014 az Adobe Media Server-t (AMS). <\/p>\n

Egy id\u0151 ut\u00e1n, 2012-ben az Adobe \"megadta mag\u00e1t \u00e9s k\u00f6zz\u00e9tette\" a specifik\u00e1ci\u00f3t<\/a><\/noindex> az RTMP protokollt, amely hib\u00e1kat tartalmazott \u00e9s l\u00e9nyeg\u00e9ben nem volt teljes. Ekkorra a fejleszt\u0151k elkezdt\u00e9k saj\u00e1t megval\u00f3s\u00edt\u00e1saikat ennek a protokollnak, \u00edgy j\u00f6tt l\u00e9tre a Wowza szerver. 2011-ben az Adobe pert ind\u00edtott a Wowza ellen az RTMP-hez kapcsol\u00f3d\u00f3 szabadalmak illeg\u00e1lis haszn\u00e1lata miatt, \u00e9s n\u00e9gy \u00e9v m\u00falva a konfliktust b\u00e9k\u00e9s \u00faton rendezte. <\/p>\n

Az Adobe Flash platform m\u00e1r t\u00f6bb mint 20 \u00e9ve l\u00e9tezik, ez id\u0151 alatt sz\u00e1mos kritikus sebezhet\u0151s\u00e9gre der\u00fclt f\u00e9ny, a t\u00e1mogat\u00e1st \u00edg\u00e9rt\u00e9k<\/a><\/noindex> 2020-ra befejezni, \u00edgy a streaming szolg\u00e1ltat\u00e1sok alternat\u00edv\u00e1i nem t\u00fal gazdagok. <\/p>\n

A projekt sor\u00e1n azonnal d\u00f6nt\u00f6ttem arr\u00f3l, hogy teljesen megszabadulok a Flash haszn\u00e1lat\u00e1t\u00f3l a b\u00f6ng\u00e9sz\u0151ben. Az alapvet\u0151 okot fentebb megeml\u00edtettem, r\u00e1ad\u00e1sul a Flash mobil platformokon egy\u00e1ltal\u00e1n nem t\u00e1mogatott, \u00e9s nem akartam az Adobe Flash-t Windows-on (Wine emul\u00e1tor) futtatni a fejleszt\u00e9shez. Ez\u00e9rt elkezdtem JavaScript alap\u00fa klienst \u00edrni. Ez csup\u00e1n egy protot\u00edpus lesz, mivel k\u00e9s\u0151bb megtudtam, hogy a streaminget sokkal hat\u00e9konyabban lehet p2p alap\u00fa megold\u00e1ssal k\u00e9sz\u00edteni, csak n\u00e1lam peer \u2014 server \u2014 peers kapcsolat lesz, de err\u0151l majd egy m\u00e1sik alkalommal, mert ez m\u00e9g nem k\u00e9sz\u00fclt el.<\/p>\n

A munka kezdet\u00e9hez sz\u00fcks\u00e9g\u00fcnk van egy websockets szerverre. K\u00e9sz\u00edtettem egy egyszer\u0171t a go-melody csomag alapj\u00e1n:<\/p>\n

A szerveroldali k\u00f3d<\/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         \/\/ Vide\u00f3 \u00e1raml\u00e1s k\u00f6zvet\u00edt\u00e9se \n\tm.HandleMessageBinary(func(s *melody.Session, msg []byte) {\n\t\tm.BroadcastBinary(msg)\n\t})\n\n\tlog.Println(\"A szerver ind\u00edt\u00e1sa...\\n\")\n\n\thttp.ListenAndServe(\":3000\", r)\n}\n<\/code><\/pre>\n
A kliensen (a k\u00f6zvet\u00edt\u0151 oldalon) el\u0151sz\u00f6r is hozz\u00e1f\u00e9r\u00e9st kell nyernie a kamer\u00e1hoz. Ezt a k\u00f6vetkez\u0151 m\u00f3don lehet el\u00e9rni: MediaStream API<\/a><\/noindex>.<\/p>\n
Hozz\u00e1f\u00e9r\u00e9st (enged\u00e9lyt) k\u00e9r\u00fcnk a kamer\u00e1hoz\/mikrofonhoz a k\u00f6vetkez\u0151n kereszt\u00fcl: Media Devices API<\/a><\/noindex>. Ez az API egy m\u00f3dszert biztos\u00edt: MediaDevices.getUserMedia()<\/a><\/noindex>, amely egy felugr\u00f3 ablakot mutat, amely megk\u00e9rdezi a felhaszn\u00e1l\u00f3t, hogy enged\u00e9lyezi-e a kamer\u00e1hoz \u00e9s\/vagy mikrofonhoz val\u00f3 hozz\u00e1f\u00e9r\u00e9st. Megjegyzend\u0151, hogy minden k\u00eds\u00e9rletemet a Google Chrome-ban v\u00e9geztem, de \u00fagy gondolom, hogy a Firefoxban is nagyj\u00e1b\u00f3l hasonl\u00f3an m\u0171k\u00f6dik.<\/p>\n
Ezut\u00e1n a getUserMedia() egy \u00edg\u00e9retet ad vissza, amely tartalmazza a MediaStream objektumot \u2014 a vide\u00f3-audio adatfolyamot. Ezt az objektumot hozz\u00e1rendelj\u00fck a video elem src tulajdons\u00e1g\u00e1hoz. K\u00f3d:<\/p>\n
                        K\u00f6zvet\u00edt\u0151 oldal<\/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
A vide\u00f3folyam \u00e1tkonvert\u00e1l\u00e1s\u00e1hoz, t\u00f6m\u00f6r\u00edt\u00e9s\u00e9hez \u00e9s darabokban t\u00f6rt\u00e9n\u0151 tov\u00e1bb\u00edt\u00e1s\u00e1hoz sz\u00fcks\u00e9ges valamilyen m\u00f3dszert alkalmazni. A nyers vide\u00f3folyamot nem lehet websockets-en kereszt\u00fcl tov\u00e1bb\u00edtani. Ebben seg\u00edt nek\u00fcnk a MediaRecorder API<\/a><\/noindex>. Ez az API lehet\u0151v\u00e9 teszi a folyam k\u00f3dol\u00e1s\u00e1t \u00e9s darabokra oszt\u00e1s\u00e1t. A k\u00f3dol\u00e1st a vide\u00f3folyam t\u00f6m\u00f6r\u00edt\u00e9se \u00e9rdek\u00e9ben v\u00e9gzem, hogy kevesebb b\u00e1jtot k\u00fcldj\u00fcnk \u00e1t a h\u00e1l\u00f3zaton. Miut\u00e1n darabokra osztottuk, minden darabot elk\u00fcldhet\u00fcnk a websocket-en. K\u00f3d:<\/p>\n
                        K\u00f3doljuk a vide\u00f3folyamot, darabokra osztva<\/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
Most adjuk hozz\u00e1 a websockets-en val\u00f3 tov\u00e1bb\u00edt\u00e1st. Mint meglep\u0151, ehhez csup\u00e1n egy WebSocket<\/a><\/noindex>. K\u00e9t met\u00f3dusa van: send \u00e9s close. A nevek maguk\u00e9rt besz\u00e9lnek. Kieg\u00e9sz\u00edtett k\u00f3d:<\/p>\n
                        K\u00fcldj\u00fck a vide\u00f3folyamot a szerverre<\/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
A k\u00f6zvet\u00edt\u0151 f\u00e9l k\u00e9szen \u00e1ll! Most pr\u00f3b\u00e1ljuk meg fogadni a vide\u00f3folyamot \u00e9s megjelen\u00edteni a kliensen. Mi sz\u00fcks\u00e9ges ehhez? El\u0151sz\u00f6r is, term\u00e9szetesen egy socket-kapcsolat. A WebSocket objektumra felhelyez\u00fcnk egy \"listener\" (hallgat\u00f3t), \u00e9s feliratkozunk az '\u00fczenet' esem\u00e9nyre. Miut\u00e1n megkaptuk a bin\u00e1ris adatdarabot, a szerver ezt kib\u0151v\u00edti az el\u0151fizet\u0151i, azaz a kliensek fel\u00e9. A kliensek eset\u00e9ben ek\u00f6zben bekapcsol egy callback-funkci\u00f3, amely kapcsol\u00f3dik az '\u00fczenet' esem\u00e9ny hallgat\u00f3j\u00e1hoz, amelynek argumentumak\u00e9nt \u00e1tadjuk mag\u00e1t az objektumot - a vide\u00f3folyam egy darabj\u00e1t, amely vp8 k\u00f3dol\u00e1s\u00fa. <\/p>\n
                        Fogadjuk a vide\u00f3folyamot<\/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
Hossz\u00fa ideig pr\u00f3b\u00e1ltam meg\u00e9rteni, mi\u00e9rt nem lehet a kapott darabokat azonnal lej\u00e1tsz\u00e1sra k\u00fcldeni a video elemnek, de kider\u00fclt, hogy ezt val\u00f3ban nem lehet megtenni, el\u0151sz\u00f6r a darabot egy speci\u00e1lis puffert kell helyezni, amely a video elemhez van k\u00f6tve, \u00e9s csak ezut\u00e1n kezdheti el lej\u00e1tszani a vide\u00f3folyamot. Ehhez sz\u00fcks\u00e9g lesz MediaSource API<\/a><\/noindex> \u00e9s FileReader API<\/a><\/noindex>.<\/p>\n
A MediaSource egy k\u00f6zvet\u00edt\u0151 szerepet t\u00f6lt be a m\u00e9dia lej\u00e1tsz\u00f3 objektum \u00e9s a m\u00e9diafolyam forr\u00e1sa k\u00f6z\u00f6tt. A MediaSource objektum tartalmaz egy csatlakoztatott puffert a vide\u00f3\/audiostream forr\u00e1shoz. Az egyik saj\u00e1toss\u00e1ga, hogy a puffer csak Uint8 t\u00edpus\u00fa adatokat tartalmazhat, ez\u00e9rt egy ilyen puffer l\u00e9trehoz\u00e1s\u00e1hoz FileReader sz\u00fcks\u00e9ges. N\u00e9zd meg a k\u00f3dot, \u00e9s vil\u00e1gosabb lesz:<\/p>\n
                        Vide\u00f3folyam lej\u00e1tsz\u00e1sa<\/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
A streaming szolg\u00e1ltat\u00e1s protot\u00edpusa elk\u00e9sz\u00fclt. F\u0151 h\u00e1tr\u00e1nya, hogy a videolej\u00e1tsz\u00e1s 100 ms-el k\u00e9slekedik a tov\u00e1bb\u00edt\u00f3 f\u00e9lhez k\u00e9pest, ezt mi \u00e1ll\u00edtottuk be a vide\u00f3folyam szakaszokra bont\u00e1sakor a szerverre t\u00f6rt\u00e9n\u0151 tov\u00e1bb\u00edt\u00e1s el\u0151tt. R\u00e1ad\u00e1sul, amikor a laptopomon ellen\u0151riztem, fokozatosan felhalmoz\u00f3dott a k\u00e9sleked\u00e9s a tov\u00e1bb\u00edt\u00f3 \u00e9s az \u00e1tvev\u0151 f\u00e9l k\u00f6z\u00f6tt, ez j\u00f3l l\u00e1that\u00f3 volt. Elkezdtem keresni a m\u00f3dj\u00e1t, hogyan lehetne megsz\u00fcntetni ezt a hi\u00e1nyoss\u00e1got, \u00e9s... r\u00e1tal\u00e1ltam a RTCPeerConnection API<\/a><\/noindex>, amely lehet\u0151v\u00e9 teszi a vide\u00f3folyam \u00e1tvitel\u00e9t an\u00e9lk\u00fcl, hogy b\u00e1rmif\u00e9le tr\u00fckk\u00f6t, p\u00e9ld\u00e1ul a folyam darabokra bont\u00e1s\u00e1t kellene alkalmazni. A felhalmoz\u00f3d\u00f3 k\u00e9sleked\u00e9st \u00fagy gondolom, hogy az okozza, hogy a b\u00f6ng\u00e9sz\u0151ben az \u00e1tvitel el\u0151tt minden darabot \u00fajrak\u00f3dolnak webm form\u00e1tumba. M\u00e1r nem akartam tov\u00e1bb kutatni, \u00e9s elkezdtem tanulm\u00e1nyozni a WebRTC-t, az eredm\u00e9nyeimr\u0151l val\u00f3sz\u00edn\u0171leg k\u00fcl\u00f6n cikket \u00edrok, ha \u00e9rdekesnek tal\u00e1lom a k\u00f6z\u00f6ss\u00e9g sz\u00e1m\u00e1ra.
\n
Forr\u00e1s: 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\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(Majdnem) haszontalan webkamera streaming a b\u00f6ng\u00e9sz\u0151b\u0151l. Media Stream \u00e9s Websockets | ProHoster","description":"A cikkben szeretn\u00e9m megosztani a k\u00eds\u00e9rleteimet, hogyan lehet videostreaminget v\u00e9grehajtani websockets seg\u00edts\u00e9g\u00e9vel harmadik f\u00e9lt\u0151l sz\u00e1rmaz\u00f3 b\u00f6ng\u00e9sz\u0151 pluginok, p\u00e9ld\u00e1ul Adobe Flash Player haszn\u00e1lata n\u00e9lk\u00fcl.","canonical_url":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/pochti-bespoleznyj-striming-vebkamery-iz-brauzera-media-stream-i-websockets","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hu_HU","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\/hu\/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\/hu\/wp-json\/wp\/v2\/posts\/94138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/comments?post=94138"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/94138\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media?parent=94138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/categories?post=94138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/tags?post=94138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}