test: vonage 语音

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@dckj/react-better-modal": "^0.1.2",
     "@lexical/react": "^0.20.0",
+    "@vonage/client-sdk": "^2.0.0",
     "antd": "^5.22.2",
     "dayjs": "^1.11.13",
     "dingtalk-jsapi": "^3.0.41",
@@ -29,7 +30,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vonage/client-sdk": "^2.0.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.37.2",

src/config.js

@@ -21,7 +21,7 @@ export const EMAIL_HOST = 'https://p9axztuwd7x8a7.mycht.cn/mail-server/service-m
 export const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server/v2';
 export const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_server'; // prod:
 // export const VONAGE_URL = 'https://p9axztuwd7x8a7.mycht.cn/vonage-server'; // 语音和视频接口:
-export const VONAGE_URL = 'http://ias8ad.natappfree.cc'; // 语音和视频接口:
+export const VONAGE_URL = 'http://p6t3mr.natappfree.cc'; // 语音和视频接口:
 export const HT3 =  process.env.NODE_ENV === 'production' ? 'https://p9axztuwd7x8a7.mycht.cn/ht3' : 'http://127.0.0.1:8000';
 
 export const DATE_FORMAT = 'YYYY-MM-DD';

src/stores/CallCenterStore.js

@@ -1,24 +1,34 @@
 import { create } from "zustand";
-import { VonageClient, LoggingLevel } from "@vonage/client-sdk";
+import { VonageClient, ClientConfig, ConfigRegion, LoggingLevel } from '@vonage/client-sdk'
 import { fetchJSON } from "@/utils/request";
 import { prepareUrl, isNotEmpty, } from "@/utils/commons";
 import { VONAGE_URL, DATETIME_FORMAT } from "@/config";
 import dayjs from "dayjs";
 
 const callCenterStore = create((set, get) => ({
-	client: new VonageClient({
-    region: "AP",
-    // apiUrl: "https://api-ap-3.vonage.com", websocketUrl: "wss://ws-ap-3.vonage.com",
-    loggingLevel: LoggingLevel.Debug,
-  }),
+  client: null,
+	// client: new VonageClient({
+  //   region: "AP",
+  //   // 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, log } = get();
+		const { client: _client, log } = get();
 		set({ loading: true });
+    const vonageConfig = new ClientConfig(ConfigRegion.AP);
+    const client = new VonageClient({
+      loggingLevel: LoggingLevel.DEBUG,
+      region: ConfigRegion.AP,
+    })
+    console.log('vonageConfig', vonageConfig);
+    // Or update some options after initialization.
+    client.setConfig(vonageConfig);
+
 		const fetchUrl = prepareUrl(VONAGE_URL + "/jwt")
 			.append("user_id", user_id)
 			.build();
@@ -65,7 +75,7 @@ const callCenterStore = create((set, get) => ({
 			} else {
 				throw new Error("请求jwt失败");
 			}
-			set({ loading: false });
+			set({ loading: false, client });
 		});
 	},
 

src/views/CallCenter.jsx

@@ -7,6 +7,8 @@ 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();
@@ -33,6 +35,7 @@ const CallCenter = props => {
 
 	return (
 		<>
+    <App />
 			<br />
 			<Row gutter={16}>
 				<Col md={24} lg={8} xxl={9}></Col>

src/views/test/App.css

@@ -0,0 +1,48 @@
+#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

@@ -0,0 +1,69 @@
+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