This section mainly introduces how to control the mirror and fill mode of video rendering through TRTC Web SDK
Mirror
await trtc.startLocalVideo({ option: { mirror: true }});
await trtc.updateLocalVideo({ option: { mirror: false }});
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
await trtc.startRemoteVideo({
userId,
streamType,
view: `${userId}_${streamType}`,
option: { mirror: true }
});
await trtc.updateRemoteVideo({ userId, streamType, option: { mirror: false }})
});
Notice:
The mirroring effect is only used for rendering, and there is no mirroring effect on the actual encoded or decoded picture. You can use the custom collection method of canvas to flip the canvas to achieve the effect of coding mirror. Fill
Parameters:
contain
Keep the aspect ratio and display the full picture in the target container. If the aspect ratio does not match the target container, it will be filled with a black edge. You are advised to use this parameter for screen sharing.
cover
A default value, retaining the aspect ratio, is displayed in the target container, and if the aspect ratio does not match the target container, the screen is cropped to fill the entire target container.
fill
The aspect ratio is not retained and is displayed in the target container. If the aspect ratio does not match the target container, the screen is stretched to fill the entire template container.
await trtc.startLocalVideo({ option: { fillMode: 'cover' }});
await trtc.updateLocalVideo({ option: { fillMode: 'contain' }});
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
await trtc.startRemoteVideo({
userId,
streamType,
view: `${userId}_${streamType}`,
option: { fillMode: 'contain' }
});
await trtc.updateRemoteVideo({ userId, streamType, option: { fillMode: 'cover' }})
});
Was this page helpful?