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

Authors

• @bakhshabadi.javad
• [email protected]