diff --git a/src/dash/dash.html b/src/dash/dash.html
index dd9af95..70e4a89 100644
--- a/src/dash/dash.html
+++ b/src/dash/dash.html
@@ -10,9 +10,9 @@
         <div class="tab" data-target="#home">Home</div>
         <div class="tab" data-target="#self-view">Self-view</div>
         <div class="tab" data-target="#device-manager">Device Manager</div>
-        <div class="tab" data-target="#modify-stream">Modify Stream</div>
+        <div class="tab active" data-target="#modify-stream">Modify Stream</div>
         <div class="tab" data-target="#record">Record</div>
-        <div class="tab active" data-target="#presence">Presence</div>
+        <div class="tab" data-target="#presence">Presence</div>
     </div>
     <div class="content" id="home">
         <div class="d-flex h-100">
@@ -172,7 +172,7 @@ <h5>Hide Devices</h5>
     <!-- END: DEVICE MANAGER -->
 
     <!-- START: STREAM MODIFICATION  -->
-    <div class="content" id="modify-stream">
+    <div class="content active" id="modify-stream">
         <div class="d-flex h-100">
             <button class="btn icon-button btn-outline-secondary streamModificationButton" data-bs-toggle="tooltip"
                     data-bs-placement="top" title="Enable Stream Modification">
@@ -257,7 +257,7 @@ <h5>Output</h5>
         </div>
     </div>
 
-    <div class="content active" id="presence">
+    <div class="content" id="presence">
         <!-- Presence Control -->
         <div class="d-flex flex-row flex-nowrap h-100">
             <button class="btn icon-button btn-outline-secondary" id="presence-enable" data-bs-toggle="tooltip"
diff --git a/src/extension-core/scripts/content.js b/src/extension-core/scripts/content.js
index fe8866a..6b2c1b1 100644
--- a/src/extension-core/scripts/content.js
+++ b/src/extension-core/scripts/content.js
@@ -27,11 +27,17 @@ window.vch = {
  * Get the tabId from background
  *  - tabId is not directly exposed to content context
  */
-mh.addListener(m.HELLO, (message)=>{
-    window.vch.tabId = message.tabId;
-    // debug("hello", message);
+mh.addListener(m.TAB_ID, (message)=>{
+    const tabId = message.tabId;
+    if(!tabId){
+        debug("ERROR: tabId not provided on TAB_ID listener", message);
+        return;
+    }
+    debug(`this is tab ${tabId}`);
+    window.vch.tabId = tabId;
+    mh.sendMessage(c.INJECT, m.TAB_ID, {tabId: tabId});
 });
-mh.sendMessage(c.BACKGROUND, m.HELLO);
+mh.sendMessage(c.BACKGROUND, m.TAB_ID);
 
 
 /************ START inject script injection ************/
diff --git a/src/extension-core/scripts/inject.js b/src/extension-core/scripts/inject.js
index 6334983..3c00c65 100644
--- a/src/extension-core/scripts/inject.js
+++ b/src/extension-core/scripts/inject.js
@@ -463,6 +463,13 @@ navigator.mediaDevices.removeEventListener = function (type, listener) {
     return originalRemoveEventListener(type, listener);
 };
 
+// Get the tab id
+mh.addListener(m.TAB_ID, message => {
+    vch.tabId = message.tabId;
+    debug(`this is tab ${message.tabId}`);
+});
+
+// ToDo: make this more general
 // Settings updates that impact the inject context
 mh.addListener(m.UPDATE_BAD_CONNECTION_SETTINGS, (data) => {
     debug("UPDATE_BAD_CONNECTION_SETTINGS", data);
@@ -483,6 +490,7 @@ const vch = {
     pcTracks: [],
     gumTracks: [],      // original, pre-shimmed getUserMedia tracks
     pcs: [],
+    tabId: null
 }
 
 if (process.env.NODE_ENV) window.vch = vch;
diff --git a/src/modules/messageHandler.mjs b/src/modules/messageHandler.mjs
index ec7768d..5a3863c 100644
--- a/src/modules/messageHandler.mjs
+++ b/src/modules/messageHandler.mjs
@@ -653,7 +653,7 @@ export const CONTEXT = {
 export const MESSAGE = {
     PING: 'ping',   // background -> content
     PONG: 'pong',   // content -> background
-    HELLO: 'hello', // content <-> background for getting tab
+    TAB_ID: 'tab_id', // content <-> background for getting tab
 
     // used in inject.js
     GET_ALL_SETTINGS: 'get_all_settings',
@@ -725,7 +725,6 @@ export const MESSAGE = {
     // player
     PLAYER_START: 'player_start',
     PLAYER_LOAD: 'player_load',
-    PLAYER_TRANSFER: 'player_transfer',
     PLAYER_PAUSE: 'player_pause',
     PLAYER_RESUME: 'player_resume',     // used in the worker to skip reading
     PLAYER_END: 'player_end',               // used in the worker to end the transform
diff --git a/src/static/media/black_static.mp4 b/src/static/media/black_static.mp4
new file mode 100644
index 0000000..6a2ac8e
Binary files /dev/null and b/src/static/media/black_static.mp4 differ
diff --git a/src/videoPlayer/scripts/background.mjs b/src/videoPlayer/scripts/background.mjs
deleted file mode 100644
index 12b3476..0000000
--- a/src/videoPlayer/scripts/background.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-import {settings as videoPlayerSettingsProto} from './settings.mjs';
-const debug = Function.prototype.bind.call(console.log, console, `🫥💾 `);
-
-import {StorageHandler} from "../../modules/storageHandler.mjs";
-await StorageHandler.initStorage('player', videoPlayerSettingsProto);
-const storage = await new StorageHandler(debug);
-
-import {IndexedDBHandler} from "./indexedDB.mjs";
-const db = new IndexedDBHandler('videoPlayer');
-
-// get the buffer from db, create an object URL and load it into storage
-const { mimeType, loop, videoTimeOffsetMs, currentTime} = storage.contents['player'];
-const buffer = await db.get('buffer').catch(error => {
-    debug("Error getting video buffer from indexedDB", error);
-});
-if(buffer?.length > 0){
-    const blob = new Blob([buffer], {type: mimeType});
-    const url = URL.createObjectURL(blob);
-    await storage.set('player', {objectUrl: url, mimeType, loop, videoTimeOffsetMs, currentTime});
-}
-else {
-    debug("no media content in storage to load");
-    // await storage.set('player', {objectUrl: null, mimeType: ""});
-}
diff --git a/src/videoPlayer/scripts/content.mjs b/src/videoPlayer/scripts/content.mjs
index 8bdd6be..a550795 100644
--- a/src/videoPlayer/scripts/content.mjs
+++ b/src/videoPlayer/scripts/content.mjs
@@ -1,6 +1,4 @@
-import {ImageStream} from "../../imageCapture/scripts/content.mjs";
 import {base64ToBuffer} from "./base64.mjs";
-
 import {StorageHandler} from "../../modules/storageHandler.mjs";
 import {MESSAGE as m, CONTEXT as c, MessageHandler} from "../../modules/messageHandler.mjs";
 
@@ -8,194 +6,52 @@ const debug = Function.prototype.bind.call(console.debug, console, `vch 🎥‍
 const storage = await new StorageHandler();
 const mh = new MessageHandler(c.CONTENT);
 
-/* type {HTMLVideoElement} */
-let videoPlayer = null;
-export let imagePreview = null; // used to hold the gUM preview image generator
-let injectReady = false;
-
-
-mh.addListener(m.INJECT_LOADED, async () => {
-    injectReady = true;
+// Use a shadow root to isolate the video player from the page
+const shadowContainer = document.createElement('div');
+shadowContainer.id = 'vch-player-container';
+const shadowRoot = shadowContainer.attachShadow({ mode: 'open' });
+
+// create the video player
+const videoPlayerElement = document.createElement('video');
+const placeHolderVideo = chrome.runtime.getURL('media/black_static.mp4');
+videoPlayerElement.src = placeHolderVideo;
+videoPlayerElement.loop = true;
+videoPlayerElement.id = `vch-player`;
+videoPlayerElement.preload = "auto";
+videoPlayerElement.hidden = true;
+videoPlayerElement.muted = true;
+
+// Append the video player element to the shadow root
+shadowRoot.appendChild(videoPlayerElement);
+
+// Append the shadow container to the body so inject can access it
+document.addEventListener('DOMContentLoaded', async () => {
+    document.body.appendChild(shadowContainer);
+    debug("added video player element", videoPlayerElement);
 });
 
-// await storage.update('player', {active: false});
-
-
-/*
-   Not easy to send a stream to dash:
-     * can't access the iframe content - CORS issues
-     * can't send the stream over postMessage - it's not serializable
-     * can't pass a resource URL - treated as different domains
-   ideas:
-     1. open a new stream - could cause gUM conflicts, more encoding
-     2. send snapshots - this is what did
-*/
-/**
- * Grabs the last stream and generates preview thumbnails
- * @returns {Promise<void>}
- */
-export async function showPreview() {
-    const stream = window.vch.streams
-        .filter(stream=>stream.active)
-        .at(-1);  // get the last stream  // ToDo: get the highest res gUM stream
-    if (stream) {
-        imagePreview = new ImageStream(stream, 200, c.DASH, true);
-        debug("showPreview:: stream", stream);
-        await imagePreview.start();
-    } else
-        imagePreview = null;
-}
-
-// Stop the preview image stream if the dash is closed
-/*
-mh.addListener(m.TOGGLE_DASH, async () => {
-    // const iframe = document.querySelector('iframe#vch_dash');
-    // if (!iframe)
-        // wait for 500 ms to see if the dash is opening
-        await new Promise(resolve => setTimeout(resolve, 500));
-
-    debug(`toggleDash: dash is ${window.vch?.dashOpen ? "open" : "closed" }`);
-
-    if (window.vch.dashOpen)
-        await showPreview();
-    else if (imagePreview) {
-        imagePreview?.stop();
-        debug("showPreview stopped - dash closed");
-    } else
-        debug("showPreview not started and dash closed");
-});
- */
-
-// ToDo: consider if I want to show this
-/*
-// restart on a new stream
-mh.addListener(m.GUM_STREAM_START, async () => {
-    if (window.vch.dashOpen) {
-        imagePreview?.stop();
-        debug("restarting showPreview on new gUM stream");
-        await showPreview();
-    }
-
-});
-
- */
-
-/**
- * Load a media file into a video element
- * @returns {Promise<void>}
- */
- async function loadMedia() {
-
-     return new Promise(async (resolve, reject) => {
-
-         /**
-          * @param  {string} buffer - base64 encoded video file
-          * @param {string} mimeType - the mime type of the video file
-          * @param  {boolean} loop - loop the video (not used)
-          * @param {number} playbackOffset
-          */
-
-         const { objectUrl, mimeType, loop, videoTimeOffsetMs, currentTime} = storage.contents['player'];
-        if(!objectUrl){
-            debug("no objectUrl in storage to load media");
-            resolve("no objectUrl in storage to load media");
-            return
-        }
-         if(!mimeType){
-             debug("no mimeType in storage to load media");
-             reject("no mimeType in storage to load media");
-             return
-         }
-
-         const transmissionDelay = new Date().getTime() - currentTime;
-         const playbackOffset = (videoTimeOffsetMs + transmissionDelay) / 1000;
-
-         // const arrayBuffer = base64ToBuffer(buffer);
-         // const blob = new Blob([arrayBuffer], {type: mimeType}); // Ensure the MIME type matches the video format
-
-         // Set up the video player if it doesn't exist
-         if(!videoPlayer) {
-             // ToDo: use shadow DOM
-             videoPlayer = document.createElement('video');
-             //videoPlayer.src = URL.createObjectURL(blob);
-             videoPlayer.src = objectUrl;
-             videoPlayer.loop = loop;
-             videoPlayer.id = `vch-player-${Math.random().toString().substring(2, 6)}`;
-             videoPlayer.preload = "auto";
-             videoPlayer.hidden = true;
-             videoPlayer.muted = true;
-             // set the style to fit to cover
-             // videoPlayer.style.cssText = "object-fit:cover;";
-
-             // captureStream takes the source video size so this doesn't matter
-             // const {width, height} = streams.at(-1)?.getVideoTracks()[0]?.getSettings();
-             // videoPlayer.height = height;
-             // videoPlayer.width = width;
-
-             document.body.appendChild(videoPlayer);
-             debug("added video element", videoPlayer);
-
-              function sendVideoElement(){
-                 if(injectReady)
-                      mh.sendMessage(c.INJECT, m.PLAYER_TRANSFER, {id: videoPlayer.id});
-                 else
-                    setTimeout(async ()=> sendVideoElement(), 500)
-             }
-             sendVideoElement();
-
-
-             videoPlayer.oncanplay = async () => {
-                 videoPlayer.oncanplay = null;
-                 // videoPlayer.currentTime = playbackOffset;
-                 debug("Adjusted playback to match sync", playbackOffset);
-                 resolve();
-             };
-         }
-         else {
-             // videoPlayer.src = URL.createObjectURL(blob);
-             videoPlayer.src = objectUrl;
-             debug("Set video source", objectUrl);
-             resolve();
-         }
-     });
-
-}
-
 
 /**
  *  Look for storage changes and update media if a new media file is loaded
  *   - used to preload media for faster playback
  */
 storage.addListener('player', async (newValue) => {
-    debug("player storage changed", newValue);
-
-    // In the future also check for changes to other video params
-    if (newValue.currentTime) {
-        await loadMedia().catch(error => debug("Error loading media into player", error));
-    }
-});
-
-
-/**
- *  Tell inject to take the video player stream
- */
-/*
-mh.addListener(m.GUM_STREAM_START, async () => {
-    if (!storage.contents['player']?.enabled) return;
-
-    if (videoPlayer) {
-        mh.sendMessage(c.INJECT, m.PLAYER_START, { id: videoPlayer.id });
-        // await storage.update('player', { active: true });
-    } else {
-        try {
-            await loadMedia();
-            mh.sendMessage(c.INJECT, m.PLAYER_START, { id: videoPlayer.id });
-            // await storage.update('player', { active: true });
-        } catch (error) {
-            debug("Error loading media", error);
+    // debug("player storage changed", newValue);
+
+    if (newValue?.currentTime) {
+        // storage can be slow with large objects, so do await with get
+        const temp = await storage.get('temp');
+        const buffer = temp?.buffer;
+        // In the future also check for changes to other video params
+        if (buffer?.length) {
+            const arrayBuffer = base64ToBuffer(buffer);
+            // const mimeType = storage.contents['player']?.mimeType;
+            const blob = new Blob([arrayBuffer]); //, {type: mimeType}); // Ensure the MIME type matches the video format
+            videoPlayerElement.src = URL.createObjectURL(blob);
+            storage.delete('temp').catch(err => debug(err));
+            debug("loaded player media", buffer.length);
         }
+        else
+            debug("failed load player media - invalid buffer", buffer);
     }
 });
- */
-
-await loadMedia().catch(error => debug("Error loading media into player", error));
diff --git a/src/videoPlayer/scripts/dash.mjs b/src/videoPlayer/scripts/dash.mjs
index 29259e9..6d352e9 100644
--- a/src/videoPlayer/scripts/dash.mjs
+++ b/src/videoPlayer/scripts/dash.mjs
@@ -58,7 +58,7 @@ addMediaButton.addEventListener('click', async () => {
         return;
     }
 
-    injectButton.classList.toggle('disabled', true);
+    injectButton.classList.toggle('disabled', false);
 });
 
 
@@ -146,8 +146,9 @@ async function startRecording() {
         };
 
         try{
-            await db.set('buffer',  arrayBufferToBase64(arrayBuffer));
-            await storage.update('player', data);
+            await db.set('buffer',  arrayBufferToBase64(arrayBuffer));                       // store for future access
+            await storage.set('temp', {buffer: arrayBufferToBase64(arrayBuffer)});  // temp transfer
+            await storage.update('player', data);                                                  // other player settings
         }
         catch(err){
             debug("error saving recording to storage", err);
@@ -218,9 +219,14 @@ previewButton.addEventListener('mouseout', () => {
     }
 });
 
-// Initial setup - load the preview video from storage
-//if (storage.contents['player']?.buffer) {
-db.onOpened().then(async()=>{
+/**
+ * Load the video buffer from storage
+ * - set the preview video source
+ * - enable the inject button if there is a buffer
+ *  - put the buffer in the temp storage for content to use
+ * @returns {Promise<void>}
+ */
+async function handleBuffer(){
     const buffer = await db.get('buffer');
     if (buffer?.length > 0) {
         const mimeType = storage.contents['player'].mimeType;
@@ -230,13 +236,36 @@ db.onOpened().then(async()=>{
         playerPreview.src = URL.createObjectURL(blob);
         playerPreview.currentTime = 1;
         playerPreview.load();
+        playerPreview.pause();
 
         // remove the disabled class from the inject button
         injectButton.classList.remove('disabled');
+
+        // Need this to trigger player load
+        const data = storage.contents['player'];
+        data.currentTime = new Date().getTime();
+
+        await storage.update('temp', {buffer});  // temp transfer
+        debug("loaded video arrayBuffer:", arrayBuffer.byteLength);
+
     }
     else {
         debug("no media content in db to load");
         injectButton.classList.add('disabled');
     }
+}
+
+// Initial setup - load the preview video from storage, send the video to inject
+db.onOpened().then(async()=>{
+    if(storage.contents['player']?.enabled)
+        await handleBuffer();
 });
 
+// add a storage listener for player. if enabled changed to true then load the buffer
+storage.addListener('player', async (newValue, changedValue) => {
+    debug("player storage changed (new, whatChanged)", newValue, changedValue);
+    if (changedValue?.enabled && newValue?.enabled) {
+        debug("player enabled");
+        await handleBuffer();
+    }
+});
diff --git a/src/videoPlayer/scripts/indexedDB.mjs b/src/videoPlayer/scripts/indexedDB.mjs
index 32ced96..e712d93 100644
--- a/src/videoPlayer/scripts/indexedDB.mjs
+++ b/src/videoPlayer/scripts/indexedDB.mjs
@@ -21,7 +21,6 @@ export class IndexedDBHandler {
 
     /**
      * Debug log function for IndexedDB operations
-     * @type {any}
      */
     static debug = Function.prototype.bind.call(console.debug, console, `vch 💾 `);
 
@@ -30,17 +29,45 @@ export class IndexedDBHandler {
      */
     init() {
         this.dbReadyPromise = new Promise((resolve, reject) => {
-            const request = indexedDB.open(this.dbName, 1);
+            const request = indexedDB.open(this.dbName);
 
             request.onupgradeneeded = (event) => {
                 const db = event.target.result;
-                db.createObjectStore(this.storeName, { keyPath: 'key' });
+                if (!db.objectStoreNames.contains(this.storeName)) {
+                    db.createObjectStore(this.storeName, {keyPath: 'key'});
+                    IndexedDBHandler.debug(`Object store '${this.storeName}' created successfully.`);
+                }
             };
 
             request.onsuccess = (event) => {
                 this.db = event.target.result;
-                IndexedDBHandler.debug('IndexedDB initialized successfully.');
-                resolve(); // Resolve the promise when the database is ready
+
+                // Check if the object store exists
+                if (!this.db.objectStoreNames.contains(this.storeName)) {
+                    this.db.close();
+                    // Reopen the database with a higher version to trigger onupgradeneeded
+                    const versionRequest = indexedDB.open(this.dbName, this.db.version + 1);
+
+                    versionRequest.onupgradeneeded = (event) => {
+                        const db = event.target.result;
+                        db.createObjectStore(this.storeName, {keyPath: 'key'});
+                        IndexedDBHandler.debug(`Object store '${this.storeName}' created on version upgrade.`);
+                    };
+
+                    versionRequest.onsuccess = (event) => {
+                        this.db = event.target.result;
+                        IndexedDBHandler.debug('IndexedDB initialized successfully with new object store.');
+                        resolve(); // Resolve the promise when the database is ready
+                    };
+
+                    versionRequest.onerror = (event) => {
+                        IndexedDBHandler.debug('Error reinitializing IndexedDB:', event.target.errorCode);
+                        reject('Error reinitializing IndexedDB: ' + event.target.errorCode);
+                    };
+                } else {
+                    IndexedDBHandler.debug('IndexedDB initialized successfully.');
+                    resolve(); // Resolve the promise when the database is ready
+                }
             };
 
             request.onerror = (event) => {
@@ -50,6 +77,15 @@ export class IndexedDBHandler {
         });
     }
 
+    /**
+     * onOpened method that returns a promise resolving when IndexedDB is ready
+     * @returns {Promise<void>}
+     */
+    onOpened() {
+        return this.dbReadyPromise;
+    }
+
+
     /**
      * onOpened method that returns a promise resolving when IndexedDB is ready
      * @returns {Promise<void>}
@@ -91,7 +127,7 @@ export class IndexedDBHandler {
         return new Promise((resolve, reject) => {
             const transaction = this.db.transaction(this.storeName, 'readwrite');
             const store = transaction.objectStore(this.storeName);
-            const request = store.add({ key, data: value });
+            const request = store.put({key, data: value});
 
             request.onsuccess = () => {
                 IndexedDBHandler.debug(`IndexedDB: Successfully set key ${key}`);
@@ -115,7 +151,7 @@ export class IndexedDBHandler {
         return new Promise((resolve, reject) => {
             const transaction = this.db.transaction(this.storeName, 'readwrite');
             const store = transaction.objectStore(this.storeName);
-            const request = store.put({ key, data: value });
+            const request = store.put({key, data: value});
 
             request.onsuccess = () => {
                 IndexedDBHandler.debug(`IndexedDB: Successfully updated key ${key}`);
diff --git a/src/videoPlayer/scripts/inject.mjs b/src/videoPlayer/scripts/inject.mjs
index 22f8e30..bfc114c 100644
--- a/src/videoPlayer/scripts/inject.mjs
+++ b/src/videoPlayer/scripts/inject.mjs
@@ -1,4 +1,9 @@
-import {MESSAGE as m, CONTEXT as c, MessageHandler, InjectToWorkerMessageHandler} from "../../modules/messageHandler.mjs";
+import {
+    MESSAGE as m,
+    CONTEXT as c,
+    MessageHandler,
+    InjectToWorkerMessageHandler
+} from "../../modules/messageHandler.mjs";
 
 const mh = new MessageHandler(c.INJECT);
 const wmh = new InjectToWorkerMessageHandler();
@@ -6,13 +11,11 @@ const debug = Function.prototype.bind.call(console.debug, console, `vch 💉️
 
 
 /** @type {HTMLVideoElement} */
-let videoPlayerElement = null;
-
-
-mh.addListener(m.PLAYER_TRANSFER, async (data) => {
-    debug("player transfer", data);
-    videoPlayerElement = document.querySelector(`video#${data.id}`);
-});
+let videoPlayerElement = null; // document.querySelector('video#vch-player');
+/** @type {AudioContext} */
+let audioCtx = null;
+/** @type {MediaElementAudioSourceNode} */
+let sourceNode = null;
 
 
 /**
@@ -24,128 +27,126 @@ mh.addListener(m.PLAYER_TRANSFER, async (data) => {
  * @param {string} workerName - the name of the worker to send messages to
  */
 export function setupPlayer(sourceTrack, workerName) {
+    const shadowContainer = document.querySelector('div#vch-player-container').shadowRoot;
+    videoPlayerElement = shadowContainer.querySelector('video#vch-player');
+    if (!videoPlayerElement) {
+        debug("ERROR! Video player not found", videoPlayerElement);
+        return
+    }
+    debug("Player setup", videoPlayerElement, sourceTrack.getSettings());
+
 
     /** @type {MediaStreamTrack} */
     let playerAudioTrack = null;
     /** @type {MediaStreamTrackProcessor} */
-    let processor= null;
+    let processor = null;
     let hasAlreadyPlayed = false;
 
-    /**
-     * Set up the canvas or audio context on player start
-     */
-    /*mh.addListener(m.PLAYER_LOAD, async (data) => {
-        // stop any previous workers
-        if(processor){
-            debug("stopping previous player before loading a new one");
-            wmh.sendMessage(workerName, m.PLAYER_END);
-        }*/
-
-        debug("Player setup", videoPlayerElement, sourceTrack.getSettings());
-
-        if (sourceTrack.kind === "audio") {
-
-            // ToDo: Google Meet uses 2 audio tracks but I can only attach a single context
-            // use webAudio to capture audio from the video element
-
-            function captureAudio(mediaElement){
-                if(!playerAudioTrack || playerAudioTrack?.readyState === 'ended'){
-                    const audioCtx = new AudioContext();
-                    const sourceNode = audioCtx.createMediaElementSource(videoPlayerElement);
-                    const destinationNode = audioCtx.createMediaStreamDestination();
-                    sourceNode.connect(destinationNode);
-                    // mute the video without muting the source
-                    audioCtx.setSinkId({type: "none"})
-                        .catch((error) => debug("failed to mute audio - setSinkId error: ", error));
-                    videoPlayerElement.muted = false;
-                    playerAudioTrack = destinationNode.stream.getAudioTracks()[0];
-                }
-
-                debug("capture videoplayer audio track: ", playerAudioTrack);
-                return playerAudioTrack;
-            }
+    if (sourceTrack.kind === "audio") {
+
+        // ToDo: Google Meet uses 2 audio tracks but I can only attach a single context
+        // use webAudio to capture audio from the video element
 
-            processor = new MediaStreamTrackProcessor(captureAudio(videoPlayerElement));
-        } else if (sourceTrack.kind === "video") {
-            // debug("track settings: ", sourceTrack.getSettings());
-            const {height, width, frameRate} = sourceTrack.getSettings();
-
-            /* Things that didn't work
-
-            // videoPlayer.height = height;
-            // videoPlayer.width = width;
-
-            // No srcObject, so you can't do this
-            // const [videoPlayerSourceTrack] = videoPlayer.srcObject.getVideoTracks();
-            // await videoPlayerSourceTrack.applyConstraints({height, width, frameRate});
-
-            //
-            // const playerVideoStream = videoPlayer.captureStream(frameRate);
-            // const playerVideoTrack = playerVideoStream.getVideoTracks()[0];
-
-            // const canvas = new OffscreenCanvas(width, height);   // no captureStream on an OffscreenCanvas
-            */
-
-            // Create a canvas
-            const canvas = document.createElement('canvas');
-            canvas.width = width;
-            canvas.height = height;
-            const ctx = canvas.getContext('2d');
-
-            // Implementing a cover to fit strategy
-            function drawVideoPlayerToCanvas() {
-                const sourceAspectRatio = videoPlayerElement.videoWidth / videoPlayerElement.videoHeight;
-                const targetAspectRatio = width / height;
-                let drawWidth, drawHeight, offsetX, offsetY;
-
-                // Cover to fit strategy
-                if (sourceAspectRatio > targetAspectRatio) {
-                    // Source is wider
-                    drawHeight = height;
-                    drawWidth = drawHeight * sourceAspectRatio;
-                    offsetX = (width - drawWidth) / 2;
-                    offsetY = 0;
-                } else {
-                    // Source is taller
-                    drawWidth = width;
-                    drawHeight = drawWidth / sourceAspectRatio;
-                    offsetX = 0;
-                    offsetY = (height - drawHeight) / 2;
-                }
-
-                ctx.drawImage(videoPlayerElement, offsetX, offsetY, drawWidth, drawHeight);
-                requestAnimationFrame(drawVideoPlayerToCanvas); // Keep updating the canvas with the video frame
+        function captureAudio() {
+            if (!audioCtx) {
+                audioCtx = new AudioContext();
+            }
+            if (!sourceNode) {
+                sourceNode = audioCtx.createMediaElementSource(videoPlayerElement);
+            }
+            if (!playerAudioTrack || playerAudioTrack.readyState === 'ended') {
+                const destinationNode = audioCtx.createMediaStreamDestination();
+                sourceNode.connect(destinationNode);
+                audioCtx.setSinkId({type: "none"})
+                    .catch((error) => debug("failed to mute audio - setSinkId error: ", error));
+                videoPlayerElement.muted = false;
+                playerAudioTrack = destinationNode.stream.getAudioTracks()[0];
             }
 
-            drawVideoPlayerToCanvas();
+            // debug("captured videoplayer audio track: ", playerAudioTrack);
+            return playerAudioTrack;
+        }
 
-            // Capture the stream from the canvas and get the track
-            const canvasStream = canvas.captureStream(frameRate);
-            const playerVideoTrack = canvasStream.getVideoTracks()[0];
+        processor = new MediaStreamTrackProcessor(captureAudio());
+    } else if (sourceTrack.kind === "video") {
+        // debug("track settings: ", sourceTrack.getSettings());
+        const {height, width, frameRate} = sourceTrack.getSettings();
+
+        /* Things that didn't work
+
+        // videoPlayer.height = height;
+        // videoPlayer.width = width;
+
+        // No srcObject, so you can't do this
+        // const [videoPlayerSourceTrack] = videoPlayer.srcObject.getVideoTracks();
+        // await videoPlayerSourceTrack.applyConstraints({height, width, frameRate});
+
+        //
+        // const playerVideoStream = videoPlayer.captureStream(frameRate);
+        // const playerVideoTrack = playerVideoStream.getVideoTracks()[0];
+
+        // const canvas = new OffscreenCanvas(width, height);   // no captureStream on an OffscreenCanvas
+        */
+
+        // Create a canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+
+        // Implementing a cover to fit strategy
+        function drawVideoPlayerToCanvas() {
+            const sourceAspectRatio = videoPlayerElement.videoWidth / videoPlayerElement.videoHeight;
+            const targetAspectRatio = width / height;
+            let drawWidth, drawHeight, offsetX, offsetY;
+
+            // Cover to fit strategy
+            if (sourceAspectRatio > targetAspectRatio) {
+                // Source is wider
+                drawHeight = height;
+                drawWidth = drawHeight * sourceAspectRatio;
+                offsetX = (width - drawWidth) / 2;
+                offsetY = 0;
+            } else {
+                // Source is taller
+                drawWidth = width;
+                drawHeight = drawWidth / sourceAspectRatio;
+                offsetX = 0;
+                offsetY = (height - drawHeight) / 2;
+            }
 
-            // uses videoHeight & videoWidth - no good way to change the size here
-            debug("player settings: ", playerVideoTrack.getSettings());
-            processor = new MediaStreamTrackProcessor(playerVideoTrack);
-        } else {
-            debug("ERROR! Video player fail - unknown kind: ", sourceTrack);
+            ctx.drawImage(videoPlayerElement, offsetX, offsetY, drawWidth, drawHeight);
+            requestAnimationFrame(drawVideoPlayerToCanvas); // Keep updating the canvas with the video frame
         }
 
-        debug(`${sourceTrack.kind} player loaded`);
+        drawVideoPlayerToCanvas();
+
+        // Capture the stream from the canvas and get the track
+        const canvasStream = canvas.captureStream(frameRate);
+        const playerVideoTrack = canvasStream.getVideoTracks()[0];
+
+        // uses videoHeight & videoWidth - no good way to change the size here
+        // debug("player video settings: ", playerVideoTrack.getSettings());
+        processor = new MediaStreamTrackProcessor(playerVideoTrack);
+    } else {
+        debug("ERROR! Video player fail - unknown kind: ", sourceTrack);
+    }
+
+    debug(`${sourceTrack.kind} player loaded`);
 
-    //});
 
     /**
      * Start the player
      *  - data not currently used
      */
     mh.addListener(m.PLAYER_START, async (data) => {
-        if(!videoPlayerElement){
+        if (!videoPlayerElement) {
             debug("ERROR! Video player not loaded");
             return;
         }
 
         // if there is already a processor then assume we just need to resume
-        if(hasAlreadyPlayed){
+        if (hasAlreadyPlayed) {
             wmh.sendMessage(workerName, m.PLAYER_RESUME);
             videoPlayerElement.currentTime = 0;    // restart the video for now since I have no timing controls in dash
             videoPlayerElement.play()
@@ -176,7 +177,7 @@ export function setupPlayer(sourceTrack, workerName) {
     mh.addListener(m.PLAYER_END, async (data) => {
         debug("player ended: ", data);
         wmh.sendMessage(workerName, m.PLAYER_END);
-        if(videoPlayerElement){
+        if (videoPlayerElement) {
             videoPlayerElement.pause();
             videoPlayerElement.remove();
             videoPlayerElement = null;
diff --git a/src/videoPlayer/videoPlayer.md b/src/videoPlayer/videoPlayer.md
index 1f2f6c3..38b43f9 100644
--- a/src/videoPlayer/videoPlayer.md
+++ b/src/videoPlayer/videoPlayer.md
@@ -1,10 +1,41 @@
-# Video Player Applet
+# 🎥‍ Video Player Applet
 
 This Applet replaces a stream with a video that the user uploads or records.
 
-## Dash 
-
-### UI
+## Storage
+```javascript
+player = {
+    active: false,
+    enabled: true,
+    objectUrl: null,
+    currentTime: 0,
+    loop: false,
+    mimeType: "",
+    videoTimeOffsetMs: 0
+}
+```
+
+## Messages
+
+Listeners
+- `INJECT_LOADED` - inject->content: waits for inject to finish
+- `PLAYER_TRANSFER` - dash->content: sends the video blob to content
+- `PLAYER_START` - dash->inject: starts the video
+- `PLAYER_PAUSE` - dash->inject: pause playback
+- `PLAYER_RESUME` - inject: pauses the video
+- `PLAYER_END` - inject: ends the video
+
+Senders
+- `PLAYER_START` - inject->worker: loads the video
+- `PLAYER_RESUME` - inject->worker: loads the video
+- `PLAYER_PAUSE` - inject->worker: pauses the video
+- `PLAYER_END` - inject->worker: ends the video
+
+## Modules
+### Dash 
+
+
+#### UI
 User inputs:
 1. Record media
 2. Upload media
@@ -14,7 +45,7 @@ User inputs:
 Shows a preview of the media that will be injected from Record or Upload on mouseover.
 
 
-### Logic 
+#### Logic 
 
 It first checks storage for a buffer, loads that into the media preview, and sends a `PLAYER_LOAD` command to the content
 
@@ -25,13 +56,18 @@ Button listeners:
 * addMediaButton -  uses a file input to open any video file and then loads it to storage.
 
 
-## Content 
+### Content 
+
+How to get the video from the extension context (dash) to content??
+1. transfer the blob over sendMessage - would need to break it up into 1-2MB segments and then reassemble
+2.  transfer an objectURL? DOESN'T WORK - not a web accessible resource for the extension and can't make it one
+3. Save in storage - put in storage temporarily so it doesn't slow down other storage functions
 
 * `loadMedia` function - sets up a new video element and sets a converted string buffer as its source
 * Listens for storage changes and calls loadMedia if the buffer changes
 * Listens for a `PLAYER_LOAD` command and calls loadMedia
 
-##  Inject 
+###  Inject 
 
 Media injection logic:
 1. inject.js  loads ProcessedMediaStream from the InsertableStreamsManager
@@ -46,7 +82,7 @@ Media injection logic:
 If there is both audio and video tracks, then the commands to the video element are redundant. 
 Having a single video element is easier for keeping the audio and video in sync vs. 2 separate elements.
 
-## Worker 
+### Worker 
 
 worker.js imports "../../videoPlayer/scripts/worker.mjs".
 
@@ -66,10 +102,15 @@ If paused it will just return the frame the transformManager gives to it
 ----
 TODO:
 - enable / disable logic
+- inject video not working - only if dash is opened first
 - Review the PLAYER_END logic
 - reconcile css issues
 - fix docs
 
+- load buffer faster - storage detection appears slow
+- preview video autoplay
+
+
 #### Stream modification  button
 
 Enabled & gUM -> disabled:  PLAYER_END & warning
@@ -77,11 +118,61 @@ Enabled & no-gUM -> disabled: PLAYER_END & warning
 Disabled & gUM -> enabled:  warning
 Disabled & no-gUM -> enabled:  do nothing
 
+How can dash context know if alterStream is loaded?
+    Maybe have processedMediaStream add to trackData? - would need to send a message to context for that
+Should I be able to run alterStream just on new tracks and not old ones? Not for initial launch
 
 TODO:
-- background.mjs - open db, convert to object url and save to storage
 - content.mjs
   - remove db
   - listen for storage changes on url
 - dash.mjs
   - verify UI logic 
+
+Dash.html is in the extension context
+
+
+#### loading the video from indexedDB
+
+debugging scenario where gUM happens before dash is opened
+
+When dash is opened first
+- dash.mjs
+  - opens the indexedDB
+  - puts the video in storage under temp
+- content.mjs
+  - listens for storage changes on temp
+  - loads the media from storage
+  - creates a videoPlayer
+- inject.mjs
+  - listens for PLAYER_TRANSFER and assigns the video to the videoPlayerElement
+  - insertableStreamsManager uses setupPlayer - but videoPlayer isn't ready
+
+    might need to setup a dummy element and stream and then swap the player when dash is open?
+
+Sat morning:
+ tried to create a videoElement - test when I am back
+
+Sunday:
+x need to change the logic so that inject.mjs creates the video element
+x how to get the video element id to content.mjs? - just using "vch-player"
+
+TODO:
+- player doesn't stop in dash inject icon or hidden player if the original source track is stopped
+- quality simulator doesn't work with video player; just frame-rate
+x occasional atob errors
+- disable dash ui inject until the video is loaded
+x try shadow DOM for the video element
+
+
+
+
+/*
+Not easy to send a stream to dash:
+* can't access the iframe content - CORS issues
+* can't send the stream over postMessage - it's not serializable
+* can't pass a resource URL - treated as different domains
+ideas:
+1. open a new stream - could cause gUM conflicts, more encoding
+2. send snapshots - this is what did
+*/