Merge pull request #20 from digitallysavvy/guide

Guide

Guide.md

@@ -24,6 +24,7 @@ Follow the Vite instructions: give your project a name `agora-group-video-chat`,
 
 ### Install the Agora SDK
 With the new project setup, navigate to the project folder in the terminal and use `npm` to install the Agora Video Web SDK
+
 ```bash
 npm i agora-rtc-sdk-ng
 ```
@@ -86,8 +87,8 @@ Let's start with the `container`, it wraps the three divs used to display the lo
 
 Now looking at the `overlay` we can see it's a simple modal with an embedded form, a single input for the `Channel Name`, and a button to `Join Channel`. We're going to use the `Channel Name` as a way of grouping users together into the same video chat.
 
-## Adding in CSS and JS
-Now that we have our html set up, we can drop in some simple html styles. Open the `style.css` file and add this CSS below the existing CSS.
+## Adding in CSS
+Now that we have our html set up, we can drop in some simple styles. Open the `style.css` file and add this CSS below the existing CSS.
 
 ```CSS
 /* Video Call container */

README.md

@@ -1,12 +1,12 @@
 # Agora Live Video
 
-![Group Video Demo](https://github.com/digitallysavvy/group-video-chat/actions/workflows/deploy-to-pages.yaml/badge.svg)
-
 Vanilla javascript implmentation of the Agora Video SDK for Web v4.2
 
 A walk-through of the project setup and code: [Guide.md](Guide.md)
 
 ## Demo
+![Group Video Demo](https://github.com/digitallysavvy/group-video-chat/actions/workflows/deploy-to-pages.yaml/badge.svg)
+
 Test the build: [https://digitallysavvy.github.io/group-video-chat/](https://digitallysavvy.github.io/group-video-chat/)
 
 ## Setup
@@ -33,8 +33,7 @@ Test the build: [https://digitallysavvy.github.io/group-video-chat/](https://dig
 This project is setup with a GitHub actions workflow to deploy the project to GitHub pages, if enabled in the project settings. 
 
 To enable GitHub Pages build via GitHub Actions:
-1. Fork the project on GitHub (https://github.com/digitallysavvy/group-live-stream)
-2. Clone the project 
+1. Clone or Fork the project (https://github.com/digitallysavvy/group-live-stream)
 3. Click the project's Settings tab
 4. Click the Pages tab in the left column menu
 5. Under Build and deployment, select GitHub Actions as the Source

agora-live-video.js

@@ -88,7 +88,29 @@ async function initDevices() {
   if (!localTracks.camera.audio || !localTracks.camera.video) {
     [ localTracks.camera.audio, localTracks.camera.video ] = await AgoraRTC.createMicrophoneAndCameraTracks({ audioConfig: audioConfigPreset, videoConfig: cameraVideoPreset })
   }
-  localTracks.camera.video.play('local-video')    // Play the local video track in the local-video div
+  // localTracks.camera.video.play('local-video')    // Play the local video track in the local-video div
+  console.log(`Local Camera Track Object ${localTracks.camera.video}`)
+  console.log(localTracks.camera.video)
+  console.log(`-- Media Stream`)
+  console.log(localTracks.camera.video._originMediaStreamTrack)
+  const localVideoDiv = getById('local-video')
+
+  const videoFromStream = document.createElement('video')
+  videoFromStream.id = 'local-video-stream'
+  videoFromStream.setAttribute('webkit-playsinline', 'webkit-playsinline');
+  videoFromStream.setAttribute('playsinline', 'playsinline');
+
+  // videoFromStream.srcObject = new MediaStream([localTracks.camera.video.getMediaStreamTrack(), localTracks.camera.audio.getMediaStreamTrack()])
+  videoFromStream.srcObject = new MediaStream([localTracks.camera.video.getMediaStreamTrack()])
+  videoFromStream.controls = false
+  videoFromStream.height = 300
+  videoFromStream.width = 500
+  localVideoDiv.appendChild(videoFromStream);
+
+  videoFromStream.onloadedmetadata = () => {
+    // ready to play video
+    videoFromStream.play();
+  }
 }
 
 // Add client Event Listeners -- on page load