first 5 codelab step

misi · Jan 29, 2018 · b8da000 · b8da000
1 parent 8ac9df9
commit b8da000
Show file tree

Hide file tree

Showing 31 changed files with 691 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,19 @@
-# codelab
+# WebRTC CodeLab
 WebRTC CodeLab
+
+Inspired by:
+
+* https://github.com/googlecodelabs/webrtc-web
+* https://webrtc.github.io/samples/
+
+Images:
+
+* Background: https://qrohlf.com/trianglify-generator/
+* Favicon: https://paulferrett.com/fontawesome-favicon/
+
+## CodeLabs
+* Step1: GetuserMedia (GuM)
+* Step2: GuM Constraints
+* Step3: GuM I/O Select
+* Step4: GuM Record
+* Step5: GuM + PC states
diff --git a/step1/css/main.css b/step1/css/main.css
@@ -0,0 +1,9 @@
+body {
+            background: url("../img/background.svg") no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+	    background-color: transparent;
+	    text-align: center;
+}
diff --git a/step1/img/background.svg b/step1/img/background.svg
diff --git a/step1/img/favicon-flask.ico b/step1/img/favicon-flask.ico
diff --git a/step1/index.html b/step1/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>WebRTC CodeLab</title>
+
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="icon" href="img/favicon-flask.ico" type="image/x-icon">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.0/adapter.js" defer></script>
+  <script src="js/main.js" defer></script>
+</head>
+
+<body>
+
+  <h1>WebRTC CodeLab</h1>
+
+    <video></video>
+
+</body>
+
+</html>
diff --git a/step1/js/main.js b/step1/js/main.js
@@ -0,0 +1,26 @@
+// Strict mode changes previously accepted "bad syntax" into real errors.
+'use strict';
+
+
+const mediaStreamConstraints = {
+  video: true,
+};
+
+/*
+const mediaStreamConstraints = { video: { facingMode: "user" } };
+const mediaStreamConstraints = { video: { facingMode: "environment" } };
+*/
+
+navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
+.then(function(mediaStream) {
+   /* use the stream */
+   var video = document.querySelector('video');
+   video.srcObject = mediaStream;
+   video.onloadedmetadata = function(e) {
+     video.play();
+   };
+})
+.catch(function(err) {
+   /* handle the error */
+  console.error(err);
+});
diff --git a/step2/css/main.css b/step2/css/main.css
@@ -0,0 +1,13 @@
+body {
+            background: url("../img/background.svg") no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+	    background-color: transparent;
+	    text-align: center;
+    }
+#constraintList {
+	    display: inline-block;
+	    text-align: left;
+}
diff --git a/step2/img/background.svg b/step2/img/background.svg
diff --git a/step2/img/favicon-flask.ico b/step2/img/favicon-flask.ico
diff --git a/step2/index.html b/step2/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>WebRTC CodeLab</title>
+
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="icon" href="img/favicon-flask.ico" type="image/x-icon">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.0/adapter.js" defer></script>
+  <script src="js/main.js" defer></script>
+</head>
+
+<body>
+
+  <h1>WebRTC CodeLab</h1>
+    <div id="constraintList" ></div>
+    <video></video>
+
+</body>
+
+</html>
diff --git a/step2/js/main.js b/step2/js/main.js
@@ -0,0 +1,61 @@
+// Strict mode changes previously accepted "bad syntax" into real errors.
+'use strict';
+
+
+let constraintList = document.getElementById("constraintList");
+let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
+
+for (let constraint in supportedConstraints) {
+  if (supportedConstraints.hasOwnProperty(constraint)) {
+    let elem = document.createElement("li");
+
+    elem.innerHTML = "<code>" + constraint + "</code>";
+    constraintList.appendChild(elem);
+  }
+};
+
+// See: https://w3c.github.io/mediacapture-main/#types-for-constrainable-properties
+
+// exact => required
+// idal => target
+
+const mediaStreamConstraints = {
+  video: {
+    width: { exact: 640},
+    height: { ideal: 480}
+  }
+}
+
+/*
+const mediaStreamConstraints = {
+  video: {
+    width: {
+      min: 640,
+      max: 800
+    },
+    height: {
+      min: 480,
+      max: 600
+    }
+  }
+};
+*/
+
+/*
+const mediaStreamConstraints = { video: { facingMode: "user" } };
+const mediaStreamConstraints = { video: { facingMode: "environment" } };
+*/
+
+navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
+.then(function(mediaStream) {
+  /* use the stream */
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+   /* handle the error */
+  console.error(err);
+});
diff --git a/step3/css/main.css b/step3/css/main.css
@@ -0,0 +1,13 @@
+body {
+            background: url("../img/background.svg") no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+	    background-color: transparent;
+	    text-align: center;
+}
+div {
+	      display: block;
+	      margin: 5px;
+}
diff --git a/step3/img/background.svg b/step3/img/background.svg
diff --git a/step3/img/favicon-flask.ico b/step3/img/favicon-flask.ico
diff --git a/step3/index.html b/step3/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>WebRTC CodeLab</title>
+
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="icon" href="img/favicon-flask.ico" type="image/x-icon">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.0/adapter.js" defer></script>
+  <script src="js/main.js" defer></script>
+</head>
+
+<body>
+
+  <h1>WebRTC CodeLab</h1>
+  <div>
+    <label for="audioInputSelect">Audio input: </label>
+    <select id="audioInputSelect"></select>
+  </div>
+  <div>
+    <label for="videoInputSelect">Video input: </label>
+    <select id="videoInputSelect"></select>
+  </div>
+  <div>
+    <label for="audioOutputSelect">Audio output: </label>
+    <select id="audioOutputSelect"></select>
+  </div>
+  <div>
+    <video autoplay></video>
+  </div>
+</body>
+
+</html>
diff --git a/step3/js/main.js b/step3/js/main.js
@@ -0,0 +1,73 @@
+// Strict mode changes previously accepted "bad syntax" into real errors.
+'use strict';
+
+var videoInputSelect = document.getElementById("videoInputSelect");
+var audioInputSelect = document.getElementById("audioInputSelect");
+var audioOutputSelect = document.getElementById("audioOutputSelect");
+var video = document.querySelector('video');
+
+
+
+navigator.mediaDevices.enumerateDevices()
+  .then(function (devices){
+    console.log(devices);
+    devices.forEach(function(deviceInfo) {
+      var option = document.createElement('option');
+      option.value = deviceInfo.deviceId;
+      if (deviceInfo.kind === 'audioinput') {
+        option.text = deviceInfo.label ||
+          'Microphone ' + (audioInputSelect.length + 1);
+        audioInputSelect.appendChild(option);
+      } else if (deviceInfo.kind === 'audiooutput') {
+        option.text = deviceInfo.label || 'Speaker ' +
+          (audioOutputSelect.length + 1);
+        audioOutputSelect.appendChild(option);
+      } else if (deviceInfo.kind === 'videoinput') {
+        option.text = deviceInfo.label || 'Camera ' +
+          (videoInputSelect.length + 1);
+        videoInputSelect.appendChild(option);
+      }
+
+    });
+  })
+  .catch(errorCallback);
+function outputSelected(){
+  var audioOutputId = audioOutputSelect.value;
+  video.setSinkId(audioOutputId);
+};
+
+function inputSelected(){
+  if (window.mediaStream){
+    let tracks = window.mediaStream.getTracks();
+
+    tracks.forEach(function(track) {
+      track.stop();
+    });
+  };
+  var audioInputId = audioInputSelect.value;
+  var videoInputId = videoInputSelect.value;
+  var mediaStreamConstraints = {
+    audio: { deviceId: audioInputId ? {exact: audioInputId } : undefined },
+    video: { deviceId: videoInputId ? {exact: videoInputId } : undefined }
+  };
+
+  navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
+    .then(function(mediaStream) {
+      window.mediaStream=mediaStream;
+      /* use the stream */
+      video.srcObject = mediaStream;
+      video.onloadedmetadata = function(e) {
+        video.play();
+      };
+    })
+    .catch(errorCallback);
+};
+
+function errorCallback(err) {
+  /* handle the error */
+  console.error(err);
+};
+
+videoInputSelect.onchange=inputSelected;
+audioInputSelect.onchange=inputSelected;
+audioOutputSelect.onchange=outputSelected;
diff --git a/step4/css/main.css b/step4/css/main.css
@@ -0,0 +1,9 @@
+body {
+            background: url("../img/background.svg") no-repeat center center fixed;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+	    background-color: transparent;
+	    text-align: center;
+}
diff --git a/step4/img/background.svg b/step4/img/background.svg
diff --git a/step4/img/favicon-flask.ico b/step4/img/favicon-flask.ico
diff --git a/step4/index.html b/step4/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>WebRTC CodeLab</title>
+
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="icon" href="img/favicon-flask.ico" type="image/x-icon">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.0/adapter.js" defer></script>
+  <script src="js/main.js" defer></script>
+</head>
+
+<body>
+
+  <h1>WebRTC CodeLab</h1>
+
+    <div>
+      <button id="grab">GetuserMedia</button>
+      <select id="format"></select>
+    </div>
+    <div>
+      <button id="record" disabled>Start Recording</button>
+      <button id="stop" disabled>Stop Recording</button>
+    </div>
+    <div id=download>
+      <button id="replay" disabled>RePlay</button>
+    </div>
+
+    <video id="gum" autoplay muted></video>
+    <video id="vod" autoplay loop></video>
+</body>
+
+</html>