Documentation
Video Call
Upgrade using advanced features
Distincitve features
Render the audio and video

Audio and Video Rendering under Different Frameworks (Web)

Last updated：2023-11-27 15:03

Application Scenarios

When using the ZEGO Web SDK, after obtaining the media stream, you need to render it to the <video> or <audio> tag to show the corresponding effect.

Implementation Steps

This article will introduce the use of different front-end frameworks to achieve audio and video rendering.

JavaScript

Create a tag on html.

<div id="local-video" style="width:320px;height:240px;"></div>

After creating the stream, set it to the "srcObject" property of the tag.

```javascript
// After calling the createZegoStream interface, you need to wait for the ZEGO server to return the stream media object before proceeding with subsequent operations.
const localStream = await this.zg.createZegoStream();

// stream is a MediaStream object, developers can render by assigning to the srcObject property of video or audio
localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});
```

Vue

Create a tag.

<div id="local-video" style="width: 320px;height: 240px"></div>

After creating the stream, render to the tag.

// After calling the createZegoStream interface, you need to wait for the ZEGO server to return the stream media object before proceeding with subsequent operations.
const localStream = await this.zg.createZegoStream();

localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});

Angular

Create a tag.

<div id="local-video" style="width: 320px;height: 240px;"></div>

After creating the stream, render to the tag.

// After calling the createZegoStream interface, you need to wait for the ZEGO server to return the stream media object before proceeding with subsequent operations.
const localStream = await this.zg.createZegoStream();

localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});

React

Create a tag.

<div id="local-video" style="width:320px;height:240px;"></div>

After creating the stream, set it to the "srcObject" property of the tag.

// After calling the createZegoStream interface, you need to wait for the ZEGO server to return the stream media object before proceeding with subsequent operations.
const localStream = await this.state.zg.createZegoStream();

localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});