Unify API and add docs (#2)

Author: mickel8

README.md

@@ -29,11 +29,11 @@ module.exports = {
 
 ## Usage
 
-`LiveExWebRTC` comes with two `Phoenix.LiveComponent`s:
+`LiveExWebRTC` comes with two `Phoenix.LiveView`s:
 * `LiveExWebRTC.Publisher` - sends audio and video via WebRTC from a web browser to a Phoenix app (browser publishes)
-* `LiveExWebRTC.Subscriber` - sends audio and video via WebRTC from a Phoenix app to a web browser (browser subscribes)
+* `LiveExWebRTC.Player` - sends audio and video via WebRTC from a Phoenix app to a web browser and plays it in the HTMLVideoElement (browser subscribes)
 
-See module docs for more.
+See module docs and [live_broadcaster](https://github.com/elixir-webrtc/live_broadcaster) for more.
 
 ## Local development
 

assets/index.js

@@ -1,4 +1,4 @@
 import { createPublisherHook } from "./publisher.js";
-import { createSubscriberHook } from "./subscriber.js";
+import { createPlayerHook } from "./player.js";
 
-export { createPublisherHook, createSubscriberHook };
+export { createPublisherHook, createPlayerHook };

assets/subscriber.js renamed to assets/player.js

@@ -1,4 +1,4 @@
-export function createSubscriberHook(iceServers = []) {
+export function createPlayerHook(iceServers = []) {
   return {
     async mounted() {
       this.pc = new RTCPeerConnection({ iceServers: iceServers });
@@ -8,8 +8,9 @@ export function createSubscriberHook(iceServers = []) {
       };
 
       this.pc.ontrack = (ev) => {
-        console.log("ontrack");
-        this.el.srcObject = ev.streams[0];
+        if (!this.el.srcObject) {
+          this.el.srcObject = ev.streams[0];
+        }
       };
       this.pc.addTransceiver("audio", { direction: "recvonly" });
       this.pc.addTransceiver("video", { direction: "recvonly" });