DIYクラブハウス:IOS、Androidとさらに統一のために

36979 ワード
unity3d android webdev ios テキストリンク
パンデミックは我々全員を変えた.仕事をして、遠隔で勉強して、我々は生きているコミュニケーションを切望して、我々の友人と同僚を見ます.多分、それは新しい社会的ネットワーク(Clubhouse)が1年未満で600万人以上を集めた理由です.
クラブハウスは、ソーシャルネットワーキングのすべての新しいタイプです.すべてのテキストメッセージは、音声だけで通信します.すべてのコミュニケーションは、いわゆる“客室”で発生します.部屋の所有者(モデレーター)は誰が話すことができるかを決定し、リスナーは“手を上げることができます”彼らは質問をしたいことを示す.
しかし、クラブハウスには制限があります.今のところ、それはIOSのユーザーが利用可能であり、参加するには、既存のユーザーからの招待を受ける必要があります.しかし、もしあなたがAndroidユーザーですか?
彼らはAndroidやデスクトップのバージョンを解放するまで待つことができるか、ブラックジャックのより良いセキュリティ、音声録音、AI、および任意のプラットフォームのサポートを使用して、独自のクラブハウスを作ることができます.とVoximplantはあなたを助ける.
この記事では、クライアントとして一般的なブラウザを使用することができますので、どのようにVoxPumpのWeb SDKとクラブハウスのようなオーディオルームを作成する方法を参照してください.

Please note that Voximplant supports multiple SDKs, from Web, iOS, and Android to React Native, Flutter, and even Unity. Imagine, you can embed an audio (or video) chat into your game design



VoxEngineを設定する
VoxEngineは無制限の通信を可能にするクラウドプラットフォームです.部屋をつくりましょう.Log into your account(またはcreate one)とcreate a new application.そして、認可のcreate a userとa new scenario.
ファーストimport the conference module .次に、ユーザの接続を切断します.
require(Modules.Conference)
let owner = null;
const onEndpointDisconnected = (event)=>{
   const members = conference.getList();
   if(members.length === 1){
       VoxEngine.terminate();
       return;
   }
}
次に、パーミッションチェックを実装します.
const checkPermissions = ({call,headers}) =>{
   return new Promise((resolve)=>{
       setTimeout(()=>{resolve(true)},500);
   });
}
room creationとadding a new userの実装:
let logURL = ''; // for debug reason
let conference = null;
VoxEngine.addEventListener(AppEvents.Started, event => {
   logURL = event.logURL;
   conference = VoxEngine.createConference({hd_audio:true});
})
VoxEngine.addEventListener(AppEvents.CallAlerting, async event => {
   const permissions = await checkPermissions(event);
   if(permissions) {
       event.call.addEventListener(CallEvents.Disconnected, onEndpointDisconnected);
       event.call.answer();
       conference.add({
           call: event.call,
           displayName: event.headers['X-Name'],
           mode: "FORWARD",
           direction: "BOTH",
           scheme: event.scheme
       });
       if(conference.getList().length === 1){
           owner = conference.getList()[0].id();
           conference.getList()[0].getCall().sendMessage('owner');
       }
       conference.get(owner).getCall()
       .sendMessage(conference.getList().length);)
   } else {
       event.call.hangup({'X-Reason':'DENIED'});
   }
});
最初の部分を行います.では、クライアントを作りましょう.

クライアントを設定する
Web SDKを例にして、私のクライアントはHTMLページになります.SDK初期化までコントロールボタンを隠します.
<!DOCTYPE html>
<html lang="en">
<head>
   <style>
       .hidden {
           display: none !important;
       }
   </style>
   <meta charset="UTF-8">
   <title>The demo</title>
</head>
<body>
<div id="btns" class="hidden">
   <p id="myname">Avi</p>
   <button id="viewer">Join as listener</button>
   <button id="speaker">Join as speaker</button>
   <button id="leave" disabled>Leave</button>
</div>
<div id="audio"></div>
<h3>Current speakers <span id="countSpeakers">0</span></h3>
<div id="endpoints"></div>
</body>
<script src="*****"></script>
面白い部分.初期化が成功するならば、タグでinitialize our SDKをして、コントロールボタンを示しましょう.
<script>
// sdk init
const sdk = VoxImplant.getInstance();
let user = 'user*****';
const init = async () => {
   await sdk.init({ showDebugInfo: true, serverIp: 'url*****' });
   await sdk.connect();
   await sdk.login(`${user}@app**.acc**.voximplant.com`, 'pass*****');
}
init().then(() => {
   document.getElementById('btns').classList.remove('hidden');
});
必要な定数を作成します.HTMLタグからユーザ名を取得します.次に、各ボタンが表示されるときに定義しましょう
let currentCall;
let currentRole;
let countSpeakers = 0;
const confNumber = 'Test room';
const speakerBtn = document.getElementById('speaker');
const viewerBtn = document.getElementById('viewer');
const leaveBtn = document.getElementById('leave');
document.getElementById('myname').innerText = myName;
let setRole = (role) => {
   currentRole = role;
   if(role === 'speaker') {
       speakerBtn.disabled = true;
       leaveBtn.disabled = false;
       viewerBtn.disabled = false;
   }
   if(role === 'viewer') {
       speakerBtn.disabled = false;
       leaveBtn.disabled = false;
       viewerBtn.disabled = true;
   }
   if(role === 'start') {
       speakerBtn.disabled = false;
       viewerBtn.disabled = false;
       leaveBtn.disabled = true;
   }
}
ハンドルleaving the conversation
let endCall = () => {
   if(currentCall && currentCall.state() !== 'ENDED') {
       document.getElementById('endpoints').innerText = '';
       currentCall.hangup();
       setRole('start');
   }
}
その後、addingとremoving a user会話に対して
let onEndpointAdded = (e) => {
   console.warn('Endpoint added', e.endpoint.id);
   const nameTable = document.getElementById('endpoints');
   let p = document.createElement('p');
   p.id = e.endpoint.id;
   p.innerText = `Name: ${e.endpoint.displayName}, id: ${e.endpoint.id}`;
   nameTable.append(p);
   document.getElementById('countSpeakers').innerText = countSpeakers + 1;
   e.endpoint.addEventListener(VoxImplant.EndpointEvents.RemoteMediaAdded, (ev)=> {
       console.warn('RemoteMediaAdded', ev.mediaRenderer);
       const nodeCall = document.getElementById('audio');
       ev.mediaRenderer.render(nodeCall);
   })
   e.endpoint.addEventListener(VoxImplant.EndpointEvents.RemoteMediaRemoved, (ev)=>{
       console.warn(`Endpoint ${e.endpoint.id} media removed ${ev.mediaRenderer}`);
   })
   // ENDPOINT REMOVED
   e.endpoint.addEventListener(VoxImplant.EndpointEvents.Removed, (ev)=>{
       console.warn(`Endpoint ${e.endpoint.id} removed`);
       let removeP = document.getElementById(e.endpoint.id);
       nameTable.removeChild(removeP);
   })
}
ボタンといくつかの必要なイベントを処理します.
const setCall = () => {
   leaveBtn.onclick = endCall;
   currentCall.addEventListener(VoxImplant.CallEvents.EndpointAdded, onEndpointAdded);
   currentCall.addEventListener(VoxImplant.CallEvents.MessageReceived, (e) => {
       console.warn('MessageReceived', e.text);
   });
   //handle connection
   currentCall.addEventListener(VoxImplant.CallEvents.Connected, () => {
       console.warn(`Call connected successfully`);
   });
   //other call event listeners
   currentCall.addEventListener(VoxImplant.CallEvents.Disconnected, () => {
       console.warn(`Call disconnected`);
       endCall();
   });
   currentCall.addEventListener(VoxImplant.CallEvents.Failed, (e) => {
       console.warn(`Call failed`);
       endCall();
   });
}
そして、ロールボタン(スピーカーやリスナ)を処理します.
speakerBtn.onclick = async () => {
   document.getElementById('endpoints').innerText = '';
   if(currentCall) {
       document.getElementById('endpoints').innerText = '';
       await currentCall.hangup();
   }
   setTimeout(() => {
       setRole('speaker');
       currentCall = sdk.callConference({
           number: confNumber,
           extraHeaders: {'X-Name': myName}
       });
       setCall();
   }, 300)
}
viewerBtn.onclick = async () => {
   if(currentCall) {
       document.getElementById('endpoints').innerText = '';
       await currentCall.hangup();
   }
   setTimeout(() => {
       setRole('viewer');
       currentCall = sdk.joinAsViewer(confNumber);
       setCall();
   }, 300)
}
</script>
</html>
完了.今、我々は2つのロール(スピーカーとリスナー)シンプルなボタンコントロールとアクティブスピーカーのリストを持つワーキングルームがあります.我々は完全なアプリを作るために必要なのは、まともなインターフェイスを作成し、いくつかのユーザーを追加/データベース管理と検索ルーム管理.
そして、Voxインプラントエンジンの機能がこれをはるかに超えて行くことを忘れないでください:あなたがスケジューリングの競合のために参加することができない場合は、音声の部屋をスケジュールすることができます場合は、必要な場合は、メッセージを追加することができます、あなたも、音声合成と認識を持つことができる対話型の音声メニューを作成することができます.
2014.08.05 ——— android Gson JsonDeserializer
Gitバッシュ経由でAWS EC 2インスタンスと対話する方法