Comments (13)
Also, once you integrate that, try using hooks instead of class components. Let us know if you face any issues.
from incogly.
Hello there!π Welcome to the project!πβ‘
Thank you and congratsπfor opening your very first issue in this project. Please adhere to our Contributing Guidelines.π You may submit a PR if you like, make sure to follow our Pull Request Template. If you want to report a bugπ please follow our Issue Template. Also make sure you include steps to reproduce it and be patient while we get back to you.π
Feel free to join our Discord Community.π We have different channels for active discussions.β¨ Hope you have a great time there!π
from incogly.
@sansyrox @shivaylamba @raghavdhingra @midopooler
The Audio visualizer thing is working rn. This one is in a separate environment. I just wanna ask that in which part of the video call we should add the visualizer?
from incogly.
@ZohebMOPO , on the screen where you select the username
from incogly.
Yeah sure. I am not in home rn. Will let you know about that :)
from incogly.
I will not be at my house for 2days because of the festival. Like I have changed them to functional components but haven't used the hooks properly. Sorry for that :(
from incogly.
No worries @ZohebMOPO . You can take your time.
from incogly.
import AudioVisualiser from "./Visualizer";
class AudioAnalyser extends Component {
constructor(props) {
super(props);
this.state = { audioData: new Uint8Array(0) };
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
this.analyser = this.audioContext.createAnalyser();
this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
this.source = this.audioContext.createMediaStreamSource(this.props.audio);
this.source.connect(this.analyser);
this.rafId = requestAnimationFrame(this.tick);
}
tick() {
this.analyser.getByteTimeDomainData(this.dataArray);
this.setState({ audioData: this.dataArray });
this.rafId = requestAnimationFrame(this.tick);
}
componentWillUnmount() {
cancelAnimationFrame(this.rafId);
this.analyser.disconnect();
this.source.disconnect();
}
render() {
return <AudioVisualiser audioData={this.state.audioData} />;
}
}
export default AudioAnalyser;
This was the class component, I am literally confused on how to use the DOM updates in useEffect.
Functional component.....
import React, { useState, useEffect } from "react";
import Visualizerf from "./AudioAnalyserf";
function AudioAnalyserf({ audio }) {
const [audioData, setaudioData] = useState(new Uint8Array(0));
const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();
const dataArray = new Uint8Array(analyser.frequencyBinCount);
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
const rafId = requestAnimationFrame(tick);
const tick = () => {
analyser.getByteTimeDomainData(dataArray);
setaudioData(dataArray);
rafId = requestAnimationFrame(this.tick);
};
const unMount = () => {
cancelAnimationFrame(this.rafId);
analyser.disconnect();
source.disconnect();
};
useEffect(() => {
// Idk what I am doing :((((
}, []);
return (
<div>
<Visualizerf audioData={audioData} />
</div>
);
}
export default AudioAnalyserf;
``
from incogly.
How do I make updates using useEffect
@raghavdhingra
from incogly.
useEffect is a life cycle hook. It has a dependency list, over which the function call itself when ever any of the value from that list changes.
For e.g.
const callBackFunction = () => { // do some changes }
const dependencyArray = [value, object, list, ...]
useEffect(callBackFunction, dependencyArray);
So, if any of the values changes within the list via state change, or any hook change, the callback function will call itself. Hence you can define the callback function as per the way you want
from incogly.
Class component:-
class AudioAnalyser extends Component {
constructor(props) {
super(props);
this.state = { audioData: new Uint8Array(0) };
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.audioContext = new (window.AudioContext ||
window.webkitAudioContext)();
this.analyser = this.audioContext.createAnalyser();
this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
this.source = this.audioContext.createMediaStreamSource(this.props.audio);
this.source.connect(this.analyser);
this.rafId = requestAnimationFrame(this.tick);
}
tick() {
this.analyser.getByteTimeDomainData(this.dataArray);
this.setState({ audioData: this.dataArray });
this.rafId = requestAnimationFrame(this.tick);
}
componentWillUnmount() {
cancelAnimationFrame(this.rafId);
this.analyser.disconnect();
this.source.disconnect();
}
render() {
return <AudioVisualiser audioData={this.state.audioData} />;
}
}
export default AudioAnalyser;
import Visualizerf from "./AudioAnalyserf";
function AudioAnalyserf({ audio }) {
const [audioData, setaudioData] = useState(new Uint8Array(0));
const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();
const dataArray = new Uint8Array(analyser.frequencyBinCount);
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
const rafId = requestAnimationFrame(tick);
const tick = () => {
analyser.getByteTimeDomainData(dataArray);
setaudioData(dataArray);
rafId = requestAnimationFrame(tick);
};
const unMount = () => {
cancelAnimationFrame(rafId);
analyser.disconnect();
source.disconnect();
};
useEffect(() => {
return unMount;
}, []);
return (
<div>
<Visualizerf audioData={audioData} />
</div>
);
}
export default AudioAnalyserf;```
so it will look like this?
from incogly.
@raghavdhingra Sorry for the late reply. Schools are going offline and I am kinda stuck in that thing cuz I didn't do anything the whole summer haha. Anyways, will the functional component look like this?
from incogly.
I am hella confused about converting this to functional components. I am used to class components cuz my first programming lang was Java. I am not sure when I will come out of this learning curve :(
from incogly.
Related Issues (20)
- Check why the the app is making us log out on chat send? HOT 6
- Video stream not showing when a second person is being added to the call HOT 5
- Try modulating audio stream for video call HOT 17
- Buttons not working
- Stream behaving weirdly when the room is created by ~3 people. HOT 6
- Router not working correctly HOT 1
- Enter keystroke not mapped with the inputfields. HOT 9
- Clear chat after room exit.
- CI-CD broken HOT 1
- Different Aspect ratios for all the users HOT 2
- Landing page gif broken HOT 14
- Feature Request:- Add Dark theme HOT 1
- Add a feature to kick out the users! HOT 3
- Detecting whether speaking or not
- Cloudflare not working for some reason! HOT 3
- Add username on hover
- Noise cancellation implementation
- Improve the video call screen ui HOT 1
- Port Application to Typescript HOT 2
- add e2e encryption? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from incogly.