test: vonage 语音

.gitignore

@@ -35,3 +35,6 @@ schema*
 *.zip
 
 .env.*
+
+vonage-client*
+**/test

src/stores/CallCenterStore.js

@@ -6,28 +6,26 @@ import { VONAGE_URL, DATETIME_FORMAT } from "@/config";
 import dayjs from "dayjs";
 
 const callCenterStore = create((set, get) => ({
-  client: null,
+	client: new VonageClient({
-	// client: new VonageClient({
+    region: ConfigRegion.AP,
-  //   region: "AP",
+    // apiUrl: "https://api-ap-3.vonage.com", websocketUrl: "wss://ws-ap-3.vonage.com",
-  //   // apiUrl: "https://api-ap-3.vonage.com", websocketUrl: "wss://ws-ap-3.vonage.com",
     // loggingLevel: LoggingLevel.Debug,
-  // }),
+  }),
 	call_id: 0,
 	loading: false,
 	logs: "",
 
 	//初始化 Vonage
 	init_vonage: user_id => {
-		const { client: _client, log } = get();
+		const { client, log } = get();
 		set({ loading: true });
-    const vonageConfig = new ClientConfig(ConfigRegion.AP);
+    // const client = new VonageClient({
-    const client = new VonageClient({
+      //   loggingLevel: LoggingLevel.DEBUG,
-      loggingLevel: LoggingLevel.DEBUG,
+      //   region: ConfigRegion.AP,
-      region: ConfigRegion.AP,
+      // })
-    })
+    // update some options after initialization.
-    console.log('vonageConfig', vonageConfig);
+    // const vonageConfig = new ClientConfig(ConfigRegion.AP);
-    // Or update some options after initialization.
+    // client.setConfig(vonageConfig);
-    client.setConfig(vonageConfig);
 
 		const fetchUrl = prepareUrl(VONAGE_URL + "/jwt")
 			.append("user_id", user_id)
@@ -45,10 +43,11 @@ const callCenterStore = create((set, get) => ({
 					.catch(error => {
 						log("Error creating session: ", error);
 					});
-        client
+        // debug:
-          .getUser('me')
+        // client
-          .then((user) => log('getUser --me', user))
+        //   .getUser('me')
-          .catch((error) => log);
+        //   .then((user) => log('getUser --me', user))
+        //   .catch((error) => log);
 
 				client.on("sessionError", reason => {
 					// After creating a session
@@ -96,7 +95,6 @@ const callCenterStore = create((set, get) => ({
 		if (client) {
 			set({ loading: true });
 			client
-				// .serverCall({ to: phone_number, callee: phone_number, device_name: 'SalesCRM' })
 				.serverCall({ to: phone_number, })
 				.then(callId => {
 					log("Id of created call: ", callId);

src/views/CallCenter.jsx

@@ -7,8 +7,6 @@ import { isEmpty } from "@/utils/commons";
 import callCenterStore from "@/stores/CallCenterStore";
 import useAuthStore from "@/stores/AuthStore";
 
-import App from '@/views/test/App';
-
 const CallCenter = props => {
 	const href = useHref();
 	const navigate = useNavigate();
@@ -35,7 +33,6 @@ const CallCenter = props => {
 
 	return (
 		<>
-    <App />
 			<br />
 			<Row gutter={16}>
 				<Col md={24} lg={8} xxl={9}></Col>

src/views/test/App.css

@@ -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;
-}

src/views/test/App.jsx

@@ -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

vonage-server/README.md

@@ -20,7 +20,6 @@ User ID                                   Name
 USR-4476dbcc-8e2a-4048-ac8a-8ab49345167a  HighlightsTravel
 USR-a778518f-6d94-43b8-ab3c-413e6af8f10a  NAM-3f97db93-da89-4937-b457-14be72b7b62b
 USR-9f60dff4-78c3-40c8-9aad-f762df371728  NAM-c54db270-643a-43a6-883e-b8c28d292dbe
-USR-2e2e267c-e718-4114-b488-bc6677541fd4  Highlights
 
 Done Listing users
 ```

vonage-server/index.js

@@ -55,8 +55,8 @@ app.get("/voice/answer", (req, res) => {
 		},
 		{
 			action: "record",
-			// eventUrl: [`${req.protocol}://${req.get("host")}/vonage-server/voice/recordings`],
+			eventUrl: [`${req.protocol}://${req.get("host")}/vonage-server/voice/recordings`],
-			eventUrl: [`${req.protocol}://${req.get("host")}/voice/recordings`],
+			// eventUrl: [`${req.protocol}://${req.get("host")}/voice/recordings`], // test: 0
 		},
 		{
 			action: "connect",
@@ -76,7 +76,8 @@ app.get("/jwt", (req, res) => {
 		acl: aclPaths,
 	});
 	console.log(Math.round(exp_time.getTime() / 1000));
-	console.log(token.substring(0, 5));
+	// console.log(token);
+	console.log('token ✅');
 	console.log("---");
   const result = response({ token, status: 200});
 	res.json(result);