Commit 1e11765e authored by Lloyd Henning's avatar Lloyd Henning
Browse files

update README with tips

parent 6a4b4d76
......@@ -277,8 +277,41 @@ on private and public notworks.
your friends can go to `<USER>` (replace `<USER>` with
your upload user name) to try out your project!
## Tips
- To speed up the upload, remove the compilation of the examples by editing
`webpack.config.js` and commenting out the entries in the examples object. On
our machine this takes upload times from 192 seconds to 37 seconds.
const examples = {
//sample: '1-simple.js',
//growChat: '2-grow-chat.ts',
//sound: '3-sound.ts',
//lifecycle: '4-lifecycle.ts',
//doorbell: '5-doorbell.ts',
- To use typescript instead of javascript in the main file change the name
of `index.js` to `index.ts`, and edit the `webpack.config.js` to use `src/index.ts`
as the entry point, instead of `index.js`.
module.exports = {
mode: 'development',
entry: {
index: './src/index.ts', // <-- This line is changed
// ...
\ No newline at end of file
import * as p5 from 'p5';
import 'p5/lib/addons/p5.sound';
import { P5VideoRoom } from './lib/p5videoroom/P5VideoRoom';
import { roomId } from './roomId';
import './style.scss';
// This is a typescript version of the index.js starter template.
* Define our sketch.
* @param {p5} sketch An instance of p5, where you would normally call a p5
* function, e.g., fill(0), you now call sketch.fill(0).
const videoRoomSketch = (sketch: p5) => {
// Create the video room. This sets up a video call and asks the user for
// permission to use their webcam/microphone
const videoRoom = new P5VideoRoom(sketch, roomId);
const width = 400;
const height = 400;
sketch.setup = () => {
sketch.createCanvas(width, height);
// Browsers won't let us play sound until there is a user interaction. So we
// track whether one has occured here. We will use this to decide whether to
// unmute the videos.
let hasInteracted = false;
sketch.mousePressed = () => {
hasInteracted = true;
sketch.draw = () => {
// Draw the remote videos. Each entry has a video property which is asks
// P5MediaElement that can be passed to image() to draw. The entry also
// has x and y coordinates of the participant's cursor.
videoRoom.forEachRemoteVideo((rV) => {
const { data } = rV;
if (data === null) {
const element =;
// Only play their audio if there has been an interaction with the
// browser.
element.muted = !hasInteracted;
sketch.image(, data.x, data.y, 100, 100);
const x = sketch.mouseX;
const y = sketch.mouseY;
if (videoRoom.localVideo !== null) {
sketch.image(videoRoom.localVideo, x, y, 100, 100);
// Send our position and mouse data to the other participants in chat. The
// video is sent by WebRTC internally so we don't have to manage that.
videoRoom.sendData({ x, y, mouseIsPressed: sketch.mouseIsPressed });
// Create and run the sketch.
new p5(videoRoomSketch);
// Change this to the Room ID your room ID. The example ID is 1237.
export const roomId = 1237;
export const roomId = 20;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment