An example of how to use the audio and video tracks created by the Agora Web SDK to create a custom `<video />` element and append it to the DOM.

Custom-Video-Element-With-Agora.js

import AgoraRTC from 'agora-rtc-sdk-ng'

// declare audio and video tracks
const [audioTrack, videoTrack] = null

// Initialize the audio and video tracks
if (!audioTrack || !videoTrack) {
  [ audioTrack, videoTrack ] = await AgoraRTC.createMicrophoneAndCameraTracks({ audioConfig: 'music_standard', videoConfig: '360p_7' })
}

// create video element
const videoFromStream = document.createElement('video')
videoFromStream.id = 'local-video-stream'
// set attributes to play video inline 
videoFromStream.setAttribute('webkit-playsinline', 'webkit-playsinline');
videoFromStream.setAttribute('playsinline', 'playsinline');
// Create new MediaStream from audio and video tracks 
videoFromStream.srcObject = new MediaStream([videoTrack._mediaStreamTrack, audioTrack._mediaStreamTrack])
// Disable controls
videoFromStream.controls = false
// Set a width and height
videoFromStream.height = 300
videoFromStream.width = 500
// Add video element to the DOM
document.body.appendChild(videoFromStream);

// wait till metadata is loaded
videoFromStream.onloadedmetadata = () => {
  // ready to play video
  videoFromStream.play();
}