martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-18 22:19:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

serializing offer handling in mobile webrtc

Browse Source
This commit is contained in:
Roland Osborne 2023-03-29 14:21:08 -07:00
parent 99e1aa88f5
commit 94b18234cc
3 changed files with 65 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/mobile/src/context/useRingContext.hook.js
View File

@ -44,6 +44,8 @@ export function useRingContext() {
const videoTrack = useRef(); const videoTrack = useRef();
const audioTrack = useRef(); const audioTrack = useRef();
const candidates = useRef([]); const candidates = useRef([]);
const offers = useRef([]);
const processing = useRef(false);
const iceServers = [ const iceServers = [
{ {
@ -140,18 +142,6 @@ export function useRingContext() {
} ); } );
pc.current.addEventListener( 'negotiationneeded', event => { 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);
console.log("ICE NEGOTIATION", event);
} ); } );
pc.current.addEventListener( 'signalingstatechange', event => { pc.current.addEventListener( 'signalingstatechange', event => {
console.log("ICE SIGNALING", event); console.log("ICE SIGNALING", event);
@ -160,14 +150,6 @@ export function useRingContext() {
console.log("ICE TRACK", event.track); console.log("ICE TRACK", event.track);
if (stream.current == null) { 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."); console.log("NEW STREAM.");
stream.current = new MediaStream(); stream.current = new MediaStream();
updateState({ remoteStream: stream.current }); updateState({ remoteStream: stream.current });
@ -175,7 +157,40 @@ console.log("NEW STREAM.");
stream.current.addTrack(event.track, stream.current); 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`); ws.current = createWebsocket(`wss://${contactNode}/signal`);
@ -187,44 +202,12 @@ console.log("NEW STREAM.");
ws.current.close(); ws.current.close();
} }
else if (signal.description) { else if (signal.description) {
console.log("DESCRIPTION", signal.description); offers.current.push(signal.description);
processOffers();
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]);
}
};
} }
else if (signal.candidate) { else if (signal.candidate) {
if (pc.current.remoteDescription == null) { if (pc.current.remoteDescription == null) {
candidates.current.push(signal.candidate); console.log("IGNOREING CANDIDATE");
return; return;
} }
const candidate = new RTCIceCandidate(signal.candidate); const candidate = new RTCIceCandidate(signal.candidate);

30
app/mobile/src/session/Session.jsx
View File

@ -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 { useState, useEffect, useContext } from 'react';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@ -164,9 +164,29 @@ export function Session() {
const [ringing, setRinging] = useState([]); const [ringing, setRinging] = useState([]);
const { state, actions } = useSession(); 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' }; 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 HomeScreen = ({ navParams }) => {
const conversation = useContext(ConversationContext); const conversation = useContext(ConversationContext);
@ -427,18 +447,16 @@ export function Session() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
> >
<View style={styles.callBase}> <View style={styles.callBase}>
<View style={styles.callFrame}> <View style={{ ...styles.callFrame, width: callWidth, height: callHeight }}>
{ state.remoteStream && ( { state.remoteStream && (
<View style={styles.callRemote}>
<RTCView <RTCView
style={styles.callRemote}
mirror={true} mirror={true}
objectFit={'cover'} objectFit={'contain'}
streamURL={state.remoteStream.toURL()} streamURL={state.remoteStream.toURL()}
zOrder={0} zOrder={0}
/> />
</View>
)} )}
<Text>{ JSON.stringify(state.callStatus == null) }</Text>
</View> </View>
</View> </View>
</Modal> </Modal>

9
app/mobile/src/session/Session.styled.js
View File

@ -196,15 +196,12 @@ export const styles = StyleSheet.create({
}, },
callFrame: { callFrame: {
backgroundColor: Colors.formBackground, backgroundColor: Colors.formBackground,
padding: 16, padding: 8,
width: '90%',
maxWidth: 400,
borderRadius: 4, borderRadius: 4,
}, },
callRemote: { callRemote: {
width: 256, width: '100%',
height: 256, height: '100%',
backgroundColor: 'yellow',
}, },
}); });