Implement playing of local files.

static/sfu.html

@@ -191,6 +191,11 @@
           <form>
             <input id="activitybox" type="checkbox">Activity detection</input>
           </form>
+
+          <form>
+            <label for="fileinput">Play local file:</label>
+            <input type="file" id="fileinput" accept="audio/*,video/*" multiple></input>
+          </form>
         </fieldset>
       </div>
     </div>

static/sfu.js

@@ -524,6 +524,13 @@ getInputElement('activitybox').onchange = function(e) {
     }
 }
 
+getInputElement('fileinput').onchange = function(e) {
+    let input = /** @type{HTMLInputElement} */(this);
+    let files = input.files;
+    for(let i = 0; i < files.length; i++)
+        addFileMedia(files[i]);
+}
+
 /**
  * @this {Stream}
  * @param {Object<string,any>} stats
@@ -866,6 +873,36 @@ async function addShareMedia() {
     setButtonsVisibility()
 }
 
+/**
+ * @param {File} file
+ */
+async function addFileMedia(file) {
+    if(!getUserPass())
+        return;
+
+    let url = URL.createObjectURL(file);
+    let video = document.createElement('video');
+    video.src = url;
+    /** @ts-ignore */
+    let stream = video.captureStream();
+
+    let c = newUpStream();
+    c.kind = 'video';
+    c.stream = stream;
+    stream.onaddtrack = function(e) {
+        let t = e.track;
+        c.pc.addTrack(t, stream);
+        t.onended = e => {
+            delUpMedia(c);
+        }
+        c.labels[t.id] = t.kind;
+        c.onstats = gotUpStats;
+        c.setStatsInterval(2000);
+    };
+    setMedia(c, true, video);
+    video.play();
+}
+
 /**
  * @param {Stream} c
  */
@@ -947,8 +984,9 @@ function muteLocalTracks(mute) {
 /**
  * @param {Stream} c
  * @param {boolean} isUp
+ * @param {HTMLVideoElement} [video]
  */
-function setMedia(c, isUp) {
+function setMedia(c, isUp, video) {
     let peersdiv = document.getElementById('peers');
     let settings = getSettings();
     let local_media;
@@ -970,15 +1008,19 @@ function setMedia(c, isUp) {
     let media = /** @type {HTMLVideoElement} */
         (document.getElementById('media-' + c.id));
     if(!media) {
-        media = document.createElement('video');
+        if(video) {
-        media.id = 'media-' + c.id;
+            media = video;
+        } else {
+            media = document.createElement('video');
+            media.controls = false;
+            if(isUp)
+                media.muted = true;
+        }
         media.classList.add('media');
         media.autoplay = true;
         /** @ts-ignore */
         media.playsinline = true;
-        media.controls = false;
+        media.id = 'media-' + c.id;
-        if(isUp)
-            media.muted = true;
         div.appendChild(media);
     }
 
@@ -1024,7 +1066,9 @@ function setMedia(c, isUp) {
             camera.remove();
     }
 
-    media.srcObject = c.stream;
+    if(!video)
+        media.srcObject = c.stream;
+
     setLabel(c);
     setMediaStatus(c);
 

webserver/webserver.go

@@ -78,7 +78,7 @@ func Serve(address string, dataDir string) error {
 
 func mungeHeader(w http.ResponseWriter) {
 	w.Header().Add("Content-Security-Policy",
-		"connect-src ws: wss: 'self'; img-src data: 'self'; default-src 'self'")
+		"connect-src ws: wss: 'self'; img-src data: 'self'; media-src blob: 'self'; default-src 'self'")
 }
 
 func notFound(w http.ResponseWriter) {