使用chirp-js-sdk
Next.js 不是问题,但由于我的应用程序需要接收chirp
浏览器发送的数据,因此我不得不使用 WebAssembly SDK。我在哪里以及如何实例化和使用chirpsdk
?
按照此处的说明进行设置,我没有遇到任何问题。但是,不会调用onReceived
,回调。onReceiving
这是我正在使用的页面的片段chirpsdk
。
class AttendEvent extends Component {
static async getInitialProps({req, query, res}) {
return {
attendString: query
}
}
constructor() {
super();
this.sdk = null;
this.state = {
user: '',
started: false,
waiting: false,
receiving: false,
received: 'Awaiting messages..',
disabled: false
}
}
toAscii(payload) {
let str = ''
for (let i = 0; i < payload.length; i++) {
str += String.fromCharCode(payload[i])
}
return str
}
async startSDK() {
this.sdk = await import ('../node_modules/chirpsdk/index').then( ({Chirp}) => {
return Chirp({
key: CHIRP_API_KEY,
onReceiving: () => {
console.log('Receving Data');
this.setState({
...this.state,
received: '...',
disabled: true
})
},
onReceived: data => {
console.log("Received Data");
if (data.length > 0) {
this.setState({
...this.state,
received: this.toAscii(data),
disabled: false
})
} else {
this.setState({
...this.state,
received: `I didn't hear that. Try turning the volume up?`,
disabled: false
})
}
}
})
})
this.setState({
...this.state,
started: true
})
}
componentDidMount() {
loadFirebase().auth().onAuthStateChanged(user => {
if (user) {
this.setState({
...this.state,
user: user
})
return user
.getIdToken()
.then(token => {
return fetch('/api/login', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
credentials: 'same-origin',
body: JSON.stringify({ token })
})
})
} else {
Router.push('/');
}
})
this.setState({
...this.state,
waiting: true
})
}
handleLogout() {
loadFirebase().auth().signOut()
}
render() {
const { classes } = this.props;
return (
<React.Fragment>
<Navbar page="AttendEvent" />
{
this.state.user !== null ? (
<Grid
container
spacing={0}
direction="row"
alignItems="center"
justify="center"
style={{ minHeight: '90vh' }}
>
<Typography variant="h1">
{
this.state.waiting ? "Waiting for code..." : (this.state.receiving ? "Receiving code...": (this.state.received ? this.state.received : "Mounting...") )
}
</Typography> <br/>
<Button variant="contained" color="primary" onClick={() => {
this.startSDK()
}}>
START
</Button>
</Grid>) : true
}
</React.Fragment>);
}
}
我希望onReceived
在接收16kHz-mono
音频消息时调用回调,但它没有被调用。