Is it possible in any current browser (including, for instance, Chrome Canary)?
All the working examples I've seen are speech-to-text. Is there anything to either record audio or stream it to a server?
Update 4/30/2012:
The getUserMedia API is sloowwwwly making its way into browsers. It is in the latest version of Opera and apparently is in-progress in Chromium.
If you want a taste of how it will work, see: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
There doesn't seem to be an implementation of this in current browsers.
There is a JavaScript API for getting access to microphone and camera planned:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video-conferencing-and-peer-to-peer-communication.html#obtaining-local-multimedia-content
Also, have a look at this question:
How do I access navigator.getUserMedia()?
The standard versions of Chrome and Firefox fully support navigator.getUserMedia();
Numerous examples have been already made to record audio directly in the browser, in several formats even.
Here are a few examples:
This is a fully oriented project towards testing the limits and possibilities of the current state of webRTC
https://www.webrtc-experiment.com/RecordRTC/
I've personally made a record to mp3 library in JS sources can be found here:
https://github.com/nusofthq/Recordmp3js
Also for updates you can check the latest MediaStream Recording API proposal by the Media Capture Task Force. This is not yet implemented in the current browsers but it will in the near future.
Related
I have been doing a lot of research into WebRTC for a project I am currently working on. I am aware that it is only supported in Chrome, Firefox, and now Opera. However, I am wondering if their is a cross-browser viewer solution that does not require a plugin. This way I could require that broadcasts be done from a webRTC compliant browser but viewers could use other browsers such as Safari or IE with watching/viewing capabilities only.
The application I am working on is used for small group broadcasts of 25 or less people with a single publisher/presenter.
Here is a list of the options/ideas so far.
Somehow have a html5 canvas element display the frames of the video on non-webRTC supported browsers. However, I also need to support audio as well and I don't believe there is anyway as of right now to feed the audio stream into the HTML5 audio element. This option may be dead before it is even considered...
Have a server subscribe to the webrtc stream and then create a HLS (HTTP Live Stream) stream that can then be consumed by a browser player (Possibly Flowplayer, it supports cross-browser HLS to the best of my knowledge). I have found that Web Call Server 4 from the guys at Flashphoner can do the conversion to HLS but it seems like overkill for a simple server that does the WebRTC to HLS conversion. Hoping that there may be some sort of node.js implementation out there to generate the playlist and files for HLS so there is low latency.
Any help from the community on this would be much appreciated. The question is pretty specific and I have been researching solutions for the last 2 months so I think it warrants a stack overflow post at this point.
-- UPDATE
There may be a 3rd option here, having users on non-webrtc supported browsers install a plugin. This would only be for Safari and IE but it may be a solution. One free plugin that can be distributed for an app based on my findings are [link]https://github.com/sarandogou/webrtc-everywhere It may be possible to use this plugin with something like Kuento for signalling and achieve a solution that will at least work on all desktop browsers until Safari and IE catch-up with WebRTC.
I've recently been looking into doing some Audio processing and visualization in a web browser as a sort of pet project. Of course, I immediately googled to see what other people had done in this area. Most of the demos are a few years old. Many of the packages either don't work anymore or are (in my opinion) needlessly complex. The tag doesn't seem to support anything which allows me to access the audio data as it plays.
Does anyone know if a simple way has come about which someone can create an event callback which fires every time new audio data starts playing within a given waveform?
Unfortunately the Mozilla Audio Data API doesn't seem to be supported in Chrome (which is the primary browser I like to use). None of the events properly register and they never fire.
I'd really prefer to not have to reverse engineer stuff like this when all I want to do is create a very simple waveform display.
Any advice/recommendations for simple libraries or functions which I may not be finding would be much appreciated! I promise I've googled this for a few days now without finding any good, obvious solutions!
You want the web audio API (HTML5 rocks tutorial) which unfortunately is only partially supported in Firefox, Chrome and Safari currently.
No doubt the Mozilla audio API has helped to shape the W3 proposal but is now deprecated in favour, I'm guessing, of the implementation of the emerging W3 standard.
I'm trying to build a html5 app, part of it requires the recording of audios whose length should be up to a minute and then encode it into 64 based, so I did quite a bit searching and didn't find a good answer.
Are there any ways to record an audio with Html5, Javascript or maybe local APIs on a html5 app, especially on an IOS device?
Html5 doesn't yet have a widely accepted method of recording audio. If you are targeting non-iOS, you can use flash, or any number of javascript wrappers that call out to flash( eg. http://www.sajithmr.me/jrecorder-jquery I think soundmanager2 will also work, but I'm not sure). For iOS, you still need to write an app. :(
Short answer is no for now. Because audio not yet implemented to HTML5 browsers yet.
Method is working but you can't capture any audio.
Well here is a detailed answer for you: Recording html5 audio
This may be too late for a response, but having said that, both Chrome and Firefox now fully support getUserMedia and you can use it along with the AudioContext interface if needed, to capture audio directly from the browser.
The following gitHub project records audio and saves it in MP3 format directly in the browser using just HTML5 and JS.
The audio recording is saved in base64 and can also be directly listened to from the browser after the recording is made.
The project can be found here:
https://github.com/nusofthq/Recordmp3js
and is an extension of RecorderJS that also uses libmp3lame.js.
If you wish you can read more details about the actual implementation:
http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
According to this question, WebRTC is apparently already partly implemented on a development versions of FireFox, Chrome and Opera.
However, I read that video recording from device is not yet supported in the Chrome Canary build. Are there any implementations that allow for that at this stage?
A very late answer but alot is happening in this area so I thought I could give an update to those (like me) that finds this question by searching.
You can try using
RecordRTC
The video can be save to disk by using the saveToDisk function described in the link below:
http://muaz-khan.blogspot.se/2012/10/save-files-on-disk-using-javascript-or.html
The API for this is still up in the air, and as a result, isn't on Chrome's WebRTC v1 feature list. See http://blog.chromium.org/2012/01/real-time-communications-in-chrome.html
Full disclosure: I work for Ziggeo.
Ziggeo has a video recording api. We use WebRTC for recording on Chrome, Opera and Firefox, fall back to Flash on other desktop browsers and use input capture on mobile devices.
You can also roll your own WebRTC solution:
on Chrome and Opera, you have to record audio and video separately and encode them yourself in JS; then, send them to your servers and transcode them using e.g. ffmpeg to mp4s and other target formats
on Firefox, you can get a webm object for video and audio combined and send it to your servers.
You are looking for PeerConnection support, which lets you send audio/video (and other data) to peers (such as servers or other users.)
WebRTC PeerConnection support (without flags) landed in Chrome 23 as detailed in this Chromium blog post from October 2012.
At the moment only OpenTok and Lynckia are providing (beta-versions of) servers/services to record video with WebRTC.
From the existing major streaming servers only Wowza indicated that they are monitoring WebRTC but don't yet have plans for implementing it.
The answer, for now it seems, is "No". Chrome Canary is the furthest when it comes to implementing WebRTC, and they haven't built it either .
I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.