ConfigureFlexFEC03 helper and fec example

Author: aalekseevx

examples/play-from-disk-fec/README.md

@@ -0,0 +1,43 @@
+# play-from-disk-fec
+play-from-disk-fec demonstrates how to use forward error correction (FlexFEC-03) while sending video to your Chrome-based browser from files saved to disk. The example is designed to drop 40% of the media packets, but browser will recover them using the FEC packets and the delivered packets.
+
+## Instructions
+### Create IVF named `output.ivf` that contains a VP8/VP9/AV1 track
+```
+ffmpeg -i $INPUT_FILE -g 30 -b:v 2M output.ivf
+```
+
+**Note**: In the `ffmpeg` command which produces the .ivf file, the argument `-b:v 2M` specifies the video bitrate to be 2 megabits per second. We provide this default value to produce decent video quality, but if you experience problems with this configuration (such as dropped frames etc.), you can decrease this. See the [ffmpeg documentation](https://ffmpeg.org/ffmpeg.html#Options) for more information on the format of the value.
+
+### Download play-from-disk-fec
+
+```
+go install github.com/pion/webrtc/v4/examples/play-from-disk-fec@latest
+```
+
+### Open play-from-disk-fec example page
+Open [jsfiddle.net](https://jsfiddle.net/hgzwr9cm/) in your browser. You should see two text-areas and buttons for the offer-answer exchange.
+
+### Run play-from-disk-fec to generate an offer
+The `output.ivf` you created should be in the same directory as `play-from-disk-fec`.
+
+When you run play-from-disk-fec, it will generate an offer in base64 format and print it to stdout.
+
+### Input play-from-disk-fec's offer into your browser
+Copy the base64 offer that `play-from-disk-fec` just emitted and paste it into the first text area in the jsfiddle (labeled "Remote Session Description")
+
+### Hit 'Start Session' in jsfiddle to generate an answer
+Click the 'Start Session' button. This will process the offer and generate an answer, which will appear in the second text area.
+
+### Save the browser's answer to a file
+Copy the base64-encoded answer from the second text area (labeled "Browser Session Description") and save it to a file named `answer.txt` in the same directory where you're running `play-from-disk-fec`.
+
+### Press Enter to continue
+Once you've saved the answer to `answer.txt`, go back to the terminal where `play-from-disk-fec` is running and press Enter. The program will read the answer file and establish the connection.
+
+### Enjoy your video!
+A video should start playing in your browser above the input boxes. `play-from-disk-fec` will exit when the file reaches the end
+
+You can watch the stats about transmitted/dropped media & FEC packets in the stdout.
+
+Congrats, you have used Pion WebRTC! Now start building something cool

examples/play-from-disk-fec/jsfiddle/demo.css

@@ -0,0 +1,8 @@
+/*
+    SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
+    SPDX-License-Identifier: MIT
+*/
+textarea {
+    width: 500px;
+    min-height: 75px;
+}

examples/play-from-disk-fec/jsfiddle/demo.details

@@ -0,0 +1,8 @@
+---
+# SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
+# SPDX-License-Identifier: MIT
+
+name: play-from-disk-fec
+description: play-from-disk-fec demonstrates how to use forward error correction (FlexFEC-03) while sending video to your Chrome-based browser from files saved to disk.
+authors:
+  - Aleksandr Alekseev

examples/play-from-disk-fec/jsfiddle/demo.html

@@ -0,0 +1,30 @@
+<!--
+	SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
+	SPDX-License-Identifier: MIT
+-->
+Remote Session Description (Paste offer from Go code here)
+<br/>
+<textarea id="remoteSessionDescription"></textarea>
+<br/>
+<button onclick="window.startSession()">Start Session</button>
+<br/>
+<br/>
+<br/>
+
+Browser Session Description (Copy this to answer.txt file)
+<br/>
+<textarea id="localSessionDescription" readonly="true"></textarea>
+<br/>
+
+<button onclick="window.copySessionDescription()">Copy browser Session Description to clipboard</button>
+
+<br/>
+<br/>
+
+Video
+<br/>
+<div id="remoteVideos"></div> <br />
+
+Logs
+<br/>
+<div id="div"></div>

examples/play-from-disk-fec/jsfiddle/demo.js

@@ -0,0 +1,73 @@
+/* eslint-env browser */
+
+// SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
+// SPDX-License-Identifier: MIT
+
+const pc = new RTCPeerConnection({
+  iceServers: [
+    {
+      urls: 'stun:stun.l.google.com:19302'
+    }
+  ]
+})
+const log = (msg) => {
+  document.getElementById('div').innerHTML += msg + '<br>'
+}
+
+pc.ontrack = function (event) {
+  const el = document.createElement(event.track.kind)
+  el.srcObject = event.streams[0]
+  el.autoplay = true
+  el.controls = true
+
+  document.getElementById('remoteVideos').appendChild(el)
+}
+
+pc.oniceconnectionstatechange = (e) => log(pc.iceConnectionState)
+pc.onicecandidate = (event) => {
+  if (event.candidate === null) {
+    document.getElementById('localSessionDescription').value = btoa(
+      JSON.stringify(pc.localDescription)
+    )
+  }
+}
+
+window.startSession = () => {
+  const sd = document.getElementById('remoteSessionDescription').value
+  if (sd === '') {
+    return alert('Session Description must not be empty')
+  }
+
+  try {
+    // Set the remote offer
+    pc.setRemoteDescription(JSON.parse(atob(sd)))
+      .then(() => {
+        // Create answer
+        return pc.createAnswer()
+      })
+      .then((answer) => {
+        // Set local description with the answer
+        return pc.setLocalDescription(answer)
+      })
+      .catch(log)
+  } catch (e) {
+    alert(e)
+  }
+}
+
+window.copySessionDescription = () => {
+  const browserSessionDescription = document.getElementById(
+    'localSessionDescription'
+  )
+
+  browserSessionDescription.focus()
+  browserSessionDescription.select()
+
+  try {
+    const successful = document.execCommand('copy')
+    const msg = successful ? 'successful' : 'unsuccessful'
+    log('Copying SessionDescription was ' + msg)
+  } catch (err) {
+    log('Oops, unable to copy SessionDescription ' + err)
+  }
+}