Visualize Audio of a Confrence

OpenVidu v2 How to implement?
1

Hello,
We are using OpenVIDU for our conferencing solution now we have a requirement where we would like to Visualize the audio receivied from peer in collective manner.
Please let me know if there is any sample available for generating waveforms from openvidu stream.

2

Hello,

You could use the Web Audio API, using as sources the <video> elements created by OpenVidu. Then create an analyzer on the same AudioContext and draw the visualization on a <canvas>.

Good luck,
Mihail

1 Like
3

Just found this really nice and comprehensive Web Audio API tutorial:

2 Likes
4

http://kopiro.github.io/siriwave/ is based on WebAudio and works fine in our project.

2 Likes
5

hello , i have issue using as source the video

function () {
var context = new AudioContext();
var visCanvas = document.getElementById(ā€˜visualizerā€™);
var visualizer = new App.FrequencyVisualizer(context, visCanvas);
var gain = 20; // Gain initial en pourcentage (max 100%)
var audioSource = document.getElementsById(ā€œlocal-video-undefinedā€);

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

            if (navigator.getUserMedia) {
                navigator.getUserMedia(
                        {
                            audio: true,
                            video: false
                        },
                        function (stream) {

// audioSource = context.createMediaStreamSource(stream);
// audioSource = audioSource(stream);
visualizer.acceptConnection(audioSource);
},
function (err) {
console.log('Error initializing user media stream: ā€™ + err);
}
);
}

            // Visualisation du Gain
            visualizer.gain = gain;
            var gainDisplay = document.getElementById('gain-display');
            gainDisplay.textContent = gain + ' db';

        })();

Thank you