Audio Visualizer for WebRTC - html

I am trying to use www.rtcmulticonnection.org, spefically: http://www.rtcmulticonnection.org/docs/onstream/
I want to be able to grab the video element and connect it to a frequency analyzer.
I have tried $("video").get(0).connect
But that is not even a function, attempting on chrome. I do have an audiocontext, and a webrtc connection working. Any thoughts?

Are you looking for something like this example which queries a local stream volume using the WebAudio API?
In Chrome this has only been recently (M49 or M50) been fixed to work with remote streams received via a RTCPeerConnection.
Note that you will need the MediaStream object typically, not the video element.

Related

IP camera multicast stream on web

We are developing a project and a part of this project is showing live preview on web page. I should use multicast stream because there will be too many clients and none of them will directly connect to camera. I want to use multicast property of camera and no need to increase network traffic. I want to this very simple, I mean I want to show the stream on html img tag or something like this and give the source path (for ex : ) multicast IP address of the camera. I googled and could not find any clear solution. By the way I want to support all browsers so html img tag I prefered. I do not want to embed any video stream plugin because cross platform supporting. I need ideas or suggestion and a clear example. Thanks in advance..
There are many ways,
you can directly insert rtsp link inside your webpage using vlc plugin or Quicktime plugin, or you can make a server to read stream from the camera(may be using nodejs or gstreamer or opencv etc) and broadcast it to a http ip or send it in base64 images to webport and on the website you can read it using websockets, socket.io library

How do you change source in a web audio context

I'm making a game that changes some of it's object depending on what music is playing. After each song has ended I want my audio context to load in a new source and analyze that. However whenever I tried to do that I've gotten the error that an audio object or buffer can't be called twice.
After some researching I learned that ctx.createMediaElementSource(MyHTML5AudioEl) lets you create a sourceNode that takes the source from a HTML5 object. With this I was able to loop through different song.
However for my game I need to play/analyze a 30 seconds "remote url" that comes out of the Spotify API. I might be wrong but ctx.createMediaElementSource(MyHTML5AudioEl)does not allow you to analyze a source that is on a remote site.
Also the game needs to work on Mobile Chrome, which createMediaElementSource(MyHTML5AudioEl) does not seem to work on.
I might be on the completely wrong path here but my main question is:
How can I switch remote songs urls in web audio api. With it being compatible with mobile chrome.
Thanks!
First, as you found out, you can't set the buffer again for an AudioBufferSource. The solution is to create a new one. AudioBufferSources are intended to be light-weight objects that you can easily create and use.
Second, in Chrome 42 and newer, createMediaElementSource requires appropriate CORS access so you have to make sure the remote url sends the appropriate headers and you set the crossOrigin attribute appropriately.
Finally, Mobile Chrome currently does not pass the data from an audio element through createMediaElementSource.

HTML5 Audio recording getUserMedia with rezorder.js provide empty WAV file

I'm recording audio with HTML5 getUserMedia function. My code is similar to example in https://github.com/rokgregoric/html5record/archive/master.zip, server receives correct Wav data. However all the data received are 0.
What the issue could be? I'm trying with Chrome 23.0.1271.95, my OS is Win7.
I've found similar issue described here: http://www.smartjava.org/content/record-audio-using-webrtc-chrome-and-speech-recognition-websockets# but it doesn't help in my case.
By the way examples based on record.js are not working for me too. The record went fine, but during playback there is only silence, same as for my server side record.
Pretty sure you need to be running Chrome Canary for getUserMedia. You'll also need to go to chrome://flags and make sure Web Audio Input is enabled.

Record Video from Browser using Webcam and Microfone inputs

I need to record a video through user browser using input from camera and microphone and send to my server. Since html5 still doesn't make that magic happen, I'm looking for flash solutions.
Do I really need some flash media server to do that, or can I do a POST request?
I want to get both inputs(webcam and microphone), put them in a .flv and send to my server.
I've seen some implementations using bytearrays to record and send, audio and video separated. The problem is that it generates a series of synchronization problems when you try to compose them in a single file.
If you're still looking for a solution check out:
http://framebase.io
They have an embed-able recording widget that can transcode the videos automatically. I'd check out the docs, but on success, you can run an API call to check the status of transcoding and download it to your server or you can just use your own S3 bucket.

Capturing Microphone Using Html 5 and broadcast using socket.io

I am currently developing Virtual Classroom with whiteboard,video/audio conferencing. How can I capture microphone using HTML5,Javascript. How can i create base64 encoded string from microphone ? I already capture video image from tag and draw on canvas and received base64 encoded string and broadcast to all students and its works. is any similar way for audio tag also ? i would like to broadcast teacher microphone voice to whole class using socket.io. I found number of tutorial but every body explain about video not audio :( . I am using Chrome -v 21 and able to use webkit.
Thanks in advance
The Stream API should allow you to do this but unfortunately it's not supported in any of the current (stable) browsers. You could download the nightly build of Google Chrome which definitely includes some support for the API, though how complete I'm not sure.
I'm guessing it shouldn't be too long until plugins for node start appearing to help with the handling of this stuff on the server side, but meantime the following might be useful:
Streaming audio from a Node.js server to HTML5 tag
A Node.js module for parsing and/or injecting metadata into SHOUTcast/Icecast radio streams.
Streaming audio using Firefox Audio Data API + Node.js + WebSocket + Redis Pub/Sub
Update:
http://code.google.com/p/chromium/issues/detail?id=112367
This issue is being worked making it stable for windows platform too, but working on Mac.