[ANNOUNCE]node-red-contrib-ui-media-recorder - beta version

Will explain this a bit more in detail, to explain why I'm a bit stuck...

Currently I use I my node hardcoded values, to explain the browser which media data I want to get:

  • resolution 640x480
  • front camera
  • ...

I cannot add these settings on the node's config screen, so you can adjust them. Reason is very simple: the config screen runs on the server and suppose N dashboards are running somewhere. The server side has no idea what each connected device supports. Perhaps one dashboard is running on a tablet with only a front camera, but the other dashboard is running on a smartphone with a front and back camera. Idem for supported resolutions, and so on ... So bottom line is that you cannot configure this kind of stuff in the config screen, which means you have to specify it "somewhere" in the dashboard...

In the dashboard I can easily find out what the device supports, but I need to visualize it somehow so the user can specify a desired value.

For example I can get a list of the available media input and output devices, such as microphones, cameras, headsets, and so forth:

navigator.mediaDevices.enumerateDevices()

Which would give me a result like this:

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=

I could add a new node "device selector" that shows a dropdown in the dashboard, that sends the selected value to server. And on the server you could wire it to my media-recorder node, so the recorder knows that it needs to start recording from another device.

A quick scribble might explain the flow a bit better:

image

  1. A new Media-Device-Selector node is added to the flow, where you specify in the config screen that you only want to enumerate the "video" inputs.
  2. This node renders a dropdown list on the dashboard, which enumerates all available video devices.
  3. As soon as the user selects another device from the dropdown, that selection will be send to the server side. And that selection needs to be stored in local storage of the browser, so it will be remembered (like @TotallyInformation advised in the other discussion).
  4. A message will be send across the 'wire' to the media recorder node. That message contains the selected device (i.e. front camera) and the socketid (that identifies which client has send a new selection).
  5. The media recorder node sends the changed setting to the client side, but only to the client that has requested the new device (based on the socketid).
  6. The client side of the Media-Recorder node starts capturing images from the selected device (front camera).

Does this mechanism make sense?