subins2000/simple-peer-files

A library to send files over WebRTC

WebRTC Simple File Transfer

A simple library to send & receive files over WebRTC data channels. All you need to pass is a simple-peer object, the file, and an ID!

Features

• Pause/Resume file transfers
• No file size limit
• Independent, just pass a simple-peer object
• Multiple file transfers at the same time using the same simple-peer object

Examples

Apps Made With SPF

• WebDrop - A web app to share files and messages across all your devices. Try It Here!

Simple Example

Open this webpage in two separate browser windows. This simple example is based on the example shown in simple-peer README

Sender :

import SimplePeerFiles from 'simple-peer-files'
const spf = new SimplePeerFiles()

function readyToSend () {
  // peer is the SimplePeer object connection to receiver
  spf.send(peer, 'myFileID', file).then(transfer => {
    transfer.on('progress', sentBytes => {
      console.log(sentBytes)
    })
    transfer.start()
  })
}

Receiver :

import SimplePeerFiles from 'simple-peer-files'
const spf = new SimplePeerFiles()

// peer is the SimplePeer object connection to sender
spf.receive(peer, 'myFileID').then(transfer => {
  transfer.on('progress', sentBytes => {
    console.log(sentBytes)
  })

  // Call readyToSend() in the sender side
  peer.send('heySenderYouCanSendNow')
})

You have to call spf.receive() in receiver before you call spf.send() in sender. This is to prepare the receiver to accept file before sending starts. This also allows to implement a functionality for the receiver to accept or reject the file.

Thanks to Andrew Bastin's justshare for being a reference in making this library.

simple-peer-files's Issues

Uncaught TypeError: Cannot read property 'cancel' of null

Hi,

I am unsure if I am using this library correctly, I'm admittedly new to simple-peer altogether and recently discovered your library. I am trying to send multiple files from one browser to another (one at a time).

I managed to get multiple files to send with the following workflow:

1. When User A presses the send button, User A calls:
   peer.send('PREPARING_TO_SEND');
2. When User B receives the message, User B calls:

peer.on('data', data => {
            if (data === 'PREPARING_TO_SEND') {
                spf.receive(peer, `photo_${numPhotos}`).then(transfer => {
                    transfer.on('done', file => {
                        this.addPhoto(file);
                    });
                });

                peer.send('READY_FOR_FILE');
            }
        })

3. When User A receives the message, User A calls:

peer.on('data', data => {
            if (data === 'READY_FOR_FILE') {
                spf.send(peer, `photo_${numPhotos}`, this.fileToSend).then(transfer => {
                    transfer.on('done', () => {
                        numPhotos++;
                        this.fileToSend = null;
                    });
        
                    transfer.start()
                })
            }
        })

This all seems to work, but every photo sent I get the following console error:

Uncaught TypeError: Cannot read property 'cancel' of null
    at Peer.<anonymous> (index.js:60)

Where line 60 is here:

pfs.on('done', destroy);
                pfs.on('cancel', destroy);
                fileChannel.on('close', function () {
 ---->              pfs.cancel();
                });

What's going on here? Do I need to call spf.receive before each file like I'm doing? I tried just calling it once but I got the same error where the file channel would close.

There are no errors coming from my server (and neither user has left the room), and the receiver browser has no errors either

ArrayBuffer is stored in memory?

@subins2000 First of all thanks for this package. I noticed that you are storing ArrayBuffer in memory while transferring remotely, which isn't efficient. Do you have a better way?

And also, noticed that you are using the promise
spf.send(peer, 'myFileID', file).then(transfer)
But inside the promise, you are using events. In a react app it is causing issue.

maxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 destroy listeners added. Use emitter.setMaxListeners() to increase limit

If it uses events means, I can do something like this

useEffect(() => {
    const update = (newData) => {
      setMessage([...message, newData])    
    }
    peer.on('data',  update)
  return () => peer.off('data', update);
  }, [message])

But I cannot off the event while unmounting, do you have any solution?

And also do you know anything regarding this issue feross/simple-peer#748 (comment)

Copied code from justshare-client - No credits or mit license

Most of the code is copied/ modified from just share-client. Even though @AndrewBastin didn't license / copyrightht it with Proper licenses with his project, it's totally unfair to take someone's code and turn it into a library and issue a non-MIT license for the same.

Legally you are allowed to do this since justshare-client is not copyrighted, but not even giving credit in the readme for the project u copied/"referred" from totally destroys the spirit of opensource.

Bump simple-peer dependancy as Chromium 110 introduced some WebRTC changes

So twilio URL in simple-peer has been updated but since the Library uses old version, it uses old url format causing the WebRTC connection to fail as Chromium fixes introduced in v110, causing webdrop.space to fail to function properly.

Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

Keep getting this error in title. In what format am I supposed to pass the file in spf.send() ? I really don't get where am I missing the mark.
I tried doing passing the (new Blob([e.target.files[0]])) but no luck.

Cannot use namespace 'Peer' as a type.

should be changed to the following, correct?

window.requestFileSystem

Hi @subins2000, it seems to be thought through solution, thanks for open sourcing ;-)
Please implement direct file write with window.requestFileSystem an the possibility to continue partially downloaded file.

Let's say, peer1 send a file to peer2 and the connection is broken.
After some time, the peer1 is sending the same file to peer2. The peer2 is pointing to the partially downloaded file and the download continues where is broke.

How to send files?

How do you send files with this? do you just wait in the "msg" event for file transfer complete, or do you have to assemble the chunks?
I also tried using it with simple-peer-files, but no luck.
Sorry I am still new with WebRTC and simple peer, I would really appreciate if someone can explain the process a bit better