https://github.com/mattdemichele-pearson/twilio-video-app-react/commit/f2f019036ede7dd3f92c30f43b6ec0115d6c586c

gistfile1.diff

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 443c1f120..7cb7c3f5e 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import ParticipantList from '../ParticipantList/ParticipantList';
 import { styled } from '@material-ui/core/styles';
 import MainParticipant from '../MainParticipant/MainParticipant';
+import useVideoContext from '../../hooks/useVideoContext/useVideoContext';
+import { LocalVideoTrack, Track, LogLevels } from 'twilio-video';
+
+interface MediaStreamTrackPublishOptions {
+  name?: string;
+  priority: Track.Priority;
+  logLevel: LogLevels;
+}
 
 const Container = styled('div')(({ theme }) => {
   const totalMobileSidebarHeight = `${theme.sidebarMobileHeight +
@@ -22,8 +30,35 @@ const Container = styled('div')(({ theme }) => {
 });
 
 export default function Room() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { room } = useVideoContext();
+
+  useEffect(() => {
+    const canvas = canvasRef?.current;
+
+    if (canvas && room.localParticipant.identity === 'canvas') {
+      const ctx = canvas.getContext('2d')!;
+      const { width, height } = ctx.canvas;
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, width, height);
+      ctx.fillStyle = '#FF0000';
+      ctx.fillRect(0, 0, 150, 75);
+
+      const stream = canvas.captureStream(30);
+      const track = new LocalVideoTrack(stream.getVideoTracks()[0]);
+
+      console.log('canvas track!', track);
+
+      room.localParticipant.publishTrack(track, {
+        name: 'canvasStream',
+        priority: 'low',
+      } as MediaStreamTrackPublishOptions);
+    }
+  }, []);
   return (
     <Container>
+      <canvas width={300} height={300} style={{ zIndex: 100, backgroundColor: 'white' }} ref={canvasRef}></canvas>
       <MainParticipant />
       <ParticipantList />
     </Container>
diff --git a/src/components/VideoTrack/VideoTrack.tsx b/src/components/VideoTrack/VideoTrack.tsx
index 56832e74f..fd333402a 100644
--- a/src/components/VideoTrack/VideoTrack.tsx
+++ b/src/components/VideoTrack/VideoTrack.tsx
@@ -6,8 +6,8 @@ import useMediaStreamTrack from '../../hooks/useMediaStreamTrack/useMediaStreamT
 import useVideoTrackDimensions from '../../hooks/useVideoTrackDimensions/useVideoTrackDimensions';
 
 const Video = styled('video')({
-  width: '100%',
-  height: '100%',
+  width: '50%',
+  height: '50%',
 });
 
 interface VideoTrackProps {
diff --git a/src/types.ts b/src/types.ts
index bcdf80d48..734f095b9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -43,6 +43,10 @@ declare global {
     };
   }
 
+  interface HTMLCanvasElement {
+    captureStream(frameRate?: number): MediaStream;
+  }
+
   interface MediaDevices {
     getDisplayMedia(constraints: MediaStreamConstraints): Promise<MediaStream>;
   }