Merge branch 'master' of https://git.xpub.nl/XPUB/SI21
Boyana
1 year ago
commit
74708e5b3e
@ -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.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
|
||||
<script type="text/javascript" src="https://p5livemedia.itp.io/p5livemedia.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<meta charset="utf-8" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
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
@ -0,0 +1,36 @@
|
||||
|
||||
let myVideo;
|
||||
let otherVideo;
|
||||
|
||||
function setup() {
|
||||
createCanvas(windowHeight, windowWidth);
|
||||
|
||||
let constraints = {audio: true, video: true};
|
||||
myVideo = createCapture(constraints,
|
||||
function(stream) {
|
||||
let p5l = new p5LiveMedia(this, "CAPTURE", stream, "NYCAMST")
|
||||
p5l.on('stream', gotStream);
|
||||
}
|
||||
);
|
||||
myVideo.elt.muted = true;
|
||||
myVideo.hide();
|
||||
}
|
||||
|
||||
function draw() {
|
||||
|
||||
background(220);
|
||||
stroke(255);
|
||||
image(myVideo,0,0,width,height);
|
||||
if (otherVideo) {
|
||||
blend(otherVideo, 0, 0, otherVideo.width, otherVideo.height, 0, 0, width, height, MULTIPLY);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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();
|
||||
}
|
||||
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,2 @@
|
||||
GESTURE_APPLICATION_ROOT=/breadcube/gesture
|
||||
GESTURE_PORTNUMBER=5002
|
||||
@ -0,0 +1,10 @@
|
||||
include .env
|
||||
export
|
||||
|
||||
default: local
|
||||
|
||||
local:
|
||||
@flask run --debug
|
||||
|
||||
breadcube:
|
||||
@SCRIPT_NAME=${GESTURE_APPLICATION_ROOT} gunicorn -b localhost:${GESTURE_PORTNUMBER} --reload app:app
|
||||
Binary file not shown.
@ -0,0 +1,10 @@
|
||||
import os
|
||||
from dotenv import main
|
||||
|
||||
# Load environment variables from the .env file
|
||||
main.load_dotenv()
|
||||
|
||||
# Bind them to Python variables
|
||||
APPLICATION_ROOT = os.environ.get('GESTURE_APPLICATION_ROOT', '/')
|
||||
PORTNUMBER = int(os.environ.get('GESTURE_PORTNUMBER', 5001))
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
Loading…
Reference in New Issue