Vue-peer NPM | npm.io

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

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");