New webrtc solution with react context (POC)
Some changes related to the socket used in the webrtc context need to be removed when the final solution for the communication between 2 clients will be implement.
Gitlab: #27
Change-Id: Id22e216d9c650d5f1d55b24a24073822d6440ad2
diff --git a/client/src/contexts/WebRTCProvider.tsx b/client/src/contexts/WebRTCProvider.tsx
new file mode 100644
index 0000000..a18d24d
--- /dev/null
+++ b/client/src/contexts/WebRTCProvider.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+
+import React, { createContext, useCallback, useRef } from 'react';
+import { connect, Socket } from 'socket.io-client';
+
+import { WithChildren } from '../utils/utils';
+
+/*
+ * TODO: This socket is temporary, it will be replaced by the real socket
+ * for communication with webrtc
+ * */
+const socket = connect('http://192.168.0.12:8080', { transports: ['websocket'] });
+
+interface IWebRTCContext {
+ localVideoRef: React.RefObject<HTMLVideoElement> | null;
+ remoteVideoRef: React.RefObject<HTMLVideoElement> | null;
+ createWebRTCConnection: () => void;
+ sendWebRTCOffer: () => void;
+ sendWebRTCAnswer: (remoteSdp: RTCSessionDescriptionInit) => void;
+ handleWebRTCAnswer: (remoteSdp: RTCSessionDescriptionInit) => void;
+ addIceCandidate: (candidate: RTCIceCandidateInit) => void;
+ socket: Socket;
+}
+
+const DefaultWebRTCContext: IWebRTCContext = {
+ localVideoRef: null,
+ remoteVideoRef: null,
+ createWebRTCConnection: () => {},
+ sendWebRTCOffer: () => {},
+ sendWebRTCAnswer: () => {},
+ handleWebRTCAnswer: () => {},
+ addIceCandidate: () => {},
+ socket: socket,
+};
+
+export const WebRTCContext = createContext<IWebRTCContext>(DefaultWebRTCContext);
+
+export default ({ children }: WithChildren) => {
+ const localVideoRef = useRef<HTMLVideoElement>(null);
+ const remoteVideoRef = useRef<HTMLVideoElement>(null);
+ const webRTCConnectionRef = useRef<RTCPeerConnection>();
+
+ const createWebRTCConnection = useCallback(async () => {
+ //TODO use SFL iceServers
+ const iceConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
+ webRTCConnectionRef.current = new RTCPeerConnection(iceConfig);
+ const localStream = await navigator.mediaDevices.getUserMedia({
+ video: true,
+ audio: true,
+ });
+
+ if (localVideoRef.current) {
+ localVideoRef.current.srcObject = localStream;
+ }
+
+ localStream.getTracks().forEach((track) => {
+ if (webRTCConnectionRef.current) {
+ webRTCConnectionRef.current.addTrack(track, localStream);
+ }
+ });
+ webRTCConnectionRef.current.addEventListener('icecandidate', (event) => {
+ if (event.candidate && socket) {
+ console.log('webRTCConnection : onicecandidate');
+ socket.emit('candidate', event.candidate);
+ }
+ });
+ webRTCConnectionRef.current.addEventListener('track', async (event) => {
+ if (remoteVideoRef.current) {
+ remoteVideoRef.current.srcObject = event.streams[0];
+ console.log('webRTCConnection : add remotetrack success');
+ }
+ });
+ }, [webRTCConnectionRef, localVideoRef, remoteVideoRef]);
+
+ const sendWebRTCOffer = useCallback(async () => {
+ try {
+ if (webRTCConnectionRef.current && socket) {
+ const sdp = await webRTCConnectionRef.current.createOffer({
+ offerToReceiveAudio: true,
+ offerToReceiveVideo: true,
+ });
+ await webRTCConnectionRef.current.setLocalDescription(new RTCSessionDescription(sdp));
+ socket.emit('offer', sdp);
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ }, [webRTCConnectionRef]);
+
+ const sendWebRTCAnswer = useCallback(
+ async (remoteSdp: RTCSessionDescriptionInit) => {
+ try {
+ if (webRTCConnectionRef.current && socket && remoteSdp) {
+ await webRTCConnectionRef.current.setRemoteDescription(new RTCSessionDescription(remoteSdp));
+ const mySdp = await webRTCConnectionRef.current.createAnswer({
+ offerToReceiveAudio: true,
+ offerToReceiveVideo: true,
+ });
+ await webRTCConnectionRef.current.setLocalDescription(new RTCSessionDescription(mySdp));
+ socket.emit('answer', mySdp);
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ },
+ [webRTCConnectionRef]
+ );
+
+ const handleWebRTCAnswer = useCallback(
+ async (remoteSdp: RTCSessionDescriptionInit) => {
+ try {
+ if (webRTCConnectionRef.current && remoteSdp) {
+ await webRTCConnectionRef.current.setRemoteDescription(new RTCSessionDescription(remoteSdp));
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ },
+ [webRTCConnectionRef]
+ );
+
+ const addIceCandidate = useCallback(
+ async (candidate: RTCIceCandidateInit) => {
+ try {
+ if (webRTCConnectionRef.current) {
+ await webRTCConnectionRef.current.addIceCandidate(new RTCIceCandidate(candidate));
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ },
+ [webRTCConnectionRef]
+ );
+
+ return (
+ <WebRTCContext.Provider
+ value={{
+ localVideoRef,
+ remoteVideoRef,
+ createWebRTCConnection,
+ sendWebRTCOffer,
+ sendWebRTCAnswer,
+ handleWebRTCAnswer,
+ addIceCandidate,
+ socket,
+ }}
+ >
+ {children}
+ </WebRTCContext.Provider>
+ );
+};
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
new file mode 100644
index 0000000..c602020
--- /dev/null
+++ b/client/src/utils/utils.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+
+import { ReactNode } from 'react';
+
+export type WithChildren = {
+ children: ReactNode;
+};
diff --git a/routes/fakeServerForWebRTC.js b/routes/fakeServerForWebRTC.js
new file mode 100644
index 0000000..1e4bd4f
--- /dev/null
+++ b/routes/fakeServerForWebRTC.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+
+/* TODO remove this file.
+This is a temporary socker server only used for testing the webrtc
+connection between two local client. We are using this server while
+we develop the real communication server with the deamon */
+
+import cors from 'cors';
+import express from 'express';
+import http from 'http';
+import os from 'os';
+import { Server } from 'socket.io';
+
+let app = express();
+app.use(cors());
+const server = http.createServer(app);
+
+const io = new Server(server, {
+ cors: {
+ origin: 'http://localhost:8080',
+ },
+});
+
+const PORT = process.env.PORT || 8080;
+
+const ip = Object.values(os.networkInterfaces())
+ .flat()
+ .find((i) => i.family === 'IPv4' && !i.internal).address;
+
+io.on('connection', (socket) => {
+ console.log('Connection to socket from ' + socket.id);
+
+ socket.on('offer', (sdp) => {
+ console.log('offer: ' + socket.id);
+ socket.broadcast.emit('getOffer', sdp);
+ });
+
+ socket.on('answer', (sdp) => {
+ console.log('answer: ' + socket.id);
+ socket.broadcast.emit('getAnswer', sdp);
+ });
+
+ socket.on('candidate', (candidate) => {
+ console.log('candidate: ' + socket.id);
+ socket.broadcast.emit('getCandidate', candidate);
+ });
+
+ socket.on('disconnect', () => {
+ console.log(`${socket.id} exit`);
+ });
+});
+
+server.listen(PORT, () => {
+ console.log(`server running on ${ip}:${PORT}`);
+});