Echoshare is an out-of-the-box and highly customizable configuration-enabled online media sharing application.
Based on WebRTC technology, Echoshare provides efficient, low-latency online screen sharing that simultaneously transmits screen shots, camera video streams, microphone audio streams, and system audio to meet diverse remote collaboration needs.
- To ensure EchoShare functions correctly, please verify that your browser supports WebRTC technology. Upon initial use, the system will request permission to access your camera and microphone. Denying these permissions may result in limited functionality. You can review or modify these permissions in your browser's website settings.
- Due to mobile browser limitations, when using EchoShare on a mobile phone or tablet, you can only share your camera and microphone; screen sharing is not currently available. However, media reception is unaffected. Therefore, you can use EchoShare to transmit audio from a computer to a mobile device for playback, even if the computer itself lacks audio output capabilities.
- 🖥️ Screen Sharing: Show your screen in real time for more intuitive communication.
- 📹 Camera sharing: face-to-face communication to enhance the sense of presence in remote collaboration.
- 🔊 AUDIO SHARING: Clearly conveys system sound to ensure a complete audio experience.
- 🎙️ Microphone Sharing: real-time voice communication for smoother exchanges.
- ⏳ Local History: easily review shared records for convenience.
- 💓 Heartbeat detection: real-time detection of connection status.
- 🔗 Customize webhook: Flexible integration with other systems for automated workflows.
- 🔄 Automatic pull after interruption: automatic recovery even when the network is interrupted, ensuring continuity of sharing.
- 📱 Support PWA: Use it like a native app for a smoother experience.
- 🌍 Multi-language support: meet the needs of global users, communication without barriers.
- 📐 Responsive design: adapts to a wide range of devices, so you can work efficiently anytime, anywhere.
Echoshare is deployed through Vercel, so you can experience it directly online: https://echoshare.site.
Vercel is a powerful cloud services platform that supports rapid deployment of static and dynamic websites. Seamlessly integrated with GitHub, Vercel automates deployment after code push, while providing global CDN acceleration and HTTPS auto-configuration to ensure fast and secure access. With Vercel's efficient deployment capabilities, Echoshare provides users with a smooth online experience that meets a wide variety of usage needs.
If you would also like to deploy on Vercel, you can do so by clicking the button below:
This application is a completely front-end based project, so it can be easily deployed locally by following these steps
# Clone the project address
git clone https://github.com/echoshare/echoshare.gitMake sure you have Node.js and npm (or yarn) installed on your system. Then run the following command to install the project dependencies:
# Install dependencies and compile
npm install
npm run buildechoshare works by default without any configuration, but you can customize the configuration as needed, all the configuration items are under the /~settings route.
echoshare uses peer-server as the WebRTC API and https://0.peerjs.com as the peer node by default.
If you want to use a customized peer node, you can enter the corresponding server address in the Settings page.
A sample configuration is shown below:
- Node located under port 443
https://your.server.com/custom-path
- Nodes are located under other ports
https://your.server.com:3456/custom-path
- Node configured with key attribute
https://your.server.com:3456/custom-path?key=your-key
In special cases, you also need to configure the STUN/TURN server, as shown in the following example:
https://your-stun-api.com
Then click the button below, echoshare will get the STUN server address through this interface and save it in json format.
Enter and click save, just enter the configuration in array format.
echoshare provides the ability to customize webhook, you can enter the corresponding webhook address in /~webhook route. With webhooks, you can automate workflows, such as sending notifications when a share ends, pulling share records automatically, and so on.
echoshare carries the following content that you fill in custom data in the webhook for your convenience. All custom data is carried under the custom attribute in all echoshare requests.
The webhook itself is a GET request, and you can get the shared UID in the destination address, which is mainly used for receiving media.
Note that the destination must be a URL that provides a GET interface and the return data must contain a uid entry, otherwise echoshare will not resolve the UID.
echoshare The parameters carried in this request:
{
"hook": "on-get",
"action": "receive",
"timestamp": "{current-timestamp}",
"custom": {
"your-custom-data": "{your-custom-data}"
}
}The webhook itself is a POST request. When you share a stream and generate a UID credit, echoshare sends a POST request to the destination address, which looks like this:
{
"uid": "{your-uid}",
"hook": "on-post",
"action": "share",
"timestamp": "{current-timestamp}",
"custom": {
"your-custom-data": "{your-custom-data}"
}
}The webhook itself is a POST request. When you successfully share or receive a stream, echoshare sends a POST request to the destination address as follows:
{
"uid": "{your-uid}",
"result": "success",
"hook": "on-success",
"action": "{share | receive}",
"timestamp": "{current-timestamp}",
"custom": {
"your-custom-data": "{your-custom-data}"
}
}The webhook itself is a POST request. When you fail to share or receive a media stream, echoshare sends a POST request to the destination address as follows:
{
"uid": "{your-uid}",
"result": "fail",
"hook": "on-fail",
"action": "{share | receive}",
"timestamp": "{current-timestamp}",
"custom": {
"your-custom-data": "{your-custom-data}"
}
}echoshare provides routing parameters for users to customize their experience.
This feature is mainly used to share media as a full-screen video and audio media stream, which can be used as a media source for virtual cameras. In particular, the media can be directly viewed and used by switching the route of receiving media from receive to view, thus meeting the needs of diverse application scenarios.
For example, https://echoshare.site/~receive?uid=your-uid can be replaced with: https://echoshare.site/~view?uid=your-uid to realize the automatic full screen media receiving function.
If you want autoplay on incoming media, you can add the autoplay parameter to the route for incoming media.
For example, https://echoshare.site/~receive?uid=your-uid can be replaced with: https://echoshare.site/~receive?uid=your-uid&autoplay=true to realize the autoplay function.