demo

sirusbaladi · Feb 27, 2023 · 3cedb7c · 3cedb7c
1 parent f945970
commit 3cedb7c
Show file tree

Hide file tree

Showing 12 changed files with 1,421 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.vscode
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# Streaming Live Demo by D-ID
+
+## Initial Setup:
+* (install express) open a terminal in the folder and run  - npm install express
+* (add your api key) edit the `api.json` inside the uncompressed folder and replace the emoji with your key
+
+
+## Start the demo:
+* (bring up the app) in the folder (ctr left click on folder through finder) open the terminal run node app.js 
+* You should see this message - server started on port localhost:3000
+* (open the app) in the browser add localhost:3000
+* (connect) press connect you should see the connection ready 
+* (stream) press the start button to start streaming
+
+## App:
+![app](./doc/app.png)
diff --git a/api.json b/api.json
@@ -0,0 +1,4 @@
+{
+    "key": "🤫",
+    "url": "https://api.d-id.com/talks/streams"
+}
diff --git a/app.js b/app.js
@@ -0,0 +1,7 @@
+const express = require('express');
+const http = require('http');
+
+const app = express();
+app.use('/', express.static(__dirname));
+const server = http.createServer(app);
+server.listen(3000, () => console.log('Server started on port localhost:3000'));
diff --git a/bg.png b/bg.png
diff --git a/doc/app.png b/doc/app.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>D-ID Streaming POC</title>
+  <!-- added google fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700&display=swap" rel="stylesheet">
+
+  <style>
+    .peerConnectionState-new {
+      color: cornflowerblue;
+    }
+    .peerConnectionState-connecting {
+      color: orange;
+    }
+    .peerConnectionState-connected {
+      color: green;
+    }
+    .peerConnectionState-disconnected,
+    .peerConnectionState-closed,
+    .peerConnectionState-failed {
+      color: red;
+    }
+
+    .iceConnectionState-new {
+      color: cornflowerblue;
+    }
+    .iceConnectionState-checking {
+      color: orange;
+    }
+    .iceConnectionState-connected,
+    .iceConnectionState-completed {
+      color: green;
+    }
+    .peerConnectionState-disconnected,
+    .peerConnectionState-closed,
+    .peerConnectionState-failed {
+      color: red;
+    }
+
+    .iceGatheringState-new {
+      color: cornflowerblue;
+    }
+    .iceGatheringState-gathering {
+      color: orange;
+    }
+    .iceGatheringState-complete {
+      color: black;
+    }
+
+    .signalingState-stable {
+      color: green;
+    }
+    .signalingState-have-local-offer,
+    .signalingState-have-remote-offer,
+    .signalingState-have-local-pranswer,
+    .signalingState-have-remote-pranswer {
+      color: cornflowerblue;
+    }
+    .signalingState-closed {
+      color: red;
+    }
+
+
+    /* added css from here */
+
+    body *{
+      font-family: 'Mulish', sans-serif;
+      text-align: center;
+    }
+
+    #content{
+     width:820px;
+     position: relative;
+     margin:0 auto; 
+    }
+
+    #buttons{
+      clear:both;
+      padding:0 0 0 0;
+      text-align: center;
+    }
+
+    button{
+      padding:10px 20px;
+      border-radius: 5px;
+      border:none;
+      font-size: 16px;
+      margin:0 5px;
+      background-color: #7459FE;
+      color: #fff;
+    }
+
+    button:hover{
+      background-color: #9480FF;
+      cursor: pointer;
+      transition: all 0.2s ease-out;
+    }
+
+    #status{
+      clear:both;
+      padding:20px 0 0 0 ;
+      text-align: left;
+      display: inline-block;
+      zoom: 1;
+      line-height: 140%;
+      font-size: 15px;
+    }
+
+    #status div{
+      padding-bottom: 10px;
+    }
+
+    #video-wrapper{
+      background:url(bg.png);
+      height:500px;
+      background-position: top;
+    }
+
+    #video-wrapper div{
+      width:400px;
+      margin:0 auto;
+      padding:50px 0 0 0;
+    }
+    video{
+      display:block;
+      /*border:1px solid;*/
+      border-radius: 50%;
+      background-color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- adde "id=content" -->
+  <div id="content">
+
+      <!-- added "id=video-wrapper" -->
+      <div id="video-wrapper">
+        <div>
+          <video id="talk-video" width=400 height=400 autoplay></video>
+        </div>
+      </div>
+      <br>
+
+      <!-- added div#buttons -->
+      <div id="buttons">
+      <button id="connect-button" type="button">Connect</button>
+      <button id="talk-button" type="button">Start</button>
+      <button id="destroy-button" type="button">Destroy</button>
+    </div>
+
+    <!-- added div#status -->
+      <div id="status">
+      <!-- removed the wrapping <div> tags -->
+      Instance: <label id="instance-label"></label><br>
+      ICE gathering status: <label id="ice-gathering-status-label"></label><br>
+      ICE status: <label id="ice-status-label"></label><br>
+      Peer connection status: <label id="peer-status-label"></label><br>
+      Signaling status: <label id="signaling-status-label"></label><br>
+    </div>
+  </div>
+
+  <script type="module" src="./index.js"></script>
+
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+import './streaming-client-api.js';