CODEWITHSUNDEEP
javascripthtmlhtml5-videowebrtc
DasBoot
DasBoot

Reputation: 707

webrtc streaming video on one side and receiving on another? html5

i was wondering if it is possible to capture video input from a client like the following https://apprtc.appspot.com/?r=91737737, and display it on another so that any viewer can see it, my issue is that i do not have a webcam on my second computer and i would like to receive the video using webrtc. is it possible to capture from one end and capture it on another? perhaps if this isnt possible are websockets the best way to do this?

Upvotes: 3

Views: 5502

Answers (1)

Sev
Sev

Reputation: 1992

I see no reason it shouldn't be possible apart from being imperfect due to performance/bandwidth issues.

The most supported HTML5 solution at the moment I would imagine it be the use of getUserMedia which is available on Chrome (consider getUserMedia.js for broader support on camera input, although I haven't used it)

Scenario

We will have a capturer, a server that broadcasts the stream and the watchers that receive the final stream.

Plan

Capture phase

  1. Use getUserMedia to get data from the camera
  2. Draw it on a canvas (maybe you could skip this)
  3. Post the frame as in the format of image data using websockets (e.x. via socket.io for broader support) to the server (e.x. node.js).

Broadcast phase

  1. Receive the image data and just broadcast to the subscribed watchers

Watch phase

  1. The watcher will have a websocket connection with the server
  2. On every new frame received from the server it will have to draw the received frame to a canvas

Considerations

  1. You should take into account that performance of the network will affect the playback.
  2. You could enforce a FPS rate on the client side to avoid jiggly playback speed.
  3. A buffer pool would be nice if it fits your case for smoother playback.

Future

You could use PeerConnection API, MediaSource API when they become available, since this is why they are made, although that will probably increase the CPU usage depending on the browsers' performance.

Upvotes: 7

Related Questions