Skip to content

Commit bc124a7

Browse files
authored
Updates 1
1 parent 29478cb commit bc124a7

File tree

2 files changed

+72
-1
lines changed

2 files changed

+72
-1
lines changed

articles/communication-services/quickstarts/voice-video-calling/includes/video-effects/video-effects-javascript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The Video effects feature allows users to incorporate visual effects into their
2424
2525

2626
> [!IMPORTANT]
27-
> Background blur and background replacement for **Android Chrome and Android Edge mobile browser** is available in General Availability starting in build [1.34.1](https://www.npmjs.com/package/@azure/communication-calling/v/1.34.1) and later WebJS SDK versions. You must use version [1.1.4](https://www.npmjs.com/package/@azure/communication-calling-effects) or higher of the calling effects package to impliment background effects on Android mobile browsers.
27+
> Background blur and background replacement for **Android Chrome and Android Edge mobile browser** is available in General Availability starting in build [1.34.1](https://www.npmjs.com/package/@azure/communication-calling/v/1.34.1) and later WebJS SDK versions. You must use version [1.1.4](https://www.npmjs.com/package/@azure/communication-calling-effects) or higher of the calling effects package to implement background effects on Android mobile browsers.
2828
2929
Use the `npm install` command to install the Azure Communication Services Effects SDK for JavaScript.
3030

articles/communication-services/quickstarts/voice-video-calling/optimizing-video-placement.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,77 @@ For instance, in a group call where seven participants have their video cameras
9898

9999
Simulcast isn't supported on all browser devices. Currently, simulcast is unavailable when sending videos on mobile browsers or macOS Safari. If a participant attempts to render 720p video from a user on iOS Safari, Android Chrome, or macOS Safari and another participant on the call tries to render the same video at a smaller resolution, both receive the smaller resolution. This change happens because the devices prioritize smaller resolutions when simulcast send isn't supported.
100100

101+
## How to configure to SEND 1080P
102+
[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include.md)]
103+
104+
[Version 1.35.1](https://www.npmjs.com/package/@azure/communication-calling/v/1.35.1-beta.1) and higher of the public preview calling SDK supports sending a 1080P video.
105+
106+
When using the WebJS SDK to send video at a 1080P resolution, you must use the [Video Constraints API](../voice-video-calling/get-started-video-constraints.md?pivots=platform-web) and specify that you want to use 1080P. If the Video Constraints API is not used and 1080P is not specified, the default video stream resolution will be 720P.
107+
108+
```javascript
109+
const callOptions = {
110+
videoOptions: {
111+
localVideoStreams: [...],
112+
constraints: {
113+
send: {
114+
height: {
115+
max: 1080
116+
}
117+
}
118+
}
119+
},
120+
audioOptions: {
121+
muted: false
122+
}
123+
};
124+
// make a call
125+
this.callAgent.startCall(identitiesToCall, callOptions);
126+
```
127+
128+
### Items to note when sending a 1080P video stream
129+
* The camera in use should be capable of sending a 1080P video. To check what resolutions your camera supports, you can use the following JavaScript example to determine the available resolutions.
130+
131+
```javascript
132+
async function getSupportedResolutions() {
133+
const constraints = {
134+
video: {
135+
width: { ideal: 4096 }, // Try to get the maximum width
136+
height: { ideal: 2160 } // Try to get the maximum height
137+
}
138+
};
139+
140+
try {
141+
const stream = await navigator.mediaDevices.getUserMedia(constraints);
142+
const videoTrack = stream.getVideoTracks()[0];
143+
const settings = videoTrack.getSettings();
144+
145+
console.log(`Supported resolution: ${settings.width}x${settings.height}`);
146+
147+
// Stop the video track to release the camera
148+
videoTrack.stop();
149+
} catch (error) {
150+
console.error('Error accessing media devices.', error);
151+
}
152+
}
153+
154+
getSupportedResolutions();
155+
```
156+
157+
* The machine sending a 1080P must have a powerful enough machine to suppor sending a 1080P.
158+
* The client that is on the receiver side (people accepting of a 1080P video) must have a video render HTML5 element capable of 1080P to accept 1080P. If any participants on the call do not have a 1080P element enabled to receive the video, the call will adjust and negotiate down to a smaller resolution.
159+
* All the people on the call that are sending and receiving a 1080P video stream must have the bandwidth to support a 1080P stream.
160+
161+
| **Resolution** | **Min framerate** | **Max framerate** | **Max bitrate** |
162+
|--|--|--|--|
163+
| 1080P | 30 | 30 | 4m |
164+
| 720P | 30 | 30 | 2.5M |
165+
| 540P | 30 | 30 | 2M |
166+
| 360P | 30 | 30 | 1M |
167+
| 240P | 15 | 15 | 650k |
168+
| 180P | 7.5 | 15 | 250k(350k if 15 FPS)|
169+
170+
You can use the media quality statistics API within the WebJS SDK to determine the real time video send and receive resolution. See [here](../../concepts/voice-video-calling/media-quality-sdk.md?pivots=platform-web) for more details.
171+
101172
## Conclusion
102173

103174
To determine how many videos to place on a web page, you need to carefully consider resolution, device type, bandwidth, and user experience. Follow these guidelines and best practices to create web apps that not only look appealing but also function seamlessly, providing an optimal viewing experience for users across various devices and connection speeds.

0 commit comments

Comments
 (0)