Rewrite send_from_file example

Author: LVala

examples/send_from_file/.formatter.exs

@@ -0,0 +1,4 @@
+# Used by "mix format"
+[
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"]
+]

examples/send_from_file/.gitignore

@@ -0,0 +1,30 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where third-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+send_from_file-*.tar
+
+# Temporary files, for example, from tests.
+/tmp/
+
+# Media files
+video.ivf
+audio.ogg

examples/send_from_file/README.md

@@ -1,10 +1,22 @@
-# Send From File
+# Send from File
 
 Send video and audio from files to a browser.
 
-1. Start `ex_ice/signalling_server` with `mix run --no-halt`
-2. Run `elixir example.exs`
-3. Visit `example.html` in your browser e.g. `file:///home/Repos/elixir-webrtc/ex_webrtc/examples/send_from_file/example.html`
-4. Press the play button.
+While in `examples/send_from_file` directory
 
-You can replace `video.ivf` or `audio.ogg` and use your own files instead.
+1. Generate media files
+
+```shell
+ffmpeg -f lavfi -i testsrc=duration=5:size=640x480:rate=30 video.ivf
+ffmpeg -f lavfi -i "sine=frequency=420:duration=5" -c:a libopus audio.ogg
+```
+
+You may use your own files, if they meet the requirements:
+* for video, it must be IVP in 30 FPS
+* for audio, it must be Ogg with a single Opus stream
+
+2. Run `mix deps.get`
+3. Run `mix run --no-halt`
+4. Visit `http://127.0.0.1:8829` in your browser and press the `play` button.
+
+The video and audio will loop infinitely.

examples/send_from_file/example.html examples/send_from_file/assets/index.html

@@ -10,7 +10,7 @@
     <main>
         <h1>Elixir WebRTC Send From File Example</h1>  
     </main>
-    <video id="videoPlayer" autoplay controls> </video>
-	<script src="example.js"></script>
+    <video id="videoPlayer" controls> </video>
+	<script src="script.js"></script>
   </body>
 </html>

examples/send_from_file/assets/script.js

@@ -0,0 +1,40 @@
+const pcConfig = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' },] };
+const address = "ws://127.0.0.1:8829/ws"
+
+const ws = new WebSocket(address);
+ws.onopen = _ => start_connection(ws);
+ws.onclose = event => console.log("WebSocket connection was terminated:", event);
+
+const start_connection = async (ws) => {
+  const videoPlayer = document.getElementById("videoPlayer");
+  videoPlayer.srcObject = new MediaStream();
+
+  const pc = new RTCPeerConnection(pcConfig);
+  pc.ontrack = event => videoPlayer.srcObject.addTrack(event.track);
+  pc.onicecandidate = event => {
+    if (event.candidate === null) return;
+
+    console.log("Sent ICE candidate:", event.candidate);
+    ws.send(JSON.stringify({ type: "ice", data: event.candidate }));
+  };
+
+  ws.onmessage = async event => {
+    const {type, data} = JSON.parse(event.data);
+
+    switch (type) {
+      case "offer":
+        console.log("Received SDP offer:", data);
+        await pc.setRemoteDescription(data)
+
+        const answer = await pc.createAnswer();
+        await pc.setLocalDescription(answer);
+
+        console.log("Sent SDP answer:", answer);
+        ws.send(JSON.stringify({type: "answer", data: answer}))
+        break;
+      case "ice":
+        console.log("Recieved ICE candidate:", data);
+        await pc.addIceCandidate(data);
+    }
+  };
+};