# Using attach on 2.1.10 version

**URL:** <https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108>\
**Category:** Web\
**Tags:** video-sdk, sdk\
**Created:** [April 7, 2025, 1:20pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108 "2025-04-07T13:20:16Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 7, 2025, 1:20pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/1 "2025-04-07T13:20:16Z")

</div>

I am updating ZOOM WEB SDK to 2.1.10, but without success.

Always I got the attached error.

The code.

try {  
await mediaStream.attachVideo(  
remoteParticipant?.userId,  
VideoQuality.Video\_720P,  
videoPatientTeste.current,  
);

HTML

```auto
 <>
        <video-player-container>
          <video-player class="video-player" ref={videoPatientTeste} />
        </video-player-container>
      </>

```

On App.tsx

type CustomElement = Partial\<T & DOMAttributes & { children: any }\>;

declare global {  
interface Window {  
webEndpoint: string | undefined;  
zmClient: any | undefined;  
mediaStream: any | undefined;  
crossOriginIsolated: boolean;  
ltClient: any | undefined;  
logClient: any | undefined;  
}  
// eslint-disable-next-line @typescript-eslint/no-namespace  
namespace JSX {  
interface IntrinsicElements {  
[‘video-player’]: DetailedHTMLProps\<  
HTMLAttributes,  
VideoPlayer  
\> & { class?: string };  
[‘video-player-container’]: CustomElement & {  
class?: string;  
};  
}  
}  
}

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 7, 2025, 1:56pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/2 "2025-04-07T13:56:58Z")

</div>

Hey @josemaurodl

Thanks for your feedback.

Could you share the error you encountered?

> **[Video SDK - web - Video](https://developers.zoom.us/docs/video-sdk/web/video/#render-remote-videos)**
>
> The Zoom Developer Platform is an open platform that allows third-party developers to build applications and integrations upon Zoom’s video-first unified communications platform.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 7, 2025, 2:08pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/3 "2025-04-07T14:08:10Z")

</div>

Can I add a print screen ?

 ![MicrosoftTeams-image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/8/28be294ba2aad464cd2ab7f4d57ff1e5b24810ec.png)

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 8, 2025, 7:46am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/4 "2025-04-08T07:46:09Z")

</div>

Hi @josemaurodl

Could you share some problematic session IDs with us for troubleshooting purposes?

You can retrieve them using the `client.getSessionInfo(). sessionId` method.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 8, 2025, 11:48am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/5 "2025-04-08T11:48:32Z")

</div>

const teste = await mediaStream.attachVideo(  
remoteParticipant?.userId,  
VideoQuality.Video\_720P,  
videoPatientTeste.current,  
);

```
      console.log(
        'zmClient.getSessionInfo().sessionId',
        zmClient.getSessionInfo().sessionId,
      );
      console.log('remoteParticipant?.userId', remoteParticipant?.userId);
      console.log('videoPatientTeste.current', videoPatientTeste.current);
      console.log('teste', teste);

```

zmClient.getSessionInfo().sessionId WGncwgZTQxSMwzeNpUL0yA==  
remoteParticipant?.userId 16779264

 ![Captura de tela de 2025-04-08 08-47-52](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/8/680b9e76cf55c999ec661bcd2740d838fc76d902.png)  
 ![Captura de tela de 2025-04-08 08-46-27](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/d/2df849db419e2f46be86511d468aa5922adef917.png)

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 9, 2025, 3:47am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/6 "2025-04-09T03:47:34Z")

</div>

Hi @josemaurodl

> WGncwgZTQxSMwzeNpUL0yA==

After analyzing the logs, we found that when using `stream.attachVideo` to render a remote video, if the remote user hasn’t started their video yet, you’ll encounter the `'user is not send video'` error. You can check the `bVideoOn` property of the user object to determine if the user is sending video.

> **[Participant | Zoom Video SDK for Web - 2.1.10](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/Participant.html#bVideoOn)**
>
> Documentation for Zoom Video SDK for Web - 2.1.10

As for the error `Expected to accept HTMLCanvasElement or HTMLVideoElement, but actual it is null`, it’s likely due to using the `stream.renderVideo` method without passing the correct parameter — though the code snippet isn’t complete, this is our best guess.

For video rendering, `attachVideo` is sufficient and preferred — its functionality overlaps with `renderVideo`, so there’s no need to use both.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 9, 2025, 11:22am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/7 "2025-04-09T11:22:21Z")

</div>

```auto
const remoteCameraOn = useCallback(async () => {
    console.log('videoPatientTeste', videoPatientTeste);
    if (mediaStream && videoPatientTeste.current && isStarted) {
      if (remoteParticipant?.userId !== participantUserID) {
        await mediaStream.detachVideo(participantUserID);
        sendLogs({
          action: 'stop-video',
          info: {
            remoteID: remoteParticipant?.userId,
          },
        });
      }
      const adjustVideo = async () => {
        await mediaStream.adjustRenderedVideoPosition(
          canvasRef.current as HTMLCanvasElement,
          remoteParticipant?.userId || participantUserID,
          canvasDimension.width,
          canvasDimension.height,
          0,
          0,
        );
        sendLogs({
          action: 'adjust-video',
          info: {
            canvasDimension,
          },
        });
      };
      if (remoteParticipant?.bVideoOn) {
        try {
          const teste = await mediaStream.attachVideo(
            remoteParticipant?.userId,
            VideoQuality.Video_360P,
            videoPatientTeste.current,
          );

          console.log('videoPatientTeste', videoPatientTeste);
          // console.log(
          // 'zmClient.getSessionInfo().sessionId',
          // zmClient.getSessionInfo(),
          // );
          console.log('remoteParticipant?.userId', remoteParticipant?.userId);
          console.log('videoPatientTeste.current', videoPatientTeste.current);
          console.log('teste', teste);
          console.log('video-player', document.querySelector('video-player'));
          console.log(
            'video-player-container',
            document.querySelector('video-player-container'),
          );

          await adjustVideo();
        } catch (e) {
          adjustVideo();
          sendLogs({
            action: 'error-render-video',
            info: {
              error: e,
            },
          });
        }
      }
      setRemoteCameraDisabled(false);
    }
  }, [
    mediaStream,
    isStarted,
    participantUserID,
    sendLogs,
    canvasDimension,
    remoteParticipant?.userId,
    remoteParticipant?.bVideoOn,
    videoPatientTeste,
  ]);

```

 ![Captura de tela de 2025-04-09 08-24-48](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/9/e9ff779a38b50fe1ddbfa867124e04790d80bd89.png)

Still cant see the video.

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 9, 2025, 11:44am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/8 "2025-04-09T11:44:33Z")

</div>

I’d like to add somethings.

1 - My application is a telemedicine solution and the error that I am getting is from the doctor side, but the patient side(APP React Native) still using 1.12.14 version.

2 - Using styled component.

3 - The element is created on the DOM, but is not showing.

```auto
export const VideoPlayerContainer = styled('video-player-container')`
  flex: 1;
  width: 100%;
  height: 100%;
  border: 3;
  border-style: 'solid';
  border-color: 'black';
`;

export const VideoPlayer = styled('video-player')`
  flex: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`;

```

```auto
 <div
        style={{
          border: 3,
          borderColor: 'red',
          borderWidth: 4,
          borderStyle: 'solid',
          width: '100%',
          height: '100%',
        }}
      >
        <p>TESTE</p>

        <S.VideoPlayerContainer>
          <S.VideoPlayer class="video-player" ref={videoPatientTeste} />
        </S.VideoPlayerContainer>
      </div>

```

 ![Captura de tela de 2025-04-09 08-48-34](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/d/9d330a268e8277b9b4677c10f53bfc6f9b1b3c98.jpeg)  
 ![Captura de tela de 2025-04-09 08-48-29](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/0/20043cfc987316cf591e514304a05a318d583cc0.png)

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 11, 2025, 12:46am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/9 "2025-04-11T00:46:26Z")

</div>

Hi @josemaurodl

Thanks for sharing the detailed code snippets with us.

In the code, both `stream.attachVideo` and `stream.adjustRenderedVideoPosition` are used. If you’re using `video-player`, the video position is adjusted automatically, so additional API calls aren’t necessary.

Regarding the styling issue with `video-player`, could you create a test app and share it with us for further investigation?

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 14, 2025, 12:51pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/10 "2025-04-14T12:51:47Z")

</div>

So, you can use the the videosdk-web-sample from ZOOM GitHub.  
Just add the styled-components and use.

 ![Captura de tela de 2025-04-14 09-50-13](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/d/6dca04353bc81a9f28a2c8b00fb3dda0eb93c8c6.jpeg)  
 ![Captura de tela de 2025-04-14 09-50-09](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/9/293ea96ab02fc7a707a37fc0c5ea43304f7a9890.png)  
 ![Captura de tela de 2025-04-14 09-49-54](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/e/ce87ba459028efee0d0da2e51be5a9f86ae2ddc4.png)  
 ![Captura de tela de 2025-04-14 09-49-47](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/4/043cfbc48741347d77fdc205a99c144d53af42f1.png)

```auto
import styled from 'styled-components';

export const VideoTeste = styled('video-player')`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  border-radius: 10;
`;

export const DivTeste = styled.div`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-color: red;
  border-radius: 10;
  background-color: green;
`;

```

```auto
 <>
                          <VideoTeste
                            class="video-player"
                            ref={(element) => {
                              setVideoPlayerRef(user.userId, element);
                            }}
                          />
                          <DivTeste>
                            <p>TESTE</p>
                          </DivTeste>
                        </>

```

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [April 15, 2025, 6:33am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/11 "2025-04-15T06:33:14Z")

</div>

Hi @josemaurodl

Thanks for sharing the code snippets with us.

```javascript
export const VideoTeste = styled('video-player')`
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red; // remove this property
  border-radius: 10;
`;

```

Cannot set the `background-color` because the video is rendered on a canvas inside the shadow DOM of the `video-play-container`. If a background color is applied, it will cover the video.

Similarly, also can not overlay a div element on top of the `video-player`, as it will cover the video rendered within the shadow DOM.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 15, 2025, 8:59am UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/12 "2025-04-15T08:59:21Z")

</div>

Man. It’s an example. It’s not real code.

---

<div class="post-metadata">

**Author:** ![josemaurodl](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@josemaurodl](https://devforum.zoom.us/u/josemaurodl)\
**Post date:** [April 22, 2025, 12:53pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/13 "2025-04-22T12:53:31Z")

</div>

This topic has been solved

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 22, 2026, 12:54pm UTC](https://devforum.zoom.us/t/using-attach-on-2-1-10-version/131108/14 "2026-04-22T12:54:02Z")

</div>

Closed on April 22, 2026, 12:54pm UTC

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.