update

demo/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "@typescript-eslint/no-explicit-any": 0
   }
 };

demo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "singo-example",
+  "name": "singo-demo",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -13,7 +13,7 @@
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "body-scroll-lock": "^3.0.2",
     "core-js": "^3.6.4",
-    "singo-sdk": "0.0.10",
+    "singo-sdk": "0.1.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",

demo/src/views/Room.vue

@@ -32,6 +32,9 @@ import VideoScreen from "@/components/VideoScreen.vue";
 import VideoMenu from "@/components/VideoMenu.vue";
 import { disableBodyScroll } from "body-scroll-lock";
 const WS_URL = process.env.VUE_APP_WS_URL;
+
+Component.registerHooks(["beforeRouteEnter", "beforeRouteLeave"]);
+
 @Component({
   components: { VideoMenu, VideoScreen }
 })
@@ -51,9 +54,23 @@ export default class Room extends Vue {
   async mounted() {
     this.ref = this.$refs.room as Element;
     disableBodyScroll(this.ref);
+  }
+
+  public beforeRouteEnter(to: any, from: any, next: any) {
+    next(async (component: any) => {
+      await component.joinRoom();
+    });
+  }
+
+  beforeRouteLeave(to: any, from: any, next: any) {
+    this.client?.close();
+    next();
+  }
+
+  async joinRoom() {
     const sc = this.$refs.myScreen as HTMLVideoElement;
     this.client = new SingoClient(sc, {
-      SignalingServerEndpoint: WS_URL
+      signalingServerEndpoint: WS_URL
     });
     await this.client.joinRoom(this.roomId);
     this.myStream = this.client.stream;
@@ -89,6 +106,7 @@ export default class Room extends Vue {
 
   private leave() {
     if (!confirm("本当に退出しますか？")) return;
+    this.client.close();
     this.$router.push("/");
   }
 }

main.go

@@ -13,16 +13,16 @@ func main() {
 
 func run() error {
 	var (
-		withExample = flag.Bool("example", false, "serve with video chat system example")
-		addrFlag    = flag.String("addr", "0.0.0.0", "addr")
-		portFlag    = flag.Int("port", 5000, "port")
+		withDemo = flag.Bool("demo", false, "serve with video chat system demo")
+		addrFlag = flag.String("addr", "0.0.0.0", "addr")
+		portFlag = flag.Int("port", 5000, "port")
 	)
 	flag.Parse()
 
 	addr := fmt.Sprintf("%s:%d", *addrFlag, *portFlag)
 
-	if *withExample {
-		return serveWithExample(addr)
+	if *withDemo {
+		return serveWithDemo(addr)
 	}
 
 	return serve(addr)

sdk/README.md

@@ -0,0 +1,52 @@
+# singo JavaScript SDK
+
+singoのJavaScript SDKです。
+
+## Install
+
+```
+npm i --save singo-sdk
+```
+or
+```
+yarn add singo-sdk
+```
+
+## Usage (example)
+
+```js
+const myScreen = document.querySelector('#my-screen')
+
+// コンストラクタで自分の画面のvideo要素を渡します。
+const client = new SingoClient(myScreen, {
+  signalingServerEndpoint: 'ws://localhost:5000'
+})
+
+// joinRoomメソッドで特定の名前のroomへ入ります。
+// ここではvideoタグを追加して表示しています
+await c.joinRoom('room name')
+
+// onTrackは新たなclientのstreamを受け取ったときに呼ばれます
+c.onTrack = ((clientId, stream) => {
+  const elId = `#partner-${clientId}`;
+  const pre = document.getElementById(elId);
+  pre?.parentNode.removeChild(pre);
+
+  const $video = document.createElement('video') as HTMLVideoElement;
+  $video.id = elId;
+  $video.setAttribute('autoplay', 'true')
+  $video.setAttribute('playsinline', 'true')
+  $video.setAttribute('muted', 'true')
+  const pa = document.querySelector('#partners');
+  pa.appendChild($video);
+  $video.srcObject = stream;
+});
+
+// onLeaveはclientが退出したときに呼ばれます。
+// ここでは退出したclientのvideoタグを削除しています。
+c.onLeave = ((clientId) => {
+  const elId = `#partner-${clientId}`;
+  const pre = document.getElementById(elId);
+  pre?.parentNode.removeChild(pre);
+});
+```