forked from dyte-io/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request dyte-io#359 from dyte-in/docs/oss
docs: community packages
- Loading branch information
Showing
7 changed files
with
244 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "position": 1, | ||
| "label": "Device Emulator", | ||
| "collapsible": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| --- | ||
| slug: /device-emulator | ||
| sidebar_position: 1 | ||
| keywords: [opensource] | ||
| --- | ||
|
|
||
| # Introduction | ||
|
|
||
| For a product, integration tests are one of the crucial part that improves quality & stability. For a WebRTC based solution like Dyte, having integration tests that can test multi-user call with Audio/Video on is necessary. | ||
|
|
||
| For an end user, sharing a camera & mic is easy. For this, browsers expose APIs such as enumerateDevices & getUserMedia on MediaDevices interface, on which user interfaces can be built easily. | ||
|
|
||
| Access to camera & mic prompts the users to allow permissions to do so. This works great as long as an end-user is using the product and actively allowing permissions and selecting devices, However this makes it impossible to write integration tests because for integration tests there is no active user and you need to somehow allow permissions programmatically which at the moment of writing this README is not reliably supported in modern tools like Playwright. | ||
|
|
||
| Even if we can somehow allow permissions, The next set of questions would be: What would the video & audio feed look like? Can we customize the feed? Can we use the feed to detect delays between a video feed producer and consumer? How do we test multiple devices? How do we test media ejection on the fly? How do we test addition of a new device? | ||
|
|
||
| Dyte's Device Emulator is a solution that answers all these questions and provides a easier way to mimic, add, remove devices & their feed. | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs groupId="cdn-npm"> | ||
| <TabItem value="cdn" label="CDN" default> | ||
|
|
||
| To set up device-emulator add the following script tags inside | ||
| the `<head />` tag. | ||
|
|
||
| ```html | ||
| <script> | ||
| window.addEventListener('dyte.deviceEmulatorLoaded', () => { | ||
| // use device emulator methods here... | ||
| }); | ||
| </script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@dytesdk/device-emulator/dist/index.iife.js"></script> | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem value="npm" label="npm"> | ||
|
|
||
| ```bash | ||
| npm install @dytesdk/device-emulator | ||
| ``` | ||
|
|
||
| use the package like below | ||
|
|
||
| ```js | ||
| import '@dytesdk/device-emulator'; | ||
|
|
||
| // use the device emulator methods | ||
| ``` | ||
|
|
||
| </TabItem> | ||
|
|
||
| <TabItem value="yarn" label="yarn"> | ||
|
|
||
| ```bash | ||
| yarn add @dytesdk/device-emulator | ||
| ``` | ||
|
|
||
| use the package like below | ||
|
|
||
| ```js | ||
| import '@dytesdk/device-emulator'; | ||
|
|
||
| // use the device emulator methods | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| ## API reference | ||
|
|
||
| ### Add a virtual device | ||
|
|
||
| ```js {1} | ||
| const virtualDeviceID = navigator.mediaDevices.addEmulatedDevice('videoinput'); | ||
|
|
||
| // get a media track from the virtual device | ||
| navigator.mediaDevices | ||
| .getUserMedia({ | ||
| video: { | ||
| deviceId: { | ||
| exact: virtualDeviceID, | ||
| }, | ||
| }, | ||
| }) | ||
| .then((mediaStream) => { | ||
| const video = document.querySelector('video'); | ||
| video.srcObject = mediaStream; | ||
| video.onloadedmetadata = () => { | ||
| video.play(); | ||
| }; | ||
| }) | ||
| .catch((err) => { | ||
| // always check for errors at the end. | ||
| console.error(`${err.name}: ${err.message}`); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Remove virtual device | ||
|
|
||
| ```js | ||
| navigator.mediaDevices.removeEmulatedDevice(deviceId); | ||
| ``` | ||
|
|
||
| ### Stop the device | ||
|
|
||
| You can use `brickDevice` method to test scenarios where the devices stops working abruptly. | ||
|
|
||
| ```js {4} | ||
| const virtualDeviceID = navigator.mediaDevices.addEmulatedDevice('videoinput'); | ||
|
|
||
| // Stop the device from working | ||
| navigator.mediaDevices.brickDevice(virtualDeviceID, true); | ||
|
|
||
| navigator.mediaDevices | ||
| .getUserMedia({ | ||
| video: { | ||
| deviceId: { | ||
| exact: virtualDeviceID, | ||
| }, | ||
| }, | ||
| }) | ||
| .then((mediaStream) => { | ||
| // This will not work | ||
| const video = document.querySelector('video'); | ||
| video.srcObject = mediaStream; | ||
| video.onloadedmetadata = () => { | ||
| video.play(); | ||
| }; | ||
| }) | ||
| .catch((err) => { | ||
| // catch `NotReadableError` thrown from the device | ||
| console.error(`${err.name}: ${err.message}`); | ||
| }); | ||
| ``` | ||
|
|
||
| Executing the `brickDevice` after getting the tracks will stop the active tracks. | ||
|
|
||
| ### Resume the device | ||
|
|
||
| Use `brickDevice` method to make the device work normally | ||
|
|
||
| ```js | ||
| navigator.mediaDevices.unbrickDevice(deviceId, false); | ||
| ``` | ||
|
|
||
| ### Silence the tracks | ||
|
|
||
| Generate tracks that are silent | ||
|
|
||
| ```js | ||
| navigator.mediaDevices.silenceDevice(deviceId, true); | ||
| ``` | ||
|
|
||
| ### Unmute the tracks from the device | ||
|
|
||
| Remove the silence check on the device | ||
|
|
||
| ```js | ||
| navigator.mediaDevices.silenceDevice(deviceId, false); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| slug: / | ||
| sidebar_position: 1 | ||
| sidebar_class_name: community_packages_sidebar_index | ||
| --- | ||
|
|
||
| # Community packages | ||
|
|
||
| At Dyte, we believe in empowering developers to create innovative solutions that go beyond our own use cases. By opening access to some of our resources, we aim to foster creativity, collaboration, and technological advancement across diverse domains. | ||
|
|
||
| We are excited to see the new applications and platforms that you will build using our technology. | ||
|
|
||
| <CardSection id="packages" title="Packages"> | ||
| <Card | ||
| title="Device Emulator" | ||
| to="/community-packages/device-emulator" | ||
| description="Simulate media devices within your browser, by providing a seamless testing environment and enabling more efficient development and debugging." | ||
| tag={{ | ||
| label: 'OSS', | ||
| color: '#2160FD', | ||
| description: 'Opensource Software', | ||
| }} | ||
| > | ||
| <span class="community-tag">Opensource</span> | ||
| </Card> | ||
| <Card | ||
| title="Troubleshooter (Coming soon)" | ||
| description="Our diagnostic tool designed to analyze, identify, and resolve real-time communication issues, enhancing connection stability and performance." | ||
| /> | ||
| </CardSection> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters