How to take snapshots from the live streaming

Description
We are integrating Video SDK into our web application with web platform using REACT JS. We looking for an image capturing functionality from the live video streaming. For that we used “html2canvas” package in React JS. When we tried to take the snapshot from the live streaming we are able to take whole screen snapshot, but we couldn’t take the snapshot of particular participant video streaming alone. When we tried that output shows whitescreen only.

Web Video SDK version
version : 1.5.1

I’m not exactly sure what steps you are taking to get the screenshots - could you post some of the relevant code or a link to help e understand what you are doing, so I can try to replicate on my end?

Thanks for your reply.

Snapshot code snippet

html2canvas(document.getElementById('share-canvas') as HTMLVideoElement).then(img => {
          let data = img.toDataURL('image/jpg')
          console.log(data);
        });

Share Canvas snippet

<div
          className="share-container-viewport"
          style={{
            width: `${shareViewDimension.width}px`,
            height: `${shareViewDimension.height}px`
          }}
        >
          <canvas className={classnames('share-canvas', { hidden: isStartedShare })} ref={shareRef} />
          {isSupportWebCodecs() ? (
            <video
              className={classnames('share-canvas', {
                hidden: isRecieveSharing
              })}
              ref={selfShareRef}
              playsInline
            />
          ) : (
            <canvas
              className={classnames('share-canvas', {
                hidden: isRecieveSharing
              })}
              ref={selfShareRef}
            />
          )}
        </div>

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