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?
-
1Gert 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.– SMiLENov 22, 2010 at 3:30
-
1Oops, forgot to mention that I'm interested in live streaming, not just streaming of some video stored in a file. Can <video> offer that?– SMiLENov 22, 2010 at 3:45
-
2I 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, 2010 at 4:47
-
4To the speed naysayers, these are examples of fast frame and video rates using HTML 5: The Wilderness Downtown (Chrome, video) thewildernessdowntown.com and Quake in HTML 5 (Chrome, frame rate) 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 KNov 24, 2010 at 4:07
-
2Thanks for the examples, John K.– SMiLENov 24, 2010 at 6:40
5 Answers
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.
-
4This 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.– SMiLENov 24, 2010 at 5:24
-
1Yea.. 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. Nov 24, 2010 at 5: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?– AlistairFeb 15, 2012 at 13:54
-
@WouterDorgelo what's your app performance when doing HD streaming over websockets?– quarksApr 26, 2020 at 17:04
-
1Can we record video in
CCTV
and show it live in web page usingJavascript
?– Shaiju TAug 1, 2020 at 12:12
The Media Source Extensions has been proposed which would allow for Adaptive Bitrate Streaming implementations.
-
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: phoboslab.org/log/2013/09/… Jul 27, 2015 at 16:15
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.
-
1So, 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. May 8, 2020 at 20:22
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.
-
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.– SMiLENov 24, 2010 at 5:37
-
I have to agree with Josh.. If you are in desperate need of streaming media right now, don't go for HTML5. Nov 24, 2010 at 5:50
-
9Just 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.– ntninjaOct 25, 2016 at 13:29
-
6And if anyone is still reading this, that day has come. For the love of god don't use silverlight– ZannithMar 12, 2020 at 21:44
-
And if still anyone is reading this, you can test this here: whatwebcando.today/camera-microphone.html It even works on Apple for a change!! :)– ALZlperApr 18, 2021 at 12:01