# Vue Peer

With this package, you can have video calls along with two or multi-person chat communication. You can easily bind and display your streams in any video element you want.


## Installation

Install `vue-peer` with npm

```bash
  npm install vue-peer
```

### Start backend:
```bash
    cd ./node_module/vue-peer/backend
    node server.js
```

### usage in front:
```bash
    cd ./node_module/vue-peer/backend
    node server.js
```

#### Import plugin in application vue:
```typescript
    import { createApp } from "vue";
    import App from "./App.vue";
    import { VuePeerPlugin } from "./main";

    const app = createApp(App);

    app.use(VuePeerPlugin); /// <=========== import plugin
    app.mount("#app");
```

#### Usage in script
```typescript
    import { ref } from "vue";
    import {
        VuePeer,
        VuePeerStream,
        VuePeerSocketEvent,
        type MessageType,
    } from "./main";

    interface Metadata {
    user: string; // is require
    role: number; // your props
    }
    
    const localStream = ref();
    const peers = ref<any>([]);

    const srv = ref<VuePeer<Metadata, string>>(
        new VuePeer<Metadata, string>({
            socketUrl: "http://localhost:8282/",
            room: "test1",
            // user: getUser(),
            metadata: { role: 1, user: getUser()},
            showLogs: true,
        })
    );

    srv.value.on(VuePeerSocketEvent.LOCAL_VIDEO, (stream: MediaStream) => {
        localStream.value = stream;
    });

    srv.value.on(VuePeerSocketEvent.USER_JOINED, (sessions: VuePeerStream[]) => {
        peers.value = sessions.filter((f) => f.stream);
    });

```
#### Usage in html:
```html
    <video v-src-object="localStream" muted autoplay></video>
    <hr />
    <!-- <div ref="videos"></div> -->
    <p>{{ peers.length }}</p>
    <template v-for="(item, index) in peers" :key="index">
        <p>{{ item.user }}</p>
        <video v-src-object="item.stream" muted autoplay></video>
    </template>
```

## API Reference

#### Get all items

```typescript
  vue-peer events 
```

| Event name | Parameter     | Description                |
| :-------- | :------- | :------------------------- |
| `message` | `MessageType<T>` | When recieve data mesage |
| `local_video` | `MediaStream` | When ready your camera |
| `user_joined` | `MediaStream` | When join another user |
| `error_in_peer` | `Error` | error in peerjs |
| `error_in_socket` | `Error` | error in socket |
| `error_in_navigator` | `Error` | error in navigator |

Using enums for the above events:\
```typescript
import { VuePeerSocketEvent} from "vue-peer"
```


#### Get item

```http
  Apis
```

| Parameter | Type     | Description                       |
| :-------- | :------- | :-------------------------------- |
| `sendMessageTo`      | `to:string, userMsg:T` | send message to a user |
| `sendMessageToAll`      | `userMsg:T` | send message to all users |

* Here, T refers to the type that you provided for sending data. For example:\
```typescript
const srv = ref<VuePeer<Metadata, string>>(  /// T = string
  new VuePeer<Metadata, string>({
      socketUrl: "http://localhost:8282/",
      room: "test1",
      // user: getUser(),
      metadata: { role: 1, user: getUser()},
      showLogs: true,
  })
);

srv.sendMessageToAll("hello world");
```



## Authors

* [@bakhshabadi.javad](https://gitlab.com/bakhshabadi.javad)
* mail.bakhshabadi@gmail.com