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

  npm install vue-peer

Start backend:

    cd ./node_module/vue-peer/backend
    node server.js

usage in front:

    cd ./node_module/vue-peer/backend
    node server.js

Import plugin in application vue:

    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

    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:

    <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

  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:\

import { VuePeerSocketEvent} from "vue-peer"

Get item

  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
mail.bakhshabadi@gmail.com

Detalhes do pacote

vue-peer

readme (leia-me)