Fixed a e2ee issues

	* Move application from Typescript to plain javascript
	* Change secret key creation mechanism

example/.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ]
+}

example/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "private": true,
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
@@ -12,10 +13,14 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "@types/lodash": "^4.14.184",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@wasm-tool/wasm-pack-plugin": "^1.6.0",
+    "babel-loader": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "html-webpack-plugin": "^5.5.0",
@@ -23,8 +28,6 @@
     "sass": "^1.55.0",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.8.2",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0"

example/src/App.tsx → example/src/App.jsx

@@ -4,16 +4,8 @@ import './App.css';
 import Meeting from './components/Meeting'
 import Wallet from './components/Wallet';
 
-interface Props {
-}
-
-interface State {
-  secretKey: string,
-  meetingId: string
-}
-
-class App extends React.Component<Props, State> {
-  constructor(props: Props) {
+class App extends React.Component {
+  constructor(props) {
     super(props);
     this.setSecretKey = this.setSecretKey.bind(this);
     this.setMeetingId = this.setMeetingId.bind(this);
@@ -24,10 +16,10 @@ class App extends React.Component<Props, State> {
     }
   }
 
-  setSecretKey(secretKey: string) {
+  setSecretKey(secretKey) {
     this.setState({ secretKey });
   };
-  setMeetingId(meetingId: string) {
+  setMeetingId(meetingId) {
     this.setState({ meetingId });
   };
 

example/src/components/Meeting.jsx

@@ -0,0 +1,54 @@
+import React, { PropsWithChildren } from 'react'
+import { JitsiMeeting } from "@jitsi/react-sdk";
+
+class Meeting extends React.Component {
+    render() {
+        return (
+            <JitsiMeeting
+                roomName={this.props.meetingId}
+                getIFrameRef={handleJitsiIFrameRef2}
+                configOverwrite={{
+                    e2ee: {
+                        externallyManagedKey: true
+                    }
+                }}
+                onApiReady={externalApi => {
+                    externalApi.on("videoConferenceJoined", async (event) => {
+                        let secretKey = new Uint8Array(Buffer.from(this.props.secretKeyBase64, 'base64'));
+                        let index = 0;
+
+                        let key = await window.crypto.subtle.importKey(
+                            "raw",
+                            secretKey,
+                            "AES-GCM",
+                            true,
+                            ["encrypt", "decrypt"]
+                        );
+
+                        await externalApi.setMediaEncryptionKey({
+                            key,
+                            index
+                        }).then(() => {
+                            console.log("SET MEDIA ENCRYPTION KEY");
+                        });
+
+                        setTimeout(() => {
+                            externalApi.toggleE2EE(true);
+                        }, 1_000);
+
+                        console.log('Jitsi Meet External API', externalApi);
+                    })
+                }}
+            />
+        )
+    }
+}
+
+const handleJitsiIFrameRef2 = (iframeRef) => {
+    iframeRef.style.marginTop = '10px';
+    iframeRef.style.border = '10px #df486f';
+    iframeRef.style.padding = '5px';
+    iframeRef.style.height = '50em';
+};
+
+export default Meeting;

example/src/components/Meeting.tsx

@@ -1,57 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { JitsiMeeting } from "@jitsi/react-sdk";
-
-interface Props {
-    secretKeyBase64: string,
-    meetingId: string
-}
-interface State {
-}
-
-class Meeting extends React.Component<Props, State> {
-    render() {
-        return(
-            <JitsiMeeting
-                roomName={this.props.meetingId}
-                getIFrameRef = { handleJitsiIFrameRef2 }
-                configOverwrite = {{
-                    e2ee: {
-                    externallyManagedKey: true
-                    }
-                }}
-                onApiReady = { externalApi => {
-                    externalApi.on("videoConferenceJoined", async (event) => {
-                        let secretKey: Uint8Array = new Uint8Array(Buffer.from(this.props.secretKeyBase64, 'base64'));
-
-                        let index = 0;
-                        externalApi.executeCommand('setMediaEncryptionKey', JSON.stringify({
-                            exportedKey: Array.from(secretKey),
-                            index
-                        }));
-
-                        externalApi.executeCommand("toggleE2EE", true);
-                        console.log('Jitsi Meet External API', externalApi);
-                    })
-                } }
-            />
-        )
-    }
-}
-
-const handleJitsiIFrameRef2 = (iframeRef: IIframeStyle) => {
-  iframeRef.style.marginTop = '10px';
-  iframeRef.style.border = '10px #df486f';
-  iframeRef.style.padding = '5px';
-  iframeRef.style.height = '50em';
-};
-
-interface IIframeStyle {
-  style: {
-    marginTop: string,
-    border: string,
-    padding: string,
-    height: string
-  }
-}
-
-export default Meeting;

example/src/components/Wallet.tsx → example/src/components/Wallet.jsx

@@ -1,34 +1,11 @@
 import React from "react";
 
-// import "../assets/style.scss";
 import * as _ from "lodash";
 import { connect, WalletConnection, keyStores, Near } from 'near-api-js';
-import { BrowserLocalStorageKeyStore } from "near-api-js/lib/key_stores";
 const { KeyProvisioner, ProvisionerConfig } = await import("../../../pkg/web_client");
 
-interface State {
-    isSignedIn: boolean,
-    keyStore: BrowserLocalStorageKeyStore,
-    accountId: string | null,
-    walletConnection: WalletConnection | null,
-    nearConnection: Near | null,
-    timeouts: {
-        default_ms: number,
-        interaction_ms: number
-    }
-    provisioner: any,
-    secretKey: string | null,
-    meetingId: string | null,
-    participants: string[],
-}
-
-interface Props {
-    setSecretKey: (key: string) => void,
-    setMeetingId: (id: string) => void
-}
-
-class Wallet extends React.Component<Props, State> {
-    constructor(props: Props) {
+class Wallet extends React.Component {
+    constructor(props) {
         super(props);
         this.state = {
             isSignedIn: false,
@@ -47,17 +24,16 @@ class Wallet extends React.Component<Props, State> {
         };
     }
 
-    setStateAsync(state: State) {
-        return new Promise((resolve: any) => {
+    setStateAsync(state) {
+        return new Promise((resolve) => {
             this.setState(state, resolve)
         });
     }
 
-    async componentDidMount(): Promise<void> {
+    async componentDidMount() {
         let keyStore = this.state.keyStore;
 
         let nearConnectionCall = async () => {
-            let headers: { [key: string]: (string | number) };
             let connectionConfig = {
                 networkId: "testnet",
                 keyStore,
@@ -65,7 +41,6 @@ class Wallet extends React.Component<Props, State> {
                 walletUrl: "https://wallet.testnet.near.org",
                 helperUrl: "https://helper.testnet.near.org",
                 explorerUrl: "https://explorer.testnet.near.org",
-                headers
             };
 
             let nearConnection = await connect(connectionConfig);
@@ -90,7 +65,7 @@ class Wallet extends React.Component<Props, State> {
     }
 
     async handleWallet() {
-        let accountId: string = this.state.accountId;
+        let accountId = this.state.accountId;
         let account = await this.state.nearConnection.account(accountId);
         let accessKeys = await account.getAccessKeys();
         let keypair = await this.state.keyStore.getKey("testnet", accountId);
@@ -111,28 +86,31 @@ class Wallet extends React.Component<Props, State> {
     async handleMeetingStart() {
         let participants = this.state.participants;
         let provisioner = this.state.provisioner;
+        let default_ms = this.state.timeouts.default_ms;
+        let interaction_ms = this.state.timeouts.interaction_ms;
 
         if (participants.length > 0) {
             console.log("Participants: " + participants);
-            provisioner.init_meeting(new Set(participants), this.state.timeouts.default_ms)
-                .then((meetingId: string) => {
-                    this.props.setMeetingId(meetingId);
+            provisioner.init_meeting(new Set(participants), default_ms)
+                .then((meeting) => {
+                    this.props.setMeetingId(meeting.meet_id);
+                    let meetingId = meeting.meet_id;
                     this.setState({ ...this.state, meetingId });
-                    console.log("Meeting Id:", meetingId);
-                    provisioner.send_keys(meetingId, this.state.timeouts.interaction_ms)
-                        .then((secretKey: string) => {
+                    console.log("Meeting Id:", meeting.meet_id);
+                    provisioner.send_keys(meeting.meet_id, interaction_ms)
+                        .then((secretKey) => {
                             this.setState({ ...this.state, secretKey });
                             this.props.setSecretKey(secretKey);
                             console.log("Secret Key" + secretKey);
                         })
                         .then(() => console.log("Send keys is ok"))
-                        .catch((err: any) => {
-                            console.log("Error: " + err.err_msg());
+                        .catch((err) => {
+                            console.log("Error: ", err);
                         });
                 })
                 .then(() => console.log("Init is ok"))
-                .catch((err: any) => {
-                    console.log("Error: " + err.err_msg());
+                .catch((err) => {
+                    console.log("Error: ", err);
                 });
         }
     }
@@ -146,13 +124,12 @@ class Wallet extends React.Component<Props, State> {
         let default_ms = this.state.timeouts.default_ms;
         this.props.setMeetingId(meetingId);
 
-        provisioner.get_key(meetingId, default_ms).then((secretKey: any) => {
+        provisioner.get_key(meetingId, default_ms).then((secretKey) => {
             this.props.setSecretKey(secretKey);
             this.setState({ ...this.state, secretKey });
             console.log("Secret Key" + secretKey);
-        }).catch((err: any) => {
-            console.log("ErrorType: " + ErrorType[err.err_type()]);
-            console.log("Error: " + err.err_msg());
+        }).catch((err) => {
+            console.log("Error: ", err);
         });
     }
 

example/src/index.tsx → example/src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './App.jsx';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root')
 );
 root.render(
   <React.StrictMode>

example/tsconfig.json

@@ -1,22 +0,0 @@
-{
-    "compilerOptions": {
-        "outDir": "dist/",
-        "noImplicitAny": true,
-        "sourceMap": true,
-        "jsx": "react",
-        "allowJs": true,
-        "moduleResolution": "node",
-        "module": "es2022",
-        "lib": [
-            "es2022", "DOM", "DOM.Iterable"
-        ],
-        "target": "es2022",
-        "preserveConstEnums": true,
-        "esModuleInterop": true,
-        "paths": {
-            "client/*": [
-                "../pkg/*"
-            ]
-        }
-    }
-}

example/webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-    entry: './src/index.tsx',
+    entry: path.join(__dirname, "src", "index.js"),
     output: {
         filename: 'main.js',
         path: path.resolve(__dirname, 'dist'),
@@ -11,11 +11,14 @@ module.exports = {
     },
     resolve: {
         alias: {
-            'client': path.join(__dirname, '../pkg/')
+            'client': path.join(__dirname, '../pkg/'),
+            'react-dom': path.resolve('./node_modules/react-dom'),
+            react: path.resolve('./node_modules/react')
         },
         fallback: {
-            "buffer": require.resolve("buffer")
-        }
+            "buffer": require.resolve("buffer"),
+        },
+        extensions: ['*', '.js', '.jsx'],
     },
     mode: "development",
     devServer: {
@@ -33,15 +36,12 @@ module.exports = {
             }
         },
     },
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-    },
     module: {
         rules: [
             {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
+                test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
+                use: ["babel-loader"],
             },
             {
                 test: /\.css?$/,
@@ -54,8 +54,8 @@ module.exports = {
             Buffer: ['buffer', 'Buffer'],
         }),
         new HtmlWebpackPlugin({
-            template: 'public/index.html',
-        })
+            template: path.join(__dirname, "public", "index.html"),
+        }),
     ],
     experiments: {
         asyncWebAssembly: true,