test: vonage 语音
Lei OT
2 months ago
parent
4055a20cd7
commit
9971e92633
@ -1,48 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 1em;
|
||||
padding: .5rem;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import { VonageClient, ClientConfig, ConfigRegion, LoggingLevel } from '@vonage/client-sdk'
|
||||
import { useState, useEffect } from 'react'
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
const [config] = useState(() => new ClientConfig(ConfigRegion.AP))
|
||||
const [client] = useState(() => {
|
||||
// Initialize client with optional config (default: ERROR logging, US region).
|
||||
const client = new VonageClient({
|
||||
loggingLevel: LoggingLevel.DEBUG,
|
||||
region: ConfigRegion.AP,
|
||||
})
|
||||
// Or update some options after initialization.
|
||||
client.setConfig(config)
|
||||
return client
|
||||
})
|
||||
const [session, setSession] = useState()
|
||||
const [user, setUser] = useState()
|
||||
const [error, setError] = useState()
|
||||
const [callId, setCallId] = useState();
|
||||
|
||||
const jwt =
|
||||
'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDU3MTg1NjQsInN1YiI6IkhpZ2hsaWdodHMiLCJhY2wiOnsicGF0aHMiOnsiLyovcnRjLyoqIjp7fSwiLyovdXNlcnMvKioiOnt9LCIvKi9jb252ZXJzYXRpb25zLyoqIjp7fSwiLyovc2Vzc2lvbnMvKioiOnt9LCIvKi9kZXZpY2VzLyoqIjp7fSwiLyovaW1hZ2UvKioiOnt9LCIvKi9tZWRpYS8qKiI6e30sIi8qL2tub2NraW5nLyoqIjp7fSwiLyovbGVncy8qKiI6e319fSwianRpIjoiOGIzNTkzNDctYWM1Yi00MTNiLTk5ZTktZGVjNTAwMTgyNTBlIiwiaWF0IjoxNzQ1NDU5MzY0LCJhcHBsaWNhdGlvbl9pZCI6IjUwM2M1NDhmLWNiNjEtNGEzYS04NTk5LWNkODE1NjgwYjM5MCJ9.Btda0Ip4iPsY3NbksBApd2RwTtpEqpyqJ2yMQWYr8RlbFkmqfnbB9i8d66bNBfuTOlRImck1pCmYP3o0bZjwhb0BrMxemkkScyj8ZWCdxTWcVa7c_-zqUd3plU3IGIjMbMUoPd8S_buft5Eyt8IlUqSWrfiQbttcrFLc0HevRGGluj3hWop_VXmuda6ah3_3wA45EkplAYBDEunxh5xzzyTVPz5dW8Psk7L5e1iZp7MHTPwM6XOlmqpeZCJ-riUHEKCfX6hgGF_np2u6UZDq6-3g4w3-TTAEUeNCwlMcde2jePON-uiwGS6usl8zv44XwuuJjkC_CK4l9h6Q8FZOQg'
|
||||
|
||||
// Create Session as soon as client is available
|
||||
useEffect(() => {
|
||||
if (!client) return
|
||||
client
|
||||
.createSession(jwt)
|
||||
.then((session) => setSession(session))
|
||||
.catch((error) => setError(error))
|
||||
}, [client])
|
||||
|
||||
// Get User as soon as a session is available
|
||||
useEffect(() => {
|
||||
if (!client || !session) return
|
||||
client
|
||||
.getUser('me')
|
||||
.then((user) => setUser(user))
|
||||
.catch((error) => setError(error))
|
||||
}, [client, session])
|
||||
|
||||
if (error) return <pre>{JSON.stringify(error)}</pre>
|
||||
|
||||
if (!session || !user) return <div>Loading...</div>
|
||||
|
||||
const makeCall = async () => {
|
||||
const context = {
|
||||
callee: 'user1'
|
||||
// to: '6586086761',
|
||||
};
|
||||
|
||||
const callId = await client.serverCall(context);
|
||||
setCallId(callId);
|
||||
return callId;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='root'>
|
||||
<p>User <b>{user.displayName || user.name}</b> logged in</p>
|
||||
<p>Session <b>{session}</b> created</p>
|
||||
<input type='text' className='input' />
|
||||
<button className='button' onClick={() => makeCall()}>拨号</button>
|
||||
<p>Call <b>{callId}</b> created</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Loading…
Reference in New Issue