feat: Add WebRTC example (#2447)

examples/api/public/global.css

@@ -168,3 +168,21 @@ main {
 .hidden {
   display: none;
 }
+
+.alert {
+  width: auto;
+  height: 40px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  border-radius: 5px;
+  padding-left: 10px;
+  padding-right: 40px;
+  font-size: 15px;
+  color: #000;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 10px;
+  border-left: 6px solid #ff0000;
+  background: #f0f4f5;
+}

examples/api/src-tauri/src/main.rs

@@ -186,11 +186,15 @@ fn main() {
       // use the exposed close api, and prevent the event loop to close
       api.prevent_close();
       // ask the user if he wants to quit
-      ask("Tauri API", "Are you sure?", move |answer| {
-        if answer {
-          app_handle.get_window(&label).unwrap().close().unwrap();
-        }
-      });
+      ask(
+        "Tauri API",
+        "Are you sure that you want to close this window?",
+        move |answer| {
+          if answer {
+            app_handle.get_window(&label).unwrap().close().unwrap();
+          }
+        },
+      );
     }
 
     // Keep the event loop running even if all windows are closed

examples/api/src/App.svelte

@@ -17,6 +17,7 @@
   import Shell from "./components/Shell.svelte";
   import Updater from "./components/Updater.svelte";
   import Clipboard from "./components/Clipboard.svelte";
+  import WebRTC from './components/WebRTC.svelte'
 
   const MENU_TOGGLE_HOTKEY = 'ctrl+b';
 
@@ -74,7 +75,11 @@
     {
       label: "Clipboard",
       component: Clipboard,
-    }
+    },
+    {
+      label: "WebRTC",
+      component: WebRTC,
+    },
   ];
 
   let selected = views[0];

examples/api/src/components/WebRTC.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { onMount,onDestroy } from "svelte";
+  export let onMessage;
+
+  const constraints = window.constraints = {
+    audio: true,
+    video: true
+  };
+
+  function handleSuccess(stream) {
+    const video = document.querySelector('video');
+    const videoTracks = stream.getVideoTracks();
+    onMessage('Got stream with constraints:', constraints);
+    onMessage(`Using video device: ${videoTracks[0].label}`);
+    window.stream = stream; // make variable available to browser console
+    video.srcObject = stream;
+  }
+
+  function handleError(error) {
+    if (error.name === 'ConstraintNotSatisfiedError') {
+      const v = constraints.video;
+      onMessage(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
+    } else if (error.name === 'PermissionDeniedError') {
+      onMessage('Permissions have not been granted to use your camera and ' +
+        'microphone, you need to allow the page access to your devices in ' +
+        'order for the demo to work.');
+    }
+    onMessage(`getUserMedia error: ${error.name}`, error);
+  }
+
+
+  onMount(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      handleSuccess(stream);
+    } catch (e) {
+      handleError(e);
+    }
+  })
+
+  onDestroy(() => {
+    window.stream.getTracks().forEach(function(track) {
+      track.stop();
+    });
+  })
+</script>
+
+<div>
+  <div class="alert"><p>Not available for Linux</p></div>
+  <video id="localVideo" autoplay playsinline></video>
+</div>