Neolithic Populous Metropolis

    media-socket

    0.0.2-b • Public • Published

    Media-Socket

    media-socket is a library for sending user media in real time via websocket. The advantage of this library is that it integrates the recording, sending and client-side display of audio and video.

    The library makes use of RecordRTC (https://recordrtc.org/) and WebSocket.

    Installation

    The library is available for browser as compiled bundle or Node applications as es6 package

    Browser (Static Files, CDN, ...)

    Import the media-socket bundle as follows:

    <script src="https://raw.githubusercontent.com/Lykos94/media-socket/master/examples/client/html/bunde.js">

    Node (Vue, React, ...)

    To install the library you can use npm or yarn

      npm install media-socket
      # or
      yarn add media-socket

    Usage

    The library contain two main functions: the Player and the Recorder. The recorder takes the UserMedia as stream and through RecordRTC dynamically creates the BLOB chunks to be delivered via WebSocket. The Player, on the other hand, retrieves from a WebSocket object the BLOBs, turns them into ArrayBuffer and displays the result live in a HTMLVideoElement.

    Browser (Static Files, CDN, ...)

    Creating a recorder

    const recorder = new MediaSocket.Recorder({
      ws,
      recordingOptions: {
        timeSlice: 100,
        media: {
          audio: true,
          video: true,
        },
      },
    });

    Creating a player

    const video = document.getElementById("video");
    const player = new MediaSocket.Player({
      playingOptions: {
        element: video,
        media: {
          video: true,
          audio: true,
        },
      },
      ws,
    });

    In both, ws is the WebSocket object initialized previously. If you want to initialize them on the fly with different parameters, you can also pass the wsUrl instead of the ws parameter.

    // Example with wsUrl
    const player = new MediaSocket.Player({
      playingOptions: {
        // ...
      },
      wsUrl: "ws://localhost:3000",
    });

    Node (Vue, React, ...)

    The only difference with respect to the browser example is that you need to import the package as follows

    import * as MediaSocket from "media-socket";

    Configuration Types

    Recorder

    type RecorderConfiguration = {
      recordingOptions: {
        timeSlice?: number;
        media: {
          audio: boolean;
          video: boolean;
        };
      };
      ws?: WebSocket; // Use existing WebSocket
      wsUrl?: string; // Use this url to create a new WebSocket
    };

    Player

    type PlayerConfiguration = {
      playingOptions: {
        element: HTMLVideoElement | HTMLAudioElement;
        media: {
          audio: boolean;
          video: boolean;
        };
      };
      ws?: WebSocket; // Use existing WebSocket
      wsUrl?: string; // Use this url to create a new WebSocket
    };

    Running examples

    In this repository there are a couple of examples that may be useful during the development. In order to run them:

    • Clone the repository
    git clone https://github.com/Lykos94/media-socket
    
    • Go to the server folder
    cd media-socket/examples/server
    
    • Install all the dependencies
    npm i
    
    • To run the basic HTML vanilla example, you can just open the examples/client/html/index.html file in your browser

    License

    MIT

    Authors

    Install

    npm i media-socket

    DownloadsWeekly Downloads

    0

    Version

    0.0.2-b

    License

    MIT

    Unpacked Size

    455 kB

    Total Files

    8

    Last publish

    Collaborators

    • lykos94