98

What is the fastest way to stream live video using JavaScript? Is WebSockets over TCP a fast enough protocol to stream a video of, say, 30fps?

Wouter Dorgelo
  • 11,770
  • 11
  • 62
  • 80
SMiLE
  • 1,073
  • 1
  • 9
  • 8
  • Just curious... why would you want to stream video with JavaScript? – Gert Grenander Nov 22 '10 at 03:28
  • 1
    Gert G: What would you recommend? I'd prefer to keep memory consumption relatively low, that's why JS (updating a HTML5 canvas) seems like a better option, if it can offer a good enough speed. – SMiLE Nov 22 '10 at 03:30
  • Have you looked at the ` – Gert Grenander Nov 22 '10 at 03:35
  • 1
    Oops, forgot to mention that I'm interested in live streaming, not just streaming of some video stored in a file. Can – SMiLE Nov 22 '10 at 03:45
  • 1
    Nope: http://groups.google.com/a/chromium.org/group/chromium-html5/browse_thread/thread/bec3ac48af5766b1 – Simon Epskamp Nov 22 '10 at 03:53
  • I don't think any browser supports live streaming via the – martineno Nov 22 '10 at 03:57
  • Thanks for the information Epskampie and martineno. I assumed that was the case. I am wondering whether direct streaming of the frame data through Javascript WebSockets would be a fast enough way of streaming video. – SMiLE Nov 22 '10 at 04:06
  • @user493592, Absolutely not. Even if you could hack this together, this won't be fast enough. Why not use one of the many solutions currently available, such as streaming video to flash. – Brad Nov 22 '10 at 04:25
  • 2
    I wouldn't be so concerned about the *streaming* part, but rather how you'd *render* video streamed in such a way. Is that even possible? – deceze Nov 22 '10 at 04:47
  • 1
    @Brad: Thanks for your response. I'll probably go with Flash. @deceze: I don't see why not. You have a canvas object and you update it by painting each pixel... – SMiLE Nov 22 '10 at 04:48
  • 1
    @user Now *that's* certainly going to be way too slow. – deceze Nov 22 '10 at 05:31
  • 4
    To the speed naysayers, these are examples of fast frame and video rates using HTML 5: The Wilderness Downtown (Chrome, video) http://www.thewildernessdowntown.com/ and Quake in HTML 5 (Chrome, frame rate) http://techcrunch.com/2010/04/01/google-html5-quake/ A couple proofs of concept. It's only going to improve. Somebody will jump on the bandwagon soon enough and reap the benefits of being an early player in the market, if somebody hasn't already. Would I hold my breath for IE? I dunno' – John K Nov 24 '10 at 04:07
  • +1 I think this is a very worthwhile question as many supporting client side technologies are in their infancy surrounding HTML 5. – John K Nov 24 '10 at 04:13
  • 2
    Thanks for the examples, John K. – SMiLE Nov 24 '10 at 06:40
  • 1
    Thanks for the links John K. Now i love HTML5 even more than I already did. – Sophie Aug 22 '12 at 03:47

5 Answers5

95

Is WebSockets over TCP a fast enough protocol to stream a video of, say, 30fps?

Yes.. it is, take a look at this project. Websockets can easily handle HD videostreaming.. However, you should go for Adaptive Streaming. I explain here how you could implement it.

Currently we're working on a webbased instant messaging application with chat, filesharing and video/webcam support. With some bits and tricks we got streaming media through websockets (used HTML5 Media Capture to get the stream from our webcams).

You need to build a stream API and a Media Stream Transceiver to control the related media processing and transport.

Community
  • 1
  • 1
Wouter Dorgelo
  • 11,770
  • 11
  • 62
  • 80
  • 4
    This is great, thanks! I guess I'm going to try a very basic implementation of video streaming that is not adaptive at all, look at the results, and proceed accordingly; knowing that this is possible is quite encouraging though! Your tutorial is also very helpful. – SMiLE Nov 24 '10 at 05:24
  • 1
    Yea.. it's a good practice to start with a simple application. You will have to build most of the technology needed for live streaming yourself which is probably not an option when you: A. just start and B. are alone. Good luck. – Wouter Dorgelo Nov 24 '10 at 05:54
  • @Mr.Pallazzo what are you building the app for? A business? Any chance I could get in touch with you about how you're doing it? – Alistair Feb 15 '12 at 13:54
  • @WouterDorgelo what's your app performance when doing HD streaming over websockets? – quarks Apr 26 '20 at 17:04
  • 1
    Can we record video in `CCTV` and show it live in web page using `Javascript` ? – Shaiju T Aug 01 '20 at 12:12
1

The Media Source Extensions has been proposed which would allow for Adaptive Bitrate Streaming implementations.

Nick Desaulniers
  • 2,046
  • 3
  • 25
  • 47
  • Is there a ws2video.js project or something like that which shows how fast this goes? This blog post mentions it causes 5s of lag: http://phoboslab.org/log/2013/09/html5-live-video-streaming-via-websockets – Thaddee Tyl Jul 27 '15 at 16:15
0

To answer the question:

What is the fastest way to stream live video using JavaScript? Is WebSockets over TCP a fast enough protocol to stream a video of, say, 30fps?

Yes, Websocket can be used to transmit over 30 fps and even 60 fps.

The main issue with Websocket is that it is low-level and you have to deal with may other issues than just transmitting video chunks. All in all it's a great transport for video and also audio.

quarks
  • 33,478
  • 73
  • 290
  • 513
  • 1
    So, what about the WebRTC? It (as w3c) is working on a UDP connection and if we have some packet loss, it would not be a problem. On the other hand, WebSocket is connection-oriented and it may bother users due to the latency that would be occurred. – M. Rostami May 08 '20 at 20:22
0

When transmitting audio and video, the bottleneck does not exist in the WebSocket protocol.test

kura
  • 11
  • 1
-1

It's definitely conceivable but I am not sure we're there yet. In the meantime, I'd recommend using something like Silverlight with IIS Smooth Streaming. Silverlight is plugin-based, but it works on Windows/OSX/Linux. Some day the HTML5 <video> element will be the way to go, but that will lack support for a little while.

Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
  • Thanks for your response. I agree that Silverlight and Flash are probably better options at this point. I guess I'm interested in Javascript streaming because it opens more possibilities for interactivity between the user and the (video transmitting) server. – SMiLE Nov 24 '10 at 05:37
  • I have to agree with Josh.. If you are in desperate need of streaming media right now, don't go for HTML5. – Wouter Dorgelo Nov 24 '10 at 05:50
  • 9
    Just in case anybody is still reading this: First of Silverlight never supported Linux or mobile systems. Linux silverlight support simply never existed. Secondly, as newer answers point out correctly, HTML5/MSE video streaming is now very well possible in modern browsers and should be preferred in almost all cases over any kind of plugin-based approach. – ntninja Oct 25 '16 at 13:29
  • 6
    And if anyone is still reading this, that day has come. For the love of god don't use silverlight – Zannith Mar 12 '20 at 21:44
  • And if still anyone is reading this, you can test this here: https://whatwebcando.today/camera-microphone.html It even works on Apple for a change!! :) – ALZlper Apr 18 '21 at 12:01