이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Web

This section mainly introduces how to control the mirror and fill mode of video rendering through TRTC Web SDK
Notes：
This tutorial is based on the 5.x TRTC Web SDK. If you are using the 4.x version SDK, you can refer to the objectFit attribute of stream.play.
Mirror
There are 2 ways to control the rendering mirror effects of local and remote videos, respectively are trtc.startLocalVideo({ option: { mirror: true } }) and trtc.startRemoteVideo({ option: { mirror: true }}).
// Local camera rendering image, the default is true
await trtc.startLocalVideo({ option: { mirror: true }});
﻿
// Dynamically updating parameters
await trtc.updateLocalVideo({ option: { mirror: false }});
﻿
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
  await trtc.startRemoteVideo({ 
    userId, 
    streamType, 
    // You need to pre-place the video container in the DOM. 
    // It is recommended to use '${userId}_${streamType}' as the element id.
    view: `${userId}_${streamType}`,
    // Mirror the remote video. The default value is false
    option: { mirror: true }
    });
    
  // Dynamically updating parameters
  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
There are 2 ways to control the rendering fill mode of local and remote videos, respectively are  trtc.startLocalVideo({ option: { fillMode: 'cover' } }) and trtc.startRemoteVideo({ option: { fillMode: 'cover' }}).
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.
Refer to: CSS object-fit .
// Local camera fill mode, default is cover
await trtc.startLocalVideo({ option: { fillMode: 'cover' }});
﻿
// Dynamically updating parameters
await trtc.updateLocalVideo({ option: { fillMode: 'contain' }});
﻿
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
  await trtc.startRemoteVideo({ 
    userId, 
    streamType, 
    // You need to pre-place the video container in the DOM. 
    // It is recommended to use '${userId}_${streamType}' as the element id.
    view: `${userId}_${streamType}`,
    option: { fillMode: 'contain' }
    });
    
  // Dynamically updating parameters
  await trtc.updateRemoteVideo({ userId, streamType, option: { fillMode: 'cover' }})
});
﻿
Mirror
Fill