new folder

master
ada 1 year ago
parent cfc87d25ac
commit 4f6d25ccd0

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min-1.js"></script>
<link rel="stylesheet" type="text/css" href="switchboard.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="switchboard.js"></script>
</body>
</html>

@ -0,0 +1,131 @@
let noiseFilter;
let offset = 0.0;
function setup() {
createCanvas(windowWidth, windowHeight);
//button
let button = createButton("S I 2 1");
button.position(358, 319);
button.size(48, 17);
button.style("background-color", "#000000");
button.style("font-size", "10px");
button.style("color", "#ffffff");
button.mousePressed(goLink);
// //noise
noiseFilter = createImage(width, height);
noiseFilter.loadPixels();
let pix = noiseFilter.width * noiseFilter.height * 4;
for (let i = 0; i < pix; i += 4) {
noiseFilter.pixels[i] = random(255);
noiseFilter.pixels[i + 1] = random(255);
noiseFilter.pixels[i + 2] = random(255);
noiseFilter.pixels[i + 3] = 30;
}
noiseFilter.updatePixels();
}
window.alert("HELLO, OPERATOR HERE! YOU HAVE A COLLECT CALL FROM NY. TO ACCEPT, CLICK ON SI21.");
function drawCircles(circleX, circleY) {
strokeWeight(2);
// bigcircle
fill("#fffff");
circle(circleX, circleY, 30);
//smallercircle
fill("#fffff");
circle(circleX, circleY, 25);
//smallestcircle
fill("#000000");
circle(circleX, circleY, 20);
}
function drawRect(rectX, rectY) {
stroke(28, 40, 51 );
strokeWeight(1);
fill("#000000");
rect(rectX, rectY, 45, 15);
}
function drawLights(lightX, lightY) {
fill(255, 105, 180, 50);
noStroke();
circle(lightX, lightY, 18);
fill(255, 105, 180, 64);
noStroke();
circle(lightX, lightY, 13);
fill(255, 105, 180);
strokeWeight(0.5);
stroke(170, 51, 106);
circle(lightX, lightY, 8);
}
//button again
function goLink() {
window.open('https://hub.xpub.nl/breadcube/webcam.html');
}
function draw() {
background(111, 78, 55);
stroke(3);
// apply noise filter
image(noiseFilter, 0, 0, width, height);
//circles pattern
for (let col = 30; col < windowWidth; col = col + 70) {
for (let row = 30; row <= windowHeight; row = row + 90) {
drawCircles(col, row);
}
} //endcircles
//labels pattern
for (let col = 9; col < windowWidth; col = col + 70) {
for (let row = 50; row <= windowHeight; row = row + 90) {
drawRect(col, row);
}
} //endlabels
//lights pattern
for (let col = 30; col < windowWidth; col = col + 70) {
for (let row = 2; row <= windowHeight; row = row + 90) {
drawLights(col, row);
}
} //endlights
//flickerin light
function greenLight() {
fill(255, 255, 255);
circle(380, 272, 8);
fill(0, 204, 51, 50, flickering());
noStroke();
circle(380, 272, 18);
fill(0, 204, 51, 64, flickering());
circle(380, 272, 13);
fill(0, 204, 51, flickering());
circle(380, 272, 8);
}
greenLight();
//the flickering bit
function flickering(){
offset += 0.2;
let n = noise(offset);
if(n < 0.40) return 0;
else return 100;
}
}

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,380 @@
/**
*
* @class p5LiveMedia
* @constructor
* @param {p5.sketch} [something] blah blah blah.
* @param {p5LiveMedia.MEDIA TYPE}
* @param {WebRTC stream}
* @example
*
function setup() {
// Stream Audio/Video
createCanvas(400, 300);
// For A/V streams, we need to use the createCapture callback method to get the "stream" object
video = createCapture(VIDEO, function(stream) {
let p5lm = new p5LiveMedia(this,"CAPTURE",stream)
p5lm.on('stream', gotStream);
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
});
video.muted = true;
video.hide();
// OR //
// Stream Canvas as Video
let c = createCanvas(400, 300);
video = createCapture(VIDEO);
video.muted = true;
video.hide();
let p5lm = new p5LiveMedia(this,"CANVAS",c);
p5lm.on('stream', gotStream);
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
// OR //
// Just Data
createCanvas(400, 300);
let p5lm = new p5LiveMedia(this,"DATA");
p5lm.on('data', gotData);
p5lm.on('disconnect', gotDisconnect);
}
function draw() {
image(video,0,0,width/2,height);
ellipse(mouseX,mouseY,100,100);
if (ovideo != null) {
rect(10,10,10,10);
image(ovideo,width/2,0,width/2,height);
}
}
// We got a new stream!
function gotStream(stream, id) {
print("New Stream from " + id);
// This is just like a video/stream from createCapture(VIDEO)
ovideo = stream;
//ovideo.hide();
}
function gotData(data, id) {
print("New Data from " + id);
// Got some data from a peer
print(data);
}
function gotDisconnect(id) {
print(id + " disconnected");
}
*/
class p5LiveMedia {
constructor(sketch, type, elem, room, host) {
this.sketch = sketch;
//sketch.disableFriendlyErrors = true;
this.simplepeers = [];
this.mystream;
this.onStreamCallback;
this.onDataCallback;
this.onDisconnectCallback;
if (!host) {
this.socket = io.connect("https://p5livemedia.itp.io/");
} else {
this.socket = io.connect(host);
}
//console.log(elem.elt);
if (type == "CANVAS") {
this.mystream = elem.elt.captureStream(30);
} else if (type == "CAPTURE") {
this.mystream = elem;
} else {
// Assume it is just "DATA"
}
this.socket.on('connect', () => {
//console.log("Socket Connected");
//console.log("My socket id: ", this.socket.id);
//console.log("***"+window.location.href);
// Sends back a list of users in the room
if (!room) {
this.socket.emit("room_connect", window.location.href);
} else {
this.socket.emit("room_connect", room);
}
});
this.socket.on('disconnect', (data) => {
// console.log("Socket disconnected");
});
this.socket.on('peer_disconnect', (data) => {
//console.log("simplepeer has disconnected " + data);
for (let i = 0; i < this.simplepeers.length; i++) {
if (this.simplepeers[i].socket_id == data) {
//console.log("Removed the DOM Element if it exits");
this.removeDomElement(this.simplepeers[i]);
//console.log("Removing simplepeer: " + i);
this.simplepeers.splice(i,1);
break;
}
}
this.callOnDisconnectCallback(data);
});
// Receive listresults from server
this.socket.on('listresults', (data) => {
//console.log(data);
for (let i = 0; i < data.length; i++) {
// Make sure it's not us
if (data[i] != this.socket.id) {
// create a new simplepeer and we'll be the "initiator"
let simplepeer = new SimplePeerWrapper(this,
true, data[i], this.socket, this.mystream
);
// Push into our array
this.simplepeers.push(simplepeer);
}
}
});
this.socket.on('signal', (to, from, data) => {
//console.log("Got a signal from the server: ", to, from, data);
// // to should be us
// if (to != this.socket.id) {
// console.log("Socket IDs don't match");
// }
// Look for the right simplepeer in our array
let found = false;
for (let i = 0; i < this.simplepeers.length; i++)
{
if (this.simplepeers[i].socket_id == from) {
//console.log("Found right object");
// Give that simplepeer the signal
this.simplepeers[i].inputsignal(data);
found = true;
break;
}
}
if (!found) {
//console.log("Never found right simplepeer object");
// Let's create it then, we won't be the "initiator"
let simplepeer = new SimplePeerWrapper(this,
false, from, this.socket, this.mystream
);
// Push into our array
this.simplepeers.push(simplepeer);
// Tell the new simplepeer that signal
simplepeer.inputsignal(data);
}
});
}
// // use this to add a track to a stream - assuming this is a stream, it will have to extract the track out
// addtrack(stream, type) {
// if (type == "CANVAS") {
// this.mystream = elem.elt.captureStream(30);
// } else if (type == "CAPTURE") {
// this.mystream = elem;
// }
// }
send(data) {
for (let i = 0; i < this.simplepeers.length; i++) {
if (this.simplepeers[i] != null) {
this.simplepeers[i].send(data);
}
}
}
on(event, callback) {
if (event == 'stream') {
this.onStream(callback);
} else if (event == 'data') {
this.onData(callback);
} else if (event == "disconnect") {
this.onDisconnect(callback);
}
}
onDisconnect(callback) {
this.onDisconnectCallback = callback;
}
onStream(callback) {
this.onStreamCallback = callback;
}
onData(callback) {
this.onDataCallback = callback;
}
callOnDisconnectCallback(id) {
if (this.onDisconnectCallback) {
this.onDisconnectCallback(id);
}
}
callOnDataCallback(data, id) {
if (this.onDataCallback) {
this.onDataCallback(data, id);
}
}
removeDomElement(ssp) {
if (ssp.domElement) {
document.body.removeChild(ssp.domElement);
}
}
callOnStreamCallback(domElement, id) {
if (this.onStreamCallback) {
//////////////////////
// Copied from createCapture and addElement in p5.js source 10/12/2020
//const videoEl = addElement(domElement, this.sketch, true);
document.body.appendChild(domElement);
let videoEl = new p5.MediaElement(domElement, this.sketch);
this.sketch._elements.push(videoEl);
videoEl.loadedmetadata = false;
// set width and height onload metadata
domElement.addEventListener('loadedmetadata', function() {
domElement.play();
if (domElement.width) {
videoEl.width = domElement.width;
videoEl.height = domElement.height;
} else {
videoEl.width = videoEl.elt.width = domElement.videoWidth;
videoEl.height = videoEl.elt.height = domElement.videoHeight;
}
videoEl.loadedmetadata = true;
});
/////////////////////////////
this.onStreamCallback(videoEl, id);
}
else {
//console.log("no onStreamCallback set");
}
}
}
// A wrapper for simplepeer as we need a bit more than it provides
class SimplePeerWrapper {
constructor(p5lm, initiator, socket_id, socket, stream) {
this.simplepeer = new SimplePeer({
initiator: initiator,
trickle: false
});
this.p5livemedia = p5lm;
// Their socket id, our unique id for them
this.socket_id = socket_id;
// Socket.io Socket
this.socket = socket;
// Are we connected?
this.connected = false;
// Our video stream
this.stream = stream;
// Dom Element
this.domElement = null;
// simplepeer generates signals which need to be sent across socket
this.simplepeer.on('signal', data => {
this.socket.emit('signal', this.socket_id, this.socket.id, data);
});
// When we have a connection, send our stream
this.simplepeer.on('connect', () => {
//console.log('simplepeer connection')
//console.log(this.simplepeer);
//p.send('whatever' + Math.random())
// We are connected
this.connected = true;
// Let's give them our stream, if we have a stream that is
if (stream != null) {
this.simplepeer.addStream(stream);
//console.log("Send our stream");
}
});
// Stream coming in to us
this.simplepeer.on('stream', stream => {
//console.log('Incoming Stream');
// This should really be a callback
// Create a video object
this.domElement = document.createElement("VIDEO");
this.domElement.id = this.socket_id;
this.domElement.srcObject = stream;
this.domElement.muted = false;
this.domElement.onloadedmetadata = function(e) {
e.target.play();
};
//document.body.appendChild(ovideo);
//console.log(this.domElement);
this.p5livemedia.callOnStreamCallback(this.domElement, this.socket_id);
});
this.simplepeer.on('data', data => {
let stringData = String(data);
this.p5livemedia.callOnDataCallback(stringData, this.socket_id);
});
this.simplepeer.on('error', (err) => {
// ERR_WEBRTC_SUPPORT
// ERR_CREATE_OFFER
// ERR_CREATE_ANSWER
// ERR_SET_LOCAL_DESCRIPTION
// ERR_SET_REMOTE_DESCRIPTION
// ERR_ADD_ICE_CANDIDATE
// ERR_ICE_CONNECTION_FAILURE
// ERR_SIGNALING
// ERR_DATA_CHANNEL
// ERR_CONNECTION_FAILURE
console.log(err);
});
}
send(data) {
if (this.connected) {
this.simplepeer.send(data);
} else {
//console.log("Can't send, not connected");
}
}
inputsignal(sig) {
this.simplepeer.signal(sig);
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://p5livemedia.itp.io/simplepeer.min.js"></script>
<script type="text/javascript" src="https://p5livemedia.itp.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5-2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min-2.js"></script>
<script type="text/javascript" src="https://p5livemedia.itp.io/p5livemedia.js"></script>
<link rel="stylesheet" type="text/css" href="webcam.css">
<meta charset="utf-8" />
</head>
<body>
<script src="webcam.js"></script>
</body>
</html>

@ -0,0 +1,41 @@
let y = 0;
let myVideo;
let otherVideo;
function setup() {
createCanvas(windowHeight, windowWidth,WEBGL);
let constraints = {audio: true, video: true};
myVideo = createCapture(constraints,
function(stream) {
let p5l = new p5LiveMedia(this, "CAPTURE", stream, "NYAMST")
p5l.on('stream', gotStream);
}
);
myVideo.elt.muted = true;
myVideo.hide();
}
function draw() {
background(0);
strokeWeight(3);
translate(-200,-90)
texture(myVideo);
circle(0, 0, 300);
if (otherVideo) {
blend(otherVideo, 0, 0, otherVideo.width, otherVideo.height, 0, 0, width, height, MULTIPLY);
strokeWeight(3);
translate(-400,-90)
texture(otherVideo);
circle(0, 0, 300);
}
}
// We got a new stream!
function gotStream(stream, id) {
// This is just like a video/stream from createCapture(VIDEO)
otherVideo = stream;
//otherVideo.id and id are the same and unique identifiers
otherVideo.hide();
}
Loading…
Cancel
Save