From 94b18234cc6382a9437260022846a8666a351b67 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 29 Mar 2023 14:21:08 -0700 Subject: [PATCH] serializing offer handling in mobile webrtc --- app/mobile/src/context/useRingContext.hook.js | 93 ++++++++----------- app/mobile/src/session/Session.jsx | 30 ++++-- app/mobile/src/session/Session.styled.js | 9 +- 3 files changed, 65 insertions(+), 67 deletions(-) diff --git a/app/mobile/src/context/useRingContext.hook.js b/app/mobile/src/context/useRingContext.hook.js index 3c3d727f..26fe09e8 100644 --- a/app/mobile/src/context/useRingContext.hook.js +++ b/app/mobile/src/context/useRingContext.hook.js @@ -44,6 +44,8 @@ export function useRingContext() { const videoTrack = useRef(); const audioTrack = useRef(); const candidates = useRef([]); + const offers = useRef([]); + const processing = useRef(false); const iceServers = [ { @@ -140,18 +142,6 @@ export function useRingContext() { } ); pc.current.addEventListener( 'negotiationneeded', event => { console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); - console.log("ICE NEGOTIATION", event); } ); pc.current.addEventListener( 'signalingstatechange', event => { console.log("ICE SIGNALING", event); @@ -160,14 +150,6 @@ export function useRingContext() { console.log("ICE TRACK", event.track); if (stream.current == null) { -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); -console.log("NEW STREAM."); console.log("NEW STREAM."); stream.current = new MediaStream(); updateState({ remoteStream: stream.current }); @@ -175,7 +157,40 @@ console.log("NEW STREAM."); stream.current.addTrack(event.track, stream.current); } ); + const processOffers = async () => { + if (processing.current) { + return; + } + processing.current = true; + + while (offers.current.length > 0) { + descriptions = offers.current; + offers.current = []; + + for (let i = 0; i < descriptions.length; i++) { + const description = descriptions[i]; + stream.current = null; + +console.log("OFFER:", description); + if (description.type === 'offer' && pc.current.signalingState !== 'stable') { +console.log("IGNORE"); + continue; + } + + const offer = new RTCSessionDescription(description); + await pc.current.setRemoteDescription(offer); + + if (description.type === 'offer') { + const answer = await pc.current.createAnswer(); + await pc.current.setLocalDescription(answer); + ws.current.send(JSON.stringify({ description: answer })); + } + } + } + + processing.current = false; + } ws.current = createWebsocket(`wss://${contactNode}/signal`); @@ -187,44 +202,12 @@ console.log("NEW STREAM."); ws.current.close(); } else if (signal.description) { -console.log("DESCRIPTION", signal.description); - - - - stream.current = null; - if (signal.description.type === 'offer' && pc.current.signalingState !== 'stable') { -console.log("IGNORING OFFER!"); - return; //rudely ignore - } - - const offer = new RTCSessionDescription(signal.description); - await pc.current.setRemoteDescription(offer); - - if (signal.description.type === 'offer') { - const answer = await pc.current.createAnswer(); - await pc.current.setLocalDescription(answer); - ws.current.send(JSON.stringify({ description: answer })); - } - -console.log("STATE:", pc.current.signalingState); - - const adding = candidates.current; - candidates.current = []; - for (let i = 0; i < adding.length; i++) { - try { - const candidate = new RTCIceCandidate(adding[i]); - await pc.current.addIceCandidate(candidate); - console.log("success:", adding[i]); - } - catch (err) { - console.log(err); - console.log(adding[i]); - } - }; + offers.current.push(signal.description); + processOffers(); } else if (signal.candidate) { if (pc.current.remoteDescription == null) { - candidates.current.push(signal.candidate); + console.log("IGNOREING CANDIDATE"); return; } const candidate = new RTCIceCandidate(signal.candidate); diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 6469bdc2..a9506254 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -1,4 +1,4 @@ -import { View, ScrollView, TouchableOpacity, StatusBar, Text, Image, Modal } from 'react-native'; +import { useWindowDimensions, View, ScrollView, TouchableOpacity, StatusBar, Text, Image, Modal } from 'react-native'; import { useState, useEffect, useContext } from 'react'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; @@ -164,9 +164,29 @@ export function Session() { const [ringing, setRinging] = useState([]); const { state, actions } = useSession(); + const {height, width} = useWindowDimensions(); + const [callWidth, setCallWidth] = useState(0); + const [callHeight, setCallHeight] = useState(0); const drawerParams = { drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front' }; + useEffect(() => { + console.log(width, height); + if (width > height) { + setCallWidth((height * 9)/10); + setCallHeight((height * 9)/10); + } + else { + setCallWidth((width * 9)/10); + setCallHeight((width * 9)/10); + } + }, [width, height]); + + useEffect(() => { + console.log("**** REMOTE ****"); + console.log(state.remoteStream); + }, [state.remoteStream]); + const HomeScreen = ({ navParams }) => { const conversation = useContext(ConversationContext); @@ -427,18 +447,16 @@ export function Session() { supportedOrientations={['portrait', 'landscape']} > - + { state.remoteStream && ( - - )} - { JSON.stringify(state.callStatus == null) } diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js index e8878c55..1690f478 100644 --- a/app/mobile/src/session/Session.styled.js +++ b/app/mobile/src/session/Session.styled.js @@ -196,15 +196,12 @@ export const styles = StyleSheet.create({ }, callFrame: { backgroundColor: Colors.formBackground, - padding: 16, - width: '90%', - maxWidth: 400, + padding: 8, borderRadius: 4, }, callRemote: { - width: 256, - height: 256, - backgroundColor: 'yellow', + width: '100%', + height: '100%', }, });