Forums » Help » volume meter component

Hey to all,
i am trying to implement a volume meter component into my game.

I try to use Chris Wilson's Volume meter JS code.

Actually i am not able to activate the dialog for getting the dialog for allowing audio input from within ImpactJS main.js.

This is what i expect to show up after "navigator.getUserMedia "
in main.js - init - i am trying to initialize it:
// Web Audio
this.AudioContext = window.AudioContext || window.webkitAudioContext;
// grab an audio context
this.audioContext = new AudioContext();
// getUserMedia
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);

ig.normalizeVendorAttribute(navigator, 'getUserMedia');

...
..
.
##

But nothing is asking for permission in my browser...

Can anyone point me in the direction please?

nightbyter

No errors in the console?

Hello Joncom,

console.log('User Platform: ' + navigator.platform);
console.log('User UserAgent: ' + navigator.userAgent );
console.log('CodeName: ' + navigator.appCodeName );
console.log('ProductName: ' + navigator.product );

retuns this: ->

User Platform: MacIntel
User UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
CodeName: Mozilla
ProductName: Gecko

		navigator.getUserMedia = ( navigator.getUserMedia ||
		navigator.mozGetUserMedia ||
		navigator.webkitGetUserMedia ||
		navigator.msGetUserMedia);

		console.log('getUserMedia: ' + navigator.getUserMedia);

		//ig.normalizeVendorAttribute(navigator, 'getUserMedia');

		this.AudioContext = window.AudioContext || window.webkitAudioContext;
		// grab an audio context
		this.audioContext = new AudioContext();


		console.log('this.AudioContext: ' + this.AudioContext);
		console.log('this.audioContext: ' + this.audioContext);

returns this: ->

getUserMedia: function webkitGetUserMedia() { [native code] }
this.AudioContext: function AudioContext() { [native code] }
this.audioContext: [object AudioContext]

	gotStream: function(stream) {
		console.log('Stream generation!.' + stream);
		var microphone = this.audioContext.createMediaStreamSource(stream);

		// Create a new volume meter and connect it.
		meter = createAudioMeter(audioContext);
		microphone.connect(meter);

		// kick off the visual updating
		this.drawLoop();
			// Create an AudioNode from the stream.

	},

returns this: ->

Stream generation!.undefined

Uncaught InvalidStateError: Failed to execute 'createMediaStreamSource' on 'AudioContext': invalid MediaStream source

thank you for any idea …..

nightbyter

Hello again,
this is the actual update …

update: function () {
		// Update all entities and backgroundMaps
		this.parent();

		//var dummy = ig.getVendorAttribute(navigator, getUserMedia);
		//console.log('Attribute is: ' + this.dummy); // dosn’t work

		if (!navigator.getUserMedia) {
			// No getUserMedia support; nothing to do here
			//console.log('No getUserMedia support; nothing to do here - I am going home...');
			this.didntGetStream()

		}

		if (navigator.getUserMedia) {			// ask for an audio input
			(navigator.getUserMedia(
				{
					video: false,
					audio: true
				}, this.gotStream(), this.didntGetStream()));
		}

nightbyter

I think it's because you're not passing in your functions, you're executing them. By writing this.gotStream() you're invoking it and not passing in a stream. That's what the Stream generation!.undefined message means.

Use this instead:

if (navigator.getUserMedia) {
  navigator.getUserMedia({video: false, audio: true}, this.gotStream.bind(this), this.didntGetStream.bind(this));
}

You need to bind the callbacks (this.gotStream and this.didntGetStream) to the object in this or else you'll lose their context when they're called as callbacks.

If that still doesn't work, try using this getUserMedia polyfill instead and see if you get different results.