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?
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.
The Media Source Extensions has been proposed which would allow for Adaptive Bitrate Streaming implementations.
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.
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.
Related
I am able to record audio direct in the browser from the device-microphone. I am using for this HTML5 (audio-tag) and JavaScript (.getUserMedia). Now I am looking for the best way to stream it live to my shoutcast-server. I found several threads to this topic but they are all >5 years old and do not really solve my problem.
What is the best way to to stream audio live from the browser to a shoutcast server?
The SHOUTcast source protocol is non-standard and cannot be streamed to directly from a browser. Some sort of translating proxy is required.
It's also likely that this proxy will need to transcode the audio as well, as the codecs available to you in-browser are not typically used in SHOUTcast streams.
Is it possible to stream life broadcast video on closed network via WebRTC to webpage 1-many? I used to use VLC and UDP streaming for life video, but all browsers discontinued support for VLC plugin and HTML5 video does not support life streaming. The goal is to use webpage for life video streaming when users only watch that page (no 2 way communication).
Thank you
Yes you can.
This will be more expensive to do (processing power and servers that you'll need), but definitely possible.
Janus and Jitsi are used a lot for it. Red5Pro, nanocosmos and Wowza seem to have suitable offerings in this domain as well.
I'm a bit at my wits end here.
I want to stream a live video broadcast to a web browser.
Currently I use ffmpeg to stream a directshow live source as a webm stream to node.js which then forwards the stream to the http request from the <video> element. So far everything works.
live source -> ffmpeg -> POST [webm] -> node.js -> GET [webm] -> video tag
My problem is that the source clock and the web clients clock doesn't exactly match each other (not that surprising). For video this is not a problem, dropping or duplicating a frame every now and then is not noticeable. However, with audio it is another issue. From what I've been able to figure out so far Chrome (or any other browser) does not perform any form of audio resampling compensation (e.g. swr_set_compensation from ffmpeg) to compensate this mismatch. Instead I get quite audible audio distortions (a loud beep) when the playback buffer runs out of samples.
My question is whether it is possible to achieve proper playback (with audio) of a live source in a web browser?
I haven't tried using silverlight or flash for playback yet. Would that possibly work better?
Live media (audio or/and video) streaming to a web browser has been possible for a couple of years though it is still making progress as of today. It is the next big thing for media on the web and many platforms like Youtube are already on board.
A typical live media streaming scenario is:
audio/video feed > transcoding > streaming > player
At each step you have several technological possibilities available. However I should already mention here that the road to live media streaming is paved with proprietary technologies.
audio/video feed: either raw or very lightly compressed media format and cannot be uploaded as such to the Internet. You need to transcode it. You may have to use a grabbing device like a PCI Express card or USB/thunderbolt device to get your cam onto a computer.
transcoding: you have software (ffmpeg, Flash media live encoder, Wirecast) or hardware solutions (streamingmedia.com has a wealth of information on the subject like here). H264/AAC is the current media professional standard and streams are often transcoded to multiple renditions (bitrate) to suit different network conditions.
streaming: you most likely need to target multiple devices to deliver your live stream. Not all devices support the same streaming protocol. HLS works on Apple devices and Android > 4.1. HDS or RTMP works in Flash, Smooth streaming in Silverlight. You cannot reach all devices with one protocol so in this case you would need a streaming server like Wowza or Red5. A streaming server take as an input a transcoded live stream and prepare it for cross device delivery while sustaining a massive number of simultaneous connections (over a thousand is not uncommon nowadays). It can also add functionalities like DVR or DRM. As of today the effort is around HTTP adaptive bitrate delivery. Large companies add CDN support for global delivery.
player: to display your live stream with various options like custom layout, closed captions, ads, chat module and more. Flash has been leading the market up until now for live media streaming on desktop. You can use HTML5 video for iOS and Android where HLS is supported.
Coming in fast is MPEG DASH and it works live with HTML5 video. There is a JS lib that supports live. I have tested it and it works though I may not use it for a production case scenario just yet as it is still a bit clunky (on demand support is better) and browser support is narrow at the moment (As of 8/30/13, Desktop Chrome, Desktop Internet Explorer 11, and Mobile Chrome Beta for Android are the only browsers supported).
I cannot comment much on your solution because I have not used node.js for streaming but it sounds like an interesting effort. A typical solution I would use relating to your case:
Device > ffmpeg (H264/AAC) > Wowza > Hybrid player (Flash + HTML5).
Instead of Wowza you could use Red5 (free/open source - but not much activity as of late). You can also look into Nginx RTMP module which supports HLS and MPEG DASH on top of RTMP.
For flash I use Strobe from Adobe which support live streaming and is easy to set up and a fallback to HTML5 where flash is not supported. I use SWFObject lib to detect flash support and feed a HLS URL to an HTML5 video tag for mobile devices. You can use RTSP for Android < 4.1 and other mobile devices.
Another thing I should mention is real time communications. For video/audio conferencing you could have a look at WebRTC. Those 2 articles should get you on the right track. Here and here. WebRTC will work great for one to few, one to one, few to few. If you need to support more concurrent connections you can have a look at Licode or tokbox.
I've been experimenting with WebRTC and its ability to stream video/audio using p2p, however I've found that it's not able to stream any resolutions > 720p. Using getUserMedia() I'm able to capture the local webcam in 1080p, but it seems to fail at encoding/decoding in 1080p (I'm not sure which it is) and the client-side displays the video in 1280x720.
There are a few bug reports regarding this issue: Here and here.
Is there a way I can capture the webcam using getUserMedia(), encode the video myself in 1080p and still use WebRTC for its peer-to-peer capabilities?
Basically I'm trying to achieve the same sort of thing shown in this video. That is, live streaming a video and sharing it with other viewers so there's significantly less server/broadcaster bandwidth used. WebRTC seemed the obvious choice for this.
Are there any alternative solutions, besides waiting for the WebRTC bug to be fixed? Thanks.
This issue was resolved on the tickets you posted:
https://code.google.com/p/webrtc/issues/detail?id=1750
Which points to this url for verification.
I would like to create an easy video blogging solution utilizing WebRTC technology to enable recording of video/audio directly from the browser, similar to Youtube's My_Webcam. The server component should be based on Node.js.
I found some Node.js libraries for general WebRTC connection managment (webRTC.io, Holla, EasyRTC), but it seems they don't enable recording of streams on the server.
What's the best way to implement server-side recording? Are there libraries and tutorials available?
This guy has a ton of interesting WebRTC experiments, including audio/video recording: https://github.com/muaz-khan/
Here's a demo of recording: https://www.webrtc-experiment.com/RTCMultiConnection-v1.4-Demos/RecordRTC-and-RTCMultiConnection.html
It collects the audio and video streams on the client and gives you a blob of audio and a blob of video that you can then upload/splice together.
Not exactly what you were hoping for, I think, but could probably get the job done. Hope that helps.
You may use node-webkit to achieve this. Node webkit is essentially a browser in node.js.