search

bartbutenaers / node-red-contrib-multipart-stream-decoder

Node-Red node for decoding multipart streams over http
Apache License 2.0
9 stars 2 forks source link

input node only #7

Open kilbamoo opened 5 years ago

kilbamoo commented 5 years ago

Why does the stream only works with an input node? If I create a button for dashboard to start the stream, multipart decoder node says it's streaming, but the image on the dashboard remains still. Refreshing webpage will not help.

bartbutenaers commented 5 years ago

Hi @kilbamo, What do you mean with "input node"?
Do you have an example flow (referring to a public camera), that I can use to reproduce the problem? Bart

kilbamoo commented 5 years ago

Just an example. When the input node in back end is pressed, image keeps being updated. When the button on ui is pressed, in back end you see that it is still streaming, but it is not updated on front end.

[ { "id": "d670f096.538d6", "type": "multipart-decoder", "z": "a2f6862c.bbd128", "name": "", "ret": "bin", "url": "http://93.117.227.50:82/mjpg/video.mjpg", "tls": "", "delay": 0, "maximum": "10000000", "blockSize": "1", "x": 310, "y": 100, "wires": [ [ "18d221b1.bf140e" ] ] }, { "id": "18d221b1.bf140e", "type": "base64", "z": "a2f6862c.bbd128", "name": "Encode", "action": "", "property": "payload", "x": 500, "y": 100, "wires": [ [ "4f41aa83.665b04" ] ] }, { "id": "4f41aa83.665b04", "type": "ui_template", "z": "a2f6862c.bbd128", "group": "6c6b2f30.a33d1", "name": "Display image", "order": 1, "width": "0", "height": "0", "format": "<img width=\"16\" height=\"16\" alt=\"stream test\" src=\"data:image/jpg;base64,{{msg.payload}}\" />\n", "storeOutMessages": true, "fwdInMessages": true, "templateScope": "local", "x": 677.2569236755371, "y": 100.41666603088379, "wires": [ [] ] }, { "id": "16c94264.56d5ae", "type": "inject", "z": "a2f6862c.bbd128", "name": "Start stream", "topic": "", "payload": "", "payloadType": "date", "repeat": "", "crontab": "", "once": false, "onceDelay": "", "x": 109.83334350585938, "y": 100.00003814697266, "wires": [ [ "d670f096.538d6" ] ] }, { "id": "736db48e.7554fc", "type": "ui_button", "z": "a2f6862c.bbd128", "name": "", "group": "6ba88465.df4a4c", "order": 19, "width": 0, "height": 0, "passthru": false, "label": "DashPress", "tooltip": "", "color": "", "bgcolor": "", "icon": "", "payload": "", "payloadType": "date", "topic": "", "x": 110, "y": 60, "wires": [ [ "d670f096.538d6" ] ] }, { "id": "6c6b2f30.a33d1", "type": "ui_group", "z": "", "name": "TheFred", "tab": "f02a17ec.8b6fc8", "order": 1, "disp": false, "width": "8", "collapse": false }, { "id": "6ba88465.df4a4c", "type": "ui_group", "z": "", "name": "Group1", "tab": "b4a66f5d.b7658", "order": 1, "disp": false, "width": "6", "collapse": false }, { "id": "f02a17ec.8b6fc8", "type": "ui_tab", "z": "", "name": "TechDep @ Tasco", "icon": "fa-music", "order": "2" }, { "id": "b4a66f5d.b7658", "type": "ui_tab", "z": "", "name": "Remote", "icon": "fa-mobile", "order": 2, "disabled": false, "hidden": false } ]

philipsoeberg commented 5 years ago

This is my flow.

It does: 1) use ui_template to insert a with src of "/cam-living" 2) Use a "http in" component to catch to GET to /cam-living 3) Respond to the http-in using multipart-encoder 4) tracks if a client is listening (flow.clientCount_camLiving = flow output of encoder) 5) starts multipart-decoder if flow.clientCount_camLiving > 0) 6) stops multipart-decoder if flow.clientCount_camLiving == 0) 5 & 6 are kicked using a 1-second timer.

The above result in an MJPEG stream from my Hikvision cam to a ui_template container with live feed, but only when a client is actually connected to it. It auto-stops the stream when the client disconnects.

[{"id":"6d3dfd5a.856604","type":"inject","z":"515c47a2.65aa18","name":"Every second","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"x":234.00006103515625,"y":1164.5000467300415,"wires":[["6ce06d9.605cb94","bf94407b.75cce","f80788bc.319938","350dd90d.cdf5a6","91fb9a3c.b0bd78"]]},{"id":"6ce06d9.605cb94","type":"switch","z":"515c47a2.65aa18","name":"flow.clientCount_camLiving","property":"clientCount_camLiving","propertyType":"flow","rules":[{"t":"gt","v":"0","vt":"num"},{"t":"eq","v":"0","vt":"str"}],"checkall":"false","repair":false,"outputs":2,"x":455.98844146728516,"y":1243.9336996078491,"wires":[["8dd90d19.c8345"],["5cc4bde3.1b58f4"]]},{"id":"5cc4bde3.1b58f4","type":"change","z":"515c47a2.65aa18","name":"Set msg.stop true","rules":[{"t":"set","p":"stop","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":453.00020599365234,"y":1352.5001764297485,"wires":[["b2ed3be4.06e258"]]},{"id":"56cab95c.dbb868","type":"multipart-encoder","z":"515c47a2.65aa18","name":"","statusCode":"","ignoreMessages":true,"outputOneNew":true,"outputIfSingle":true,"outputIfAll":true,"globalHeaders":{"Content-Type":"multipart/x-mixed-replace;boundary=--myboundary","Connection":"keep-alive","Expires":"Fri, 01 Jan 1990 00:00:00 GMT","Cache-Control":"no-cache, no-store, max-age=0, must-revalidate","Pragma":"no-cache"},"partHeaders":{"Content-Type":"image/jpeg"},"destination":"all","highWaterMark":"131072","x":1150.1670951843262,"y":1329.1669082641602,"wires":[["763a47c2.c4ba08"]]},{"id":"69e268ea.babe48","type":"http in","z":"515c47a2.65aa18","name":"","url":"/cam-living","method":"get","upload":false,"swaggerDoc":"","x":965.000244140625,"y":1282.5001153945923,"wires":[["56cab95c.dbb868"]]},{"id":"763a47c2.c4ba08","type":"change","z":"515c47a2.65aa18","name":"Set flow.clientCount_camLiving","rules":[{"t":"set","p":"clientCount_camLiving","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1373.0005187988281,"y":1329.5002422332764,"wires":[[]]},{"id":"327e2df6.e6a7f2","type":"multipart-decoder","z":"515c47a2.65aa18","name":"cam-living MJPEG","ret":"bin","url":" http://ip-of-hikvision-cam/Streaming/channels/2/httppreview","tls":"","delay":"1000","maximum":1000000,"x":815.0002288818359,"y":1329.5000886917114,"wires":[["25105120.2c862e"]]},{"id":"8dd90d19.c8345","type":"change","z":"515c47a2.65aa18","name":"Set msg.stop false","rules":[{"t":"set","p":"stop","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":454.0001678466797,"y":1309.50013256073,"wires":[["b2ed3be4.06e258"]]},{"id":"b2ed3be4.06e258","type":"rbe","z":"515c47a2.65aa18","name":"msg.stop","func":"rbe","gap":"","start":"","inout":"out","property":"stop","x":627.1667556762695,"y":1329.500051498413,"wires":[["327e2df6.e6a7f2"]]},{"id":"5ef8ead6.dfb8b4","type":"ui_template","z":"515c47a2.65aa18","group":"c36660f4.51159","name":"/cam-living feed","order":1,"width":"6","height":"6","format":"<img width=\"240\" height=\"240\" src=\"/cam-living\" />\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1170.0001068115234,"y":1283.3334112167358,"wires":[[]]},{"id":"25105120.2c862e","type":"delay","z":"515c47a2.65aa18","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"x":990.1668548583984,"y":1329.3334131240845,"wires":[["56cab95c.dbb868"]]},{"id":"c36660f4.51159","type":"ui_group","z":"","name":"Living","tab":"206e2b06.e7d994","order":2,"disp":true,"width":"6","collapse":false},{"id":"206e2b06.e7d994","type":"ui_tab","z":"","name":"Camera","icon":"fa-camera","order":5,"disabled":false,"hidden":false}]

The multipart-encoder and multipart-decoder are AWESOME components. Very well made.

/Philip Søeberg

On Sat, 22 Jun 2019 at 19:06, kilbamoo notifications@github.com wrote:

Just an example. When the input node in back end is pressed, image keeps being updated. When the button on ui is pressed, in back end you see that it is still streaming, but it is not updated on front end.

[ { "id": "d670f096.538d6", "type": "multipart-decoder", "z": "a2f6862c.bbd128", "name": "", "ret": "bin", "url": " http://93.117.227.50:82/mjpg/video.mjpg", "tls": "", "delay": 0, "maximum": "10000000", "blockSize": "1", "x": 310, "y": 100, "wires": [ [ "18d221b1.bf140e" ] ] }, { "id": "18d221b1.bf140e", "type": "base64", "z": "a2f6862c.bbd128", "name": "Encode", "action": "", "property": "payload", "x": 500, "y": 100, "wires": [ [ "4f41aa83.665b04" ] ] }, { "id": "4f41aa83.665b04", "type": "ui_template", "z": "a2f6862c.bbd128", "group": "6c6b2f30.a33d1", "name": "Display image", "order": 1, "width": "0", "height": "0", "format": "<img width=\"16\" height=\"16\" alt=\"stream test\" src=\"data:image/jpg;base64,{{msg.payload}}\" />\n", "storeOutMessages": true, "fwdInMessages": true, "templateScope": "local", "x": 677.2569236755371, "y": 100.41666603088379, "wires": [ [] ] }, { "id": "16c94264.56d5ae", "type": "inject", "z": "a2f6862c.bbd128", "name": "Start stream", "topic": "", "payload": "", "payloadType": "date", "repeat": "", "crontab": "", "once": false, "onceDelay": "", "x": 109.83334350585938, "y": 100.00003814697266, "wires": [ [ "d670f096.538d6" ] ] }, { "id": "736db48e.7554fc", "type": "ui_button", "z": "a2f6862c.bbd128", "name": "", "group": "6ba88465.df4a4c", "order": 19, "width": 0, "height": 0, "passthru": false, "label": "DashPress", "tooltip": "", "color": "", "bgcolor": "", "icon": "", "payload": "", "payloadType": "date", "topic": "", "x": 110, "y": 60, "wires": [ [ "d670f096.538d6" ] ] }, { "id": "6c6b2f30.a33d1", "type": "ui_group", "z": "", "name": "TheFred", "tab": "f02a17ec.8b6fc8", "order": 1, "disp": false, "width": "8", "collapse": false }, { "id": "6ba88465.df4a4c", "type": "ui_group", "z": "", "name": "Group1", "tab": "b4a66f5d.b7658", "order": 1, "disp": false, "width": "6", "collapse": false }, { "id": "f02a17ec.8b6fc8", "type": "ui_tab", "z": "", "name": "TechDep @ Tasco", "icon": "fa-music", "order": "2" }, { "id": "b4a66f5d.b7658", "type": "ui_tab", "z": "", "name": "Remote", "icon": "fa-mobile", "order": 2, "disabled": false, "hidden": false } ]

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bartbutenaers/node-red-contrib-multipart-stream-decoder/issues/7?email_source=notifications&email_token=AEYS6G34UHP5WKC7XOQP64LP3ZL3DA5CNFSM4H2WUAZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYKNP2Q#issuecomment-504682474, or mute the thread https://github.com/notifications/unsubscribe-auth/AEYS6G2EEUNPTJOSVWCO27TP3ZL3DANCNFSM4H2WUAZA .

--

Philip Søebergphilip@soeberg.net

bartbutenaers commented 5 years ago

@kilbamoo,

I have imported your flow into my node-Red and it seems to be working fine here:

image

I have added two extra nodes to show you some more information:

I propose that you add also those nodes, so you can at least determine where your problem is located...
I see the images arriving in your template node on the dashboard:

image

Hey Philip (@philipsoeberg), Thanks for your support and thanks for sharing your enthousiasm!!

kilbamoo commented 5 years ago

Installed both additional nodes now. I get 7-10/s. Image preview in back-end is updated with inject node and when I press the dashboard button. But it still won't update the images on the dashboard itself when the dashboard button is pressed. I tested with different browser (chrome, firefox and chromium on the pi on which its running) none work.

bartbutenaers commented 5 years ago

@kilbamoo, So then we know at least that the decoding is working fine, and that your images are being pushed to the dashboard (via Node-RED's websocket channel). But for some reason the dashboard shows it correctly for me but not for you. No clue at the moment about what could cause this ...

I would advise you to start a discussion on the Node-RED forum, to increase your chances to get a solution. Best to include following information in the discussion: