I created this project to learn how to use the Svelte library and to learn how to use the Svelte CLI. This acts as a guide to how to use the Svelte CLI and webrtc in Svelte. It includes all the examples from https://webrtc.github.io/samples/ that demonstrate how the WebRTC API functions work.
https://webrtc-mauve.vercel.app/webrtc
Once you've cloned this repo and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openBefore creating a production version of your app, install an adapter for your target environment. Then:
If you want to test on your mobile browser make sure to start the development server with this command npm run dev --host --https this allows the application to run in a secureContext which is required for us to access the navigator object.
The first part of this todo list todo list is to implement the getUserMedia() inside a svelete app which allows us to access the media devices on the client side (browser)
- Basic getUserMedia demo
- Use getUserMedia with canvas
- Use getUserMedia with canvas and CSS filters
- Choose camera resolution
- Audio-only getUserMedia() output to local audio element
- Audio-only getUserMedia() displaying volume
- Record stream
- Screensharing with getDisplayMedia
- Control camera pan, tilt, and zoom
This is my truly first open-source project, and I will try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this service for free.
However, if you are using this project and are happy with it or just want to encourage me to continue creating stuff, there are few ways you can :-
- Giving credit when you use it in your project.
- Starring and sharing the project 🚀
Contributions are welcome!
Thanks 🦃
Made with ❤️ and Svelte.