new folder
ada
2 years 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…
Reference in New Issue