mirror of
https://github.com/balzack/databag.git
synced 2025-04-20 16:45:25 +00:00
removing test code
This commit is contained in:
balzack
parent
f6401cb6ca
commit
5aa9bec9ae
@ -1,4 +1,3 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { ActivityIndicator, KeyboardAvoidingView, Modal, View, Switch, Text, TextInput, TouchableOpacity, Alert } from 'react-native';
|
||||
import Ionicons from 'react-native-vector-icons/AntDesign';
|
||||
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
@ -11,18 +10,6 @@ import { BlockedTopics } from './blockedTopics/BlockedTopics';
|
||||
import { BlockedContacts } from './blockedContacts/BlockedContacts';
|
||||
import { BlockedMessages } from './blockedMessages/BlockedMessages';
|
||||
|
||||
import {
|
||||
ScreenCapturePickerView,
|
||||
RTCPeerConnection,
|
||||
RTCIceCandidate,
|
||||
RTCSessionDescription,
|
||||
RTCView,
|
||||
MediaStream,
|
||||
MediaStreamTrack,
|
||||
mediaDevices,
|
||||
registerGlobals
|
||||
} from 'react-native-webrtc';
|
||||
|
||||
export function ProfileHeader() {
|
||||
const { state, actions } = useProfile();
|
||||
|
||||
@ -33,155 +20,6 @@ export function ProfileHeader() {
|
||||
|
||||
export function ProfileBody() {
|
||||
const { state, actions } = useProfile();
|
||||
const ws = useRef();
|
||||
const peer = useRef();
|
||||
const stream = useRef();
|
||||
const [streamUrl, setStreamUrl] = useState(null);
|
||||
const localMediaStream = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
console.log("WS CONNECT!!!");
|
||||
ws.current = new WebSocket('wss://balzack.coredb.org/relay');
|
||||
ws.current.onmessage = async (ev) => {
|
||||
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg.candidate) {
|
||||
console.log("> CANDIDATE: ", msg.candidate);
|
||||
const candidate = new RTCIceCandidate( msg.candidate );
|
||||
return peer.current.addIceCandidate(candidate);
|
||||
}
|
||||
else if (msg.offer) {
|
||||
console.log("> OFFER: ", msg.offer);
|
||||
const offerDescription = new RTCSessionDescription(msg.offer );
|
||||
await peer.current.setRemoteDescription( offerDescription );
|
||||
const answer = await peer.current.createAnswer();
|
||||
await peer.current.setLocalDescription( answer );
|
||||
ws.current.send(JSON.stringify({ answer }));
|
||||
}
|
||||
else if (msg.answer) {
|
||||
console.log("> ANSWER: ", msg.answer);
|
||||
const answer = new RTCSessionDescription( msg.answer );
|
||||
await peer.current.setRemoteDescription( answer );
|
||||
}
|
||||
}
|
||||
ws.current.onclose = (e) => {
|
||||
console.log("CLOSED");
|
||||
}
|
||||
ws.current.onopen = () => {
|
||||
console.log("OPENED");
|
||||
}
|
||||
ws.current.error = (e) => {
|
||||
console.log("ERROR");
|
||||
}
|
||||
|
||||
|
||||
|
||||
let peerConstraints = {
|
||||
iceServers: [
|
||||
{
|
||||
urls: 'stun:192.168.13.233:5001?transport=udp',
|
||||
username: 'user',
|
||||
credential: 'pass'
|
||||
},
|
||||
{
|
||||
urls: 'turn:192.168.13.233:5001?transport=udp',
|
||||
username: 'user',
|
||||
credential: 'pass'
|
||||
}]
|
||||
};
|
||||
|
||||
peer.current = new RTCPeerConnection( peerConstraints );
|
||||
go();
|
||||
|
||||
peer.current.addEventListener( 'connectionstatechange', event => {
|
||||
console.log("CONNECTION STATE");
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'icecandidate', event => {
|
||||
if ( !event.candidate ) { return; };
|
||||
ws.current.send(JSON.stringify({ candidate: event.candidate }));
|
||||
console.log("SEND CANDIDATE!!!");
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'icecandidateerror', event => {
|
||||
console.log("ICE ERROR");
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'iceconnectionstatechange', event => {
|
||||
console.log("ICE STATE CHANGE");
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'negotiationneeded', event => {
|
||||
console.log("ICE NEGOTIATION");
|
||||
start();
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'signalingstatechange', event => {
|
||||
console.log("ICE SIGNALING");
|
||||
} );
|
||||
|
||||
peer.current.addEventListener( 'track', event => {
|
||||
console.log("ICE TRACK", event.track);
|
||||
// Grab the remote track from the connected participant.
|
||||
//remoteMediaStream = remoteMediaStream || new MediaStream();
|
||||
//remoteMediaStream.addTrack( event.track, remoteMediaStream );
|
||||
|
||||
if (!stream.current) {
|
||||
stream.current = new MediaStream();
|
||||
}
|
||||
stream.current.addTrack(event.track, stream.current);
|
||||
setStreamUrl(stream.current.toURL());
|
||||
} );
|
||||
|
||||
}, []);
|
||||
|
||||
const go = async () => {
|
||||
|
||||
|
||||
let mediaConstraints = {
|
||||
audio: true,
|
||||
video: {
|
||||
frameRate: 4,
|
||||
facingMode: 'user'
|
||||
}
|
||||
};
|
||||
|
||||
console.log("GETTING MEDIA DEVICES");
|
||||
|
||||
localMediaStream.current = await mediaDevices.getUserMedia( mediaConstraints );
|
||||
}
|
||||
|
||||
const okay = async () => {
|
||||
|
||||
console.log("ADDING TRACKS");
|
||||
localMediaStream.current.getTracks().forEach((track) => {
|
||||
peer.current.addTrack( track, localMediaStream.current )
|
||||
console.log("TRACK ADDED!!!!");
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const start = async () => {
|
||||
let sessionConstraints = {
|
||||
mandatory: {
|
||||
OfferToReceiveAudio: false,
|
||||
OfferToReceiveVideo: true,
|
||||
VoiceActivityDetection: false,
|
||||
}
|
||||
};
|
||||
|
||||
const offer = await peer.current.createOffer( sessionConstraints );
|
||||
await peer.current.setLocalDescription( offer );
|
||||
ws.current.send(JSON.stringify({ offer }));
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
Alert.alert(
|
||||
@ -293,22 +131,104 @@ const okay = async () => {
|
||||
return (
|
||||
<View style={styles.body}>
|
||||
|
||||
<TouchableOpacity onPress={okay}>
|
||||
<Text>SEND</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.logo}>
|
||||
<View>
|
||||
<Logo src={state.imageSource} width={128} height={128} radius={8} />
|
||||
<TouchableOpacity style={styles.gallery} onPress={onGallery}>
|
||||
<Ionicons name="picture" size={14} color={Colors.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.alert}>
|
||||
{ state.disconnected && (
|
||||
<Text style={styles.alertText}>Disconnected</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity style={styles.detail} onPress={actions.showEditDetails}>
|
||||
<View style={styles.attribute}>
|
||||
{ state.name && (
|
||||
<Text style={styles.nametext}>{ state.name }</Text>
|
||||
)}
|
||||
{ !state.name && (
|
||||
<Text style={styles.nonametext}>Name</Text>
|
||||
)}
|
||||
<Ionicons name="edit" size={16} color={Colors.text} />
|
||||
</View>
|
||||
<View style={styles.attribute}>
|
||||
<View style={styles.icon}>
|
||||
<Ionicons name="enviromento" size={14} color={Colors.text} />
|
||||
</View>
|
||||
{ state.location && (
|
||||
<Text style={styles.locationtext}>{ state.location }</Text>
|
||||
)}
|
||||
{ !state.location && (
|
||||
<Text style={styles.nolocationtext}>Location</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.attribute}>
|
||||
<View style={styles.icon}>
|
||||
<Ionicons name="book" size={14} color={Colors.text} />
|
||||
</View>
|
||||
{ state.description && (
|
||||
<Text style={styles.descriptiontext}>{ state.description }</Text>
|
||||
)}
|
||||
{ !state.description && (
|
||||
<Text style={styles.nodescriptiontext}>Description</Text>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.group}>
|
||||
<View style={styles.enable}>
|
||||
<TouchableOpacity onPress={() => setVisible(!state.searchable)} activeOpacity={1}>
|
||||
<Text style={styles.enableText}>Visible in Registry</Text>
|
||||
</TouchableOpacity>
|
||||
<Switch style={styles.enableSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
|
||||
</View>
|
||||
<View style={styles.enable}>
|
||||
<TouchableOpacity onPress={() => setNotifications(!state.pushEnabled)} activeOpacity={1}>
|
||||
<Text style={styles.enableText}>Enable Notifications</Text>
|
||||
</TouchableOpacity>
|
||||
<Switch style={styles.enableSwitch} value={state.pushEnabled} onValueChange={setNotifications} trackColor={styles.switch}/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity onPress={start}>
|
||||
<Text>START</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.logout} activeOpacity={1} onPress={logout}>
|
||||
<Ionicons name="logout" size={14} color={Colors.primary} />
|
||||
<Text style={styles.logoutText}>Logout</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<RTCView
|
||||
style={{ width: 320, height: 240, backgroundColor: 'yellow' }}
|
||||
mirror={true}
|
||||
objectFit={'cover'}
|
||||
streamURL={streamUrl}
|
||||
zOrder={0}
|
||||
/>
|
||||
<TouchableOpacity style={styles.logout} onPress={actions.showEditLogin}>
|
||||
<Ionicons name="user" size={20} color={Colors.primary} />
|
||||
<Text style={styles.logoutText}>Change Login</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{ state.sealable && (
|
||||
<TouchableOpacity style={styles.logout} onPress={actions.showEditSeal}>
|
||||
<Ionicons name="lock" size={22} color={Colors.primary} />
|
||||
<Text style={styles.logoutText}>Sealed Topics</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TouchableOpacity style={styles.delete} activeOpacity={1} onPress={actions.showDelete}>
|
||||
<Ionicons name="delete" size={16} color={Colors.alert} />
|
||||
<Text style={styles.deleteText}>Delete Account</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.blockedLabel}>Manage Blocked:</Text>
|
||||
<View style={styles.blocked}>
|
||||
<TouchableOpacity style={styles.link} onPress={actions.showBlockedCards}>
|
||||
<Text style={styles.linkText}>Contacts</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.link} onPress={actions.showBlockedChannels}>
|
||||
<Text style={styles.linkText}>Topics</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.link} onPress={actions.showBlockedMessages}>
|
||||
<Text style={styles.linkText}>Messages</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Modal
|
||||
animationType="fade"
|
||||
@ -687,3 +607,4 @@ export function Profile() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,152 +1,17 @@
|
||||
import { WelcomeWrapper } from './Welcome.styled';
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import { Input, Space } from 'antd';
|
||||
|
||||
import React, { createContext, useState, useRef, useEffect } from 'react';
|
||||
import { Space } from 'antd';
|
||||
|
||||
import session from 'images/session.png';
|
||||
|
||||
export function Welcome() {
|
||||
|
||||
const video = useRef();
|
||||
const vid = useRef();
|
||||
const peer = useRef();
|
||||
const ws = useRef();
|
||||
const candidates = useRef([]);
|
||||
|
||||
const whiteNoise = () => {
|
||||
const canvas = Object.assign(document.createElement("canvas"), {width: 320, height: 240});
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillRect(0, 0, 320, 240);
|
||||
const p = ctx.getImageData(0, 0, 320, 240);
|
||||
requestAnimationFrame(function draw(){
|
||||
for (var i = 0; i < p.data.length; i++) {
|
||||
p.data[i++] = p.data[i++] = p.data[i++] = Math.random() * 255;
|
||||
}
|
||||
ctx.putImageData(p, 0, 0);
|
||||
requestAnimationFrame(draw);
|
||||
});
|
||||
return canvas.captureStream();
|
||||
}
|
||||
|
||||
const start = async () => {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({video: true});
|
||||
//const stream = await whiteNoise();
|
||||
peer.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
|
||||
};
|
||||
|
||||
const rtc = async () => {
|
||||
const iceServers = [
|
||||
{
|
||||
urls: 'stun:192.168.13.233:5001?transport=udp',
|
||||
username: 'user',
|
||||
credential: 'pass'
|
||||
},
|
||||
{
|
||||
urls: 'turn:192.168.13.233:5001?transport=udp',
|
||||
username: 'user',
|
||||
credential: 'pass'
|
||||
}];
|
||||
|
||||
const pc = new RTCPeerConnection({
|
||||
iceServers
|
||||
});
|
||||
|
||||
//const pc = new RTCPeerConnection();
|
||||
peer.current = pc;
|
||||
|
||||
pc.onicecandidate = (e) => {
|
||||
if (!e.candidate) return;
|
||||
|
||||
ws.current.send(JSON.stringify({ candidate: e.candidate }));
|
||||
console.log(JSON.stringify(e.candidate));
|
||||
|
||||
// If a srflx candidate was found, notify that the STUN server works!
|
||||
if(e.candidate.type == "srflx"){
|
||||
console.log("The STUN server is reachable!");
|
||||
console.log(` Your Public IP Address is: ${e.candidate.address}`);
|
||||
}
|
||||
|
||||
// If a relay candidate was found, notify that the TURN server works!
|
||||
if(e.candidate.type == "relay"){
|
||||
console.log("The TURN server is reachable !");
|
||||
}
|
||||
};
|
||||
|
||||
pc.onicecandidateerror = (e) => {
|
||||
console.error(e);
|
||||
};
|
||||
|
||||
pc.ontrack = ({streams: [stream]}) => {
|
||||
console.log("ON TRACK!");
|
||||
vid.current.srcObject = stream;
|
||||
};
|
||||
|
||||
|
||||
const dc = pc.createDataChannel("both", {negotiated: true, id: 0});
|
||||
|
||||
pc.onnegotiationneeded = async () => {
|
||||
console.log("NEGOTIATION");
|
||||
create();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const create = async () => {
|
||||
const offer = await peer.current.createOffer();
|
||||
await peer.current.setLocalDescription(offer);
|
||||
ws.current.send(JSON.stringify({ offer: offer }));
|
||||
console.log(":: OFFER: ", offer);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
rtc();
|
||||
ws.current = new WebSocket('wss://balzack.coredb.org/relay');
|
||||
ws.current.onmessage = async (ev) => {
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg.candidate) {
|
||||
console.log("> CANDIDATE: ", msg.candidate);
|
||||
candidates.current.push(msg.candidate);
|
||||
await peer.current.addIceCandidate(msg.candidate);
|
||||
}
|
||||
else if (msg.offer) {
|
||||
console.log("> OFFER: ", msg.offer);
|
||||
peer.current.setRemoteDescription(msg.offer);
|
||||
await peer.current.setLocalDescription(await peer.current.createAnswer());
|
||||
ws.current.send(JSON.stringify({ answer: peer.current.localDescription }));
|
||||
}
|
||||
else if (msg.answer) {
|
||||
console.log("> ANSWER: ", msg.answer);
|
||||
peer.current.setRemoteDescription(msg.answer);
|
||||
}
|
||||
}
|
||||
ws.current.onclose = (e) => {
|
||||
console.log("CLOSED");
|
||||
}
|
||||
ws.current.onopen = () => {
|
||||
console.log("OPENED");
|
||||
}
|
||||
ws.current.error = (e) => {
|
||||
console.log("ERROR");
|
||||
}
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<WelcomeWrapper>
|
||||
<div class="title">
|
||||
<div class="header">Databag</div>
|
||||
<div>Communication for the decentralized web</div>
|
||||
</div>
|
||||
|
||||
<div style={{ width: 320, height: 240, backgroundColor: 'white' }}>
|
||||
<video ref={vid} width={320} height={240} autoPlay
|
||||
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
|
||||
</div>
|
||||
|
||||
<div style={{ width: 100, height: 32}} onClick={create}>Create</div>
|
||||
<div style={{ width: 100, height: 32}} onClick={start}>Start</div>
|
||||
|
||||
<img class="session" src={session} alt="Session Background" />
|
||||
<div class="message">
|
||||
<Space>
|
||||
<div>Setup your profile</div>
|
||||
@ -160,3 +25,4 @@ export function Welcome() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user