"Techniques for Streaming Multimedia in HTML5"

[ebidel]

This is Issue 787 moved from the old Google Code project and added by 2012-01-31T20:26:09.000Z by ericbide...@html5rocks.com. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, New, Tutorial, Milestone-X

Original description

- media source api
- binary web sockets

[cwilso]

updated title.

[ebidel]

Update: I've got "Techniques for Streaming Multimedia in HTML5" about 75% done. It's his article is about 'streaming' non-live audio using Media Source and an existing audio file. When getUserMedia support is in, that would be a cool add.

[benbro]

Any chance you can share your code?

[ebidel]

Still working on this article. Sorry for the delay. I got sidetracked with a few web component articles coming down the queue.

[benbro]

Is your code similar to this? https://github.com/agektmr/AudioStreamer What browsers does your method support?

[ebidel]

I think it's a bit different from Eiji's. He uses frames, I send chunks of an audio file across a binary websocket and piece it back together on the other end. Code is here:

https://github.com/ebidel/html5can/tree/master/demos/audio_streamer

On Sat, Feb 23, 2013 at 1:04 PM, benbro notifications@github.com wrote:

Is your code similar to this? https://github.com/agektmr/AudioStreamer

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-13997719.

[benbro]

What's the difference between using frames and chunks?

[ebidel]

I believe his approach was to use binary framing, mixing in control commands with the actual binary data of the audio. My approach was to keep those separate.

On Sat, Feb 23, 2013 at 1:41 PM, benbro notifications@github.com wrote:

What's the difference between using frames and chunks?

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-13998406.

[benbro]

Is this just a prof of concept or can I actually use this for audio chat? Maybe even on mobile browsers (assuming support for audio api) I mean, is the performance reasonable?

[cwilso]

IIRC, Eiji doesn't do adaptive streaming in it - so it kinda depends on your scenario.

On Sat, Feb 23, 2013 at 2:27 PM, benbro notifications@github.com wrote:

Is this just a prof of concept or can I actually use this for audio chat? Maybe even on mobile browsers (assuming support for audio api)

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-13999275.

[benbro]

Does Ebidel's approach support adaptive streaming? By adaptive streaming you mean that the broadcaster changes the stream rate according to his network connection and CPU? How can you achieve this in JS? Can Flash do it?

[ebidel]

My approach is not that sophisticated. You really want webrtc for broadcasting. On Feb 24, 2013 7:15 AM, "benbro" notifications@github.com wrote:

Does Ebidel's approach support adaptive streaming? By adaptive streaming you mean that the broadcaster changes the stream rate according to his network connection and CPU? How can you achieve this in JS? Can Flash do it?

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-14009795.

[benbro]

webrtc is the way to go but I wonder if I can use your approach in the meantime to be able to broadcast and play audio and video in a much simpler way for many-to-many chat room.

[agektmr]

As I mentioned in my repo's issue, you really need a good way to compress data. It could be js based compression, but depends on the performance. Thought WebSocket itself provides way to compress data under the hood, it doesn't necessarily suit audio compression.

There are a lot of other things you have to think about to achieve what you are trying to achieve:

• distance between client and server
• echo canceling, otherwise you get howled
• compression, also for video

I agree with Eric just to use WebRTC for this purpose.

[samdutton]

+1 to WebRTC :^}…

getUserMedia and RTCPeerConnection now in Chrome desktop (Stable) interoperable with Firefox (Nightly). RTCDataChannel likewise. Mobile to follow.

Sam On 27 Feb 2013 07:27, "Eiji Kitamura" notifications@github.com wrote:

As I mentioned in my repo's issue, you really need a good way to compress data. It could be js based compression, but depends on the performance. Thought WebSocket itself provides way to compress data under the hood, it doesn't necessarily suit audio compression.

There are a lot of other things you have to think about to achieve what you are trying to achieve:

• distance between client and server
• echo canceling, otherwise you get howled
• compression, also for video

I agree with Eric just to use WebRTC for this purpose.

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-14160623 .

[cwilso]

Still planning to do this article? This quarter?

[ebidel]

Yea....... It's been in the works for a while. It'll probably slip to next quarter though.

[samdutton]

Hi @ebidel -- is this still happening, or absorbed in other articles?

[ebidel]

I started some content here: https://github.com/html5rocks/www.html5rocks.com/blob/master/content/tutorials/streaming/multimedia/en/index.md

At this point, I'm up for being co-author if you want to help out. Haven't made much progress on it recently.

[PaulKinlan]

@ebidel what is the status of this? Are we going to do it or shall I close this?

[ebidel]

Let's keep it since the article is started. Eiji and Sam might help finish it off.

On Fri, Aug 2, 2013 at 5:47 AM, Paul Kinlan notifications@github.comwrote:

@ebidel https://github.com/ebidel what is the status of this? Are we going to do it or shall I close this?

— Reply to this email directly or view it on GitHubhttps://github.com/html5rocks/www.html5rocks.com/issues/95#issuecomment-22003391 .