JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Peer-to-peer data in the browser
    Filed under 

    • 🔾81%Overall
    • 11,950
    • 2.1 days
    • 🕩1400
    • 👥5

    PeerJS: Simple peer-to-peer with WebRTC

    Backers on Open Collective Sponsors on Open Collective Discord

    PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.

    Live Example

    Here's an example application that uses both media and data connections: https://glitch.com/~peerjs-video. The example also uses its own PeerServer.


    Special Announcement:

    We now have a Discord Channel
    There we plan to discuss roadmaps, feature requests, and more
    Join us today


    Setup

    Include the library

    with npm: npm install peerjs

    with yarn: yarn add peerjs

    // The usage -
    import { Peer } from "peerjs";
    

    Create a Peer

    const peer = new Peer("pick-an-id");
    // You can pick your own id or omit the id if you want to get a random one from the server.
    

    Data connections

    Connect

    const conn = peer.connect("another-peers-id");
    conn.on("open", () => {
        conn.send("hi!");
    });
    

    Receive

    peer.on("connection", (conn) => {
        conn.on("data", (data) => {
            // Will print 'hi!'
            console.log(data);
        });
        conn.on("open", () => {
            conn.send("hello!");
        });
    });
    

    Media calls

    Call

    navigator.mediaDevices.getUserMedia(
        { video: true, audio: true },
        (stream) => {
            const call = peer.call("another-peers-id", stream);
            call.on("stream", (remoteStream) => {
                // Show stream in some <video> element.
            });
        },
        (err) => {
            console.error("Failed to get local stream", err);
        },
    );
    

    Answer

    peer.on("call", (call) => {
        navigator.mediaDevices.getUserMedia(
            { video: true, audio: true },
            (stream) => {
                call.answer(stream); // Answer the call with an A/V stream.
                call.on("stream", (remoteStream) => {
                    // Show stream in some <video> element.
                });
            },
            (err) => {
                console.error("Failed to get local stream", err);
            },
        );
    });
    

    Running tests

    npm test
    

    Browser support

    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Edge
    Safari
    Safari
    80+ 83+ 83+ 15+

    We test PeerJS against these versions of Chrome, Edge, Firefox, and Safari with BrowserStack to ensure compatibility. It may work in other and older browsers, but we don't officially support them. Changes to browser support will be a breaking change going forward.

    [!NOTE] Firefox 102+ is required for CBOR / MessagePack support.

    FAQ

    Q. I have a message Critical dependency: the request of a dependency is an expression in browser's console

    A. The message occurs when you use PeerJS with Webpack. It is not critical! It relates to Parcel https://github.com/parcel-bundler/parcel/issues/2883 We'll resolve it when updated to Parcel V2.

    Documentation / API Reference

    PeerServer

    Discuss PeerJS on our Telegram Channel

    Changelog

    Contributors

    This project exists thanks to all the people who contribute.

    Backers

    Thank you to all our backers! [Become a backer]

    Sponsors

    Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

    License

    PeerJS is licensed under the MIT License.

    Show All