wip restart connection on tracks change

Author: mickel8

assets/player.js

@@ -1,34 +1,42 @@
 export function createPlayerHook(iceServers = []) {
   return {
     async mounted() {
-      this.videoQuality = document.getElementById("lexp-video-quality");
-      this.videoQuality.onchange = () => {
-        this.pushEventTo(this.el, "layer", this.videoQuality.value);
+      const view = view;
+
+      view.handleEvent("restart", async () => await view.connect(view));
+
+      await view.connect(view);
+    },
+
+    async connect(view) {
+      view.videoQuality = document.getElementById("lexp-video-quality");
+      view.videoQuality.onchange = () => {
+        view.pushEventTo(view.el, "layer", view.videoQuality.value);
       };
 
-      this.pc = new RTCPeerConnection({ iceServers: iceServers });
+      view.pc = new RTCPeerConnection({ iceServers: iceServers });
 
-      this.pc.onicecandidate = (ev) => {
-        this.pushEventTo(this.el, "ice", JSON.stringify(ev.candidate));
+      view.pc.onicecandidate = (ev) => {
+        view.pushEventTo(view.el, "ice", JSON.stringify(ev.candidate));
       };
 
-      this.pc.ontrack = (ev) => {
-        if (!this.el.srcObject) {
-          this.el.srcObject = ev.streams[0];
+      view.pc.ontrack = (ev) => {
+        if (!view.el.srcObject) {
+          view.el.srcObject = ev.streams[0];
         }
       };
-      this.pc.addTransceiver("audio", { direction: "recvonly" });
-      this.pc.addTransceiver("video", { direction: "recvonly" });
+      view.pc.addTransceiver("audio", { direction: "recvonly" });
+      view.pc.addTransceiver("video", { direction: "recvonly" });
 
-      const offer = await this.pc.createOffer();
-      await this.pc.setLocalDescription(offer);
+      const offer = await view.pc.createOffer();
+      await view.pc.setLocalDescription(offer);
 
-      const eventName = "answer" + "-" + this.el.id;
-      this.handleEvent(eventName, async (answer) => {
-        await this.pc.setRemoteDescription(answer);
+      const eventName = "answer" + "-" + view.el.id;
+      view.handleEvent(eventName, async (answer) => {
+        await view.pc.setRemoteDescription(answer);
       });
 
-      this.pushEventTo(this.el, "offer", offer);
+      view.pushEventTo(view.el, "offer", offer);
     },
   };
 }

lib/live_ex_webrtc/player.ex

@@ -300,35 +300,43 @@ defmodule LiveExWebRTC.Player do
   def handle_info({:live_ex_webrtc, :info, publisher_audio_track, publisher_video_track}, socket) do
     %{player: player} = socket.assigns
 
-    player =
-      case player do
-        %Player{publisher_audio_track: nil, publisher_video_track: nil} ->
-          video_layers = (publisher_video_track && publisher_video_track.rids) || ["h"]
-
-          video_layers =
-            Enum.map(video_layers, fn
-              "h" -> {"h", "high"}
-              "m" -> {"m", "medium"}
-              "l" -> {"l", "low"}
-            end)
-
-          %Player{
-            player
-            | publisher_audio_track: publisher_audio_track,
-              publisher_video_track: publisher_video_track,
-              video_layers: video_layers
-          }
-
-        %Player{
-          publisher_audio_track: ^publisher_audio_track,
-          publisher_video_track: ^publisher_video_track
-        } ->
+    case player do
+      %Player{
+        publisher_audio_track: ^publisher_audio_track,
+        publisher_video_track: ^publisher_video_track
+      } ->
+        # tracks are the same, do nothing
+        {:noreply, socket}
+
+      %Player{
+        publisher_audio_track: old_publisher_audio_track,
+        publisher_video_track: old_publisher_video_track
+      } ->
+        video_layers = (publisher_video_track && publisher_video_track.rids) || ["h"]
+
+        video_layers =
+          Enum.map(video_layers, fn
+            "h" -> {"h", "high"}
+            "m" -> {"m", "medium"}
+            "l" -> {"l", "low"}
+          end)
+
+        player = %Player{
           player
-      end
+          | publisher_audio_track: publisher_audio_track,
+            publisher_video_track: publisher_video_track,
+            video_layers: video_layers
+        }
 
-    socket = assign(socket, :player, player)
+        socket = assign(socket, :player, player)
 
-    {:noreply, socket}
+        if old_publisher_audio_track != nil or old_publisher_video_track != nil do
+          socket = push_event(socket, "restart-#{player.id}", %{})
+          {:noreply, socket}
+        else
+          {:noreply, socket}
+        end
+    end
   end
 
   def handle_info({:live_ex_webrtc, :audio, packet}, socket) do

mix.exs

@@ -42,7 +42,8 @@ defmodule LiveExWebrtc.MixProject do
     [
       {:phoenix_live_view, "~> 1.0"},
       {:jason, "~> 1.0"},
-      {:ex_webrtc, "~> 0.8.0"},
+      # {:ex_webrtc, "~> 0.8.0"},
+      {:ex_webrtc, github: "elixir-webrtc/ex_webrtc", branch: "vp8-simulcast", override: true},
       {:ex_doc, "~> 0.31", only: :dev, runtime: false}
     ]
   end