MHDYousuf

[
    {
        "name": "Ascension Island",
        "code": "AC",
        "emoji": "🇦🇨",
        "unicode": "U+1F1E6 U+1F1E8",
        "image": "https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AC.svg",
        "dial_code": "+247"
    },
    {

MHDYousuf

async function handleLeave() {
    try {
      const localContainer = document.getElementById("local-stream");

      rtc.localAudioTrack.close();
      rtc.localVideoTrack.close();

      setJoined(false);
      localContainer.textContent = "";

MHDYousuf

rtc.client.on("user-unpublished", (user) => {
        // Get the dynamically created DIV container
        const playerContainer = document.getElementById(user.uid);
        console.log(playerContainer);
        // Destroy the container
        playerContainer.remove();
      });

MHDYousuf

rtc.client.on("user-published", async (user, mediaType) => {
        // Subscribe to a remote user
        await rtc.client.subscribe(user);
        console.log("subscribe success");
        // console.log(user);

        if (mediaType === "video" || mediaType === "all") {
          // Get `RemoteVideoTrack` in the `user` object.
          const remoteVideoTrack = user.videoTrack;
          console.log(remoteVideoTrack);

MHDYousuf

// Create an audio track from the audio captured by a microphone
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// Create a video track from the video captured by a camera
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
// Play localStream
rtc.localVideoTrack.play("local-stream");

MHDYousuf

export const rtc = {
  // For the local client
  client: null,
  // For the local audio and video tracks
  localAudioTrack: null,
  localVideoTrack: null,
};

export const options = {
  // Pass your app ID here

MHDYousuf

.container {
  margin: 10px;
  padding: 10px;
  text-align: center;
}
.container input {
  display: block;
  text-align: center;
  margin: 0.5em auto;
  padding: 0.5em;

MHDYousuf

rtc.localStream.init(function () {
  console.log("init local stream success");
  rtc.localStream.play("local_stream")
  let {streamID}=rtc.localStream.params
  console.log('hey hey:',streamID)
  const video = document.querySelector('#video'+streamID)
  const canvas = document.querySelector('#canvas')
  const context = canvas.getContext('2d')
  handTrack.load().then(lmodel =>{
    model = lmodel

MHDYousuf

<script src=”https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>