### Direct Livestreaming Example

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/directLivestreaming/index.html

This snippet shows how to create a client, join a room, publish local camera and microphone tracks, and start a direct live stream. It also includes event listeners for stream state changes and handles stream stopping and cleanup.

```javascript
const client = QNRTC.createClient();
const startBtn = document.getElementById("start-stream-btn");
const stopBtn = document.getElementById("stop-stream-btn");
const roomTokenInput = document.getElementById("room-token");
const streamURLInput = document.getElementById("stream-url");
let localTracks = [];
let streamID;

// 监控推流状态
function handleStreamStateChanged(streamID, state) {
  if (state === "STARTED") {
    alert("streaming state: " + state, "success");
  } else {
    alert("streaming state: " + state, "warning");
  }
}

startBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("direct-livestreaming-state-changed", handleStreamStateChanged);
    await client.join(roomTokenInput.value);
    const cameraTrack = await QNRTC.createCameraVideoTrack();
    const microphoneTrack = await QNRTC.createMicrophoneAudioTrack();
    localTracks.push(cameraTrack, microphoneTrack);
    await client.publish(localTracks);
    streamID = String(Math.random()),
    await client.startDirectLiveStreaming({
      streamID: streamID,
      url: streamURLInput.value,
      videoTrack: cameraTrack,
      audioTrack: microphoneTrack,
    });
    startBtn.disabled = true;
    stopBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};

stopBtn.onclick = (e) => {
  e.preventDefault();
  client.stopDirectLiveStreaming(streamID)
    .then(() => {
      return client.leave();
    })
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      startBtn.disabled = false;
      stopBtn.disabled = true;
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Initialize Client and UI Elements

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/muteAudioOrVideo/index.html

Initializes the QNRTC client and gets references to various UI elements for room control and media display. This setup is necessary before joining a room.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
const muteControlContainer = document.getElementById("mute-control-container");
const muteCameraInput = document.getElementById("mute-camera");
const muteMicrophoneInput = document.getElementById("mute-microphone");
let microphoneTrack;
let cameraTrack;
```

--------------------------------

### Start Livestreaming

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/defaultTranscodingLivestreaming/index.html

Handles the start stream button click event. It joins the room, creates and publishes local camera and microphone tracks, and updates the transcoding layout.

```javascript
startBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnPublished);
    await client.join(roomTokenInput.value);
    const cameraTrack = await QNRTC.createCameraVideoTrack();
    const microphoneTrack = await QNRTC.createMicrophoneAudioTrack();
    localTracks.push(cameraTrack, microphoneTrack);
    await client.publish(localTracks);
    allVideoTracks.add(cameraTrack.trackID);
    allAudioTracks.add(microphoneTrack.trackID);
    setTranscodingTracks();
    stopBtn.disabled = false;
    startBtn.disabled = true;
  } catch (e) {
    alert(e.message, "warning");
  }
};
```

--------------------------------

### Initialize Client and Handle UI Events

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/defaultTranscodingLivestreaming/index.html

Initializes the QNRTC client and sets up event listeners for UI elements like start and stop buttons. It also includes logic for handling user publishing and unpublishing events to update the transcoding layout.

```javascript
const client = QNRTC.createClient();
const startBtn = document.getElementById("start-stream-btn");
const stopBtn = document.getElementById("stop-stream-btn");
const roomTokenInput = document.getElementById("room-token");
let localTracks = [];

// 合流后画布宽高
// 这里要和浏览器控制台配置的连麦合流转推配置一致
const width = 720;
const height = 1080;

// 房间内所有的 tracks
let allVideoTracks = new Set();
let allAudioTracks = new Set();

// x, y, width, height
// 根据 allVideoTracks 自动配置合流布局
// 按照均等分配的原则分配每个 track 在画布的位置
// 1 => 占据全部
// 2 => 左右等分
// 3 => 四等分
// 4 => 四等分
// 5 => 2 row 3 colum
// ...
function getVideoConfig() {
  let x = 1;
  let y = 1;
  let flag = true;
  while (x * y < allVideoTracks.size) {
    if (flag) {
      x += 1;
    }
    if (!flag) {
      y += 1;
    }
    flag = !flag;
  }
  const cellWidth = Math.floor(width / x);
  const cellHeight = Math.floor(height / y);
  let res = [];
  let tracks = [...allVideoTracks];
  for (let i = 0; i < tracks.length; i++) {
    let config = {};
    config.x = cellWidth * (i % x);
    config.y = cellHeight * Math.floor(i / x);
    config.width = (i + 1) % x === 0 ? width - config.x : cellWidth;
    config.height = Math.floor(i / x) + 1 === y ? height - config.y : cellHeight;
    config.trackID = tracks[i];
    res.push(config);
  }
  return res;
}

// 根据当前房间内所有的 track 信息，更新推流布局
function setTranscodingTracks() {
  let transcodingTracks = [...[...allAudioTracks].map(trackID => ({ trackID })), ...getVideoConfig()];
  // 默认合流，不需要传递 streamID
  client.setTranscodingLiveStreamingTracks(null, transcodingTracks)
    .then(() => {
      console.log("set track success", transcodingTracks);
    })
    .catch(e => {
      console.log("set track fail", e, transcodingTracks);
    });
}

function handleUserPublished(userID, tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      allAudioTracks.add(track.trackID);
    } else {
      allVideoTracks.add(track.trackID);
    }
  }
  setTranscodingTracks();
}

function handleUserUnPublished(userID, tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      allAudioTracks.delete(track.trackID);
    } else {
      allVideoTracks.delete(track.trackID);
    }
  }
  setTranscodingTracks();
}
```

--------------------------------

### Initialize and Get Media Devices

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/switchMediaDevices/index.html

Initializes the QNRTC client and retrieves lists of available cameras, microphones, and playback devices. Updates the respective select elements with these devices. This should be called on page load.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
const cameraSelect = document.getElementById("camera-select");
const microphoneSelect = document.getElementById("microphone-select");
const playbackDeviceSelect = document.getElementById("playbackDevice-select");

let cameras = [];
let microphones = [];
let playbackDevices = [];

function createSelectOption(label, deviceId) {
    const option = document.createElement("option");
    option.value = deviceId;
    option.innerText = label;
    return option;
}

function updateDeviceSelect(devices, selectElement) {
    selectElement.innerHTML = "";
    selectElement.appendChild(createSelectOption("-", "-"));
    for (const device of devices) {
        selectElement.appendChild(createSelectOption(device.label, device.deviceId));
    }
}

function getCameras() {
    QNRTC.getCameras()
        .then(devices => {
            cameras = devices;
            updateDeviceSelect(devices, cameraSelect);
        })
        .catch(e => {
            alert(e.message, "error");
        });
}

function getMicrophones() {
    QNRTC.getMicrophones()
        .then(devices => {
            microphones = devices;
            updateDeviceSelect(devices, microphoneSelect);
        })
        .catch(e => {
            alert(e.message, "error");
        });
}

function getPlaybackDevices() {
    QNRTC.getPlaybackDevices()
        .then(devices => {
            playbackDevices = devices;
            updateDeviceSelect(devices, playbackDeviceSelect);
        })
        .catch(e => {
            alert(e.message, "error");
        });
}

getCameras();
getMicrophones();
getPlaybackDevices();
```

--------------------------------

### Start Transcoding Livestream

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/transcodingLivestreaming/index.html

Initiates a transcoded livestream. It joins a room, publishes local tracks, and starts the transcoding process. Ensure you have a valid room token and RTMP stream URL.

```javascript
const client = QNRTC.createClient(); const startBtn = document.getElementById("start-stream-btn"); const stopBtn = document.getElementById("stop-stream-btn"); const roomTokenInput = document.getElementById("room-token"); const streamURLInput = document.getElementById("stream-url"); let localTracks = []; let streamID; // 合流后画布宽高 const width = 1280; const height = 720; // 房间内所有的 tracks let allVideoTracks = new Set(); let allAudioTracks = new Set(); // 监控推流状态 function handleStreamStateChanged(streamID, state) { if (state === "STARTED") { setTranscodingTracks(); alert("streaming state: " + state, "success"); } else { alert("streaming state: " + state, "warning"); } } // x, y, width, height // 根据 allVideoTracks 自动配置合流布局 // 按照均等分配的原则分配每个 track 在画布的位置 // 1 => 占据全部 // 2 => 左右等分 // 3 => 四等分 // 4 => 四等分 // 5 => 2 row 3 colum // ... function getVideoConfig() { let x = 1; let y = 1; let flag = true; while (x * y < allVideoTracks.size) { if (flag) { x += 1; } if (!flag) { y += 1; } flag = !flag; } const cellWidth = Math.floor(width / x); const cellHeight = Math.floor(height / y); let res = []; let tracks = [...allVideoTracks]; for (let i = 0; i < tracks.length; i++) { let config = {}; config.x = cellWidth * (i % x); config.y = cellHeight * Math.floor(i / x); config.width = (i + 1) % x === 0 ? width - config.x : cellWidth; config.height = Math.floor(i / x) + 1 === y ? height - config.y : cellHeight; config.trackID = tracks[i]; res.push(config); } return res; } // 根据当前房间内所有的 track 信息，更新推流布局 function setTranscodingTracks() { let transcodingTracks = [...[...allAudioTracks].map(trackID => ({ trackID })), ...getVideoConfig()]; client.setTranscodingLiveStreamingTracks(streamID, transcodingTracks) .then(() => { console.log("set track success", transcodingTracks); }) .catch(e => { console.log("set track fail", e, transcodingTracks); }); } function handleUserPublished(userID, tracks) { for (const track of tracks) { if (track.isAudio()) { allAudioTracks.add(track.trackID); } else { allVideoTracks.add(track.trackID); } } setTranscodingTracks(); } function handleUserUnPublished(userID, tracks) { for (const track of tracks) { if (track.isAudio()) { allAudioTracks.delete(track.trackID); } else { allVideoTracks.delete(track.trackID); } } setTranscodingTracks(); } startBtn.onclick = async (e) => { e.preventDefault(); try { client.on("transcoding-livestreaming-state-changed", handleStreamStateChanged); client.on("user-published", handleUserPublished); client.on("user-unpublished", handleUserUnPublished); await client.join(roomTokenInput.value); const cameraTrack = await QNRTC.createCameraVideoTrack(); const microphoneTrack = await QNRTC.createMicrophoneAudioTrack(); localTracks.push(cameraTrack, microphoneTrack); await client.publish(localTracks); allVideoTracks.add(cameraTrack.trackID); allAudioTracks.add(microphoneTrack.trackID); streamID = String(Math.random()); await client.startTranscodingLiveStreaming({ streamID: streamID, url: streamURLInput.value, width, height }); startBtn.disabled = true; stopBtn.disabled = false; } catch (e) { alert(e.message, "warning"); } };
```

--------------------------------

### Initialize and Join Room with External Audio

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/publishExternalAudio/index.html

This snippet shows the complete process of initializing the QNRTC client, setting up event listeners for user publications, selecting an audio file, creating a buffer source audio track from the selected file, publishing it, and joining the room. It also includes logic for disabling/enabling join/leave buttons and handling potential errors.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const selectAudioBtn = document.getElementById("select-audio-btn");
const selectAudioInput = document.getElementById("select-audio-input");
const audioFileName = document.getElementById("audio-file-name");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let audioFile;

selectAudioBtn.onclick = e => {
  e.preventDefault();
  selectAudioInput.click();
};

selectAudioInput.onchange = e => {
  audioFile = e.target.files[0];
  if (!audioFile) return;
  joinRoomBtn.disabled = false;
  audioFileName.innerText = audioFile.name;
};

let localTracks = [];

async function handleUserPublished(userID, tracks) {
  try {
    const { videoTracks, audioTracks } = await client.subscribe(tracks);
    playUserTracks([...videoTracks, ...audioTracks]);
  } catch (e) {
    alert(e.message, "warning");
  }
}

function playUserTracks(tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      track.play(document.body)
        .catch(e => {
          alert(e.message, "warning");
        });
    } else {
      const div = document.createElement("div");
      if (track.trackID) div.id = track.trackID;
      mediaContainer.appendChild(div);
      track.play(div)
        .catch(e => {
          alert(e.message, "warning");
        });
    }
  }
}

function handleUserUnPublished(userID, tracks) {
  for (const track of tracks) {
    let div = document.getElementById(track.trackID);
    if (div) div.remove();
  }
}

joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnPublished);
    await client.join(roomTokenInput.value);
    const audioTrack = await QNRTC.createBufferSourceAudioTrack({ source: audioFile, tag: "bufferSourceAudio" });
    audioTrack.start();
    localTracks.push(audioTrack);
    for (const track of localTracks) {
      if (track.isVideo()) {
        playUserTracks([track]);
      }
    }
    await client.publish(localTracks);
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};

leaveRoomBtn.onclick = (e) => {
  e.preventDefault();
  client.leave()
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      mediaContainer.innerHTML = "";
      joinRoomBtn.disabled = false;
      leaveRoomBtn.disabled = true;
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Initialize and Join/Leave Video Call

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/basicVideoCall/index.html

This snippet shows the core logic for joining and leaving a video call. It includes setting up event listeners for user publishing/unpublishing, creating local media tracks, publishing them, and handling the UI state for join/leave buttons. Ensure you have a valid room token.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let localTracks = [];

async function handleUserPublished(userID, tracks) {
  try {
    const { videoTracks, audioTracks } = await client.subscribe(tracks);
    playUserTracks([...videoTracks, ...audioTracks]);
  } catch (e) {
    alert(e.message, "warning");
  }
}

function playUserTracks(tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      track.play(document.body)
        .catch(e => {
          alert(e.message, "warning");
        });
    } else {
      const div = document.createElement("div");
      if (track.trackID) div.id = track.trackID;
      mediaContainer.appendChild(div);
      track.play(div)
        .catch(e => {
          alert(e.message, "warning");
        });
    }
  }
}

function handleUserUnPublished(userID, tracks) {
  for (const track of tracks) {
    let div = document.getElementById(track.trackID);
    if (div) div.remove();
  }
}

joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnPublished);
    await client.join(roomTokenInput.value);
    localTracks = await QNRTC.createMicrophoneAndCameraTracks();
    for (const track of localTracks) {
      if (track.isVideo()) {
        playUserTracks([track]);
      }
    }
    await client.publish(localTracks);
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};

leaveRoomBtn.onclick = (e) => {
  e.preventDefault();
  client.leave()
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      mediaContainer.innerHTML = "";
      joinRoomBtn.disabled = false;
      leaveRoomBtn.disabled = true;
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Join Room and Publish Custom Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/customTrack/index.html

This snippet shows how to join a room using a provided token, capture a media stream from a video source, create custom audio and video tracks from the stream's tracks, and publish them to the room. It also handles enabling/disabling join/leave buttons and playing the video.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
const videoSource = document.getElementById("video-source");
let localTracks = [];

joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    await client.join(roomTokenInput.value);
    const stream = videoSource.captureStream();
    const tracks = stream.getTracks();
    for (const track of tracks) {
      let qntrack;
      if (track.kind === "audio") {
        qntrack = QNRTC.createCustomAudioTrack({ mediaStreamTrack: track });
      } else {
        qntrack = QNRTC.createCustomVideoTrack({ mediaStreamTrack: track });
      }
      localTracks.push(qntrack);
    }
    await client.publish(localTracks);
    videoSource.play();
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};
```

--------------------------------

### Initialize and Join/Leave Room

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/pureAudioCall/index.html

Initializes the QNRTC client, handles joining a room with a provided token, and publishing local audio tracks. Also includes functionality to leave the room and clean up resources.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let localTracks = [];

joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    await client.join(roomTokenInput.value);
    const audioTrack = await QNRTC.createMicrophoneAudioTrack();
    localTracks.push(audioTrack);
    await client.publish(localTracks);
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};

leaveRoomBtn.onclick = (e) => {
  e.preventDefault();
  client.leave()
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      mediaContainer.innerHTML = "";
      joinRoomBtn.disabled = false;
      leaveRoomBtn.disabled = true;
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Join and Leave Room with Screen Sharing

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/screenSharing/index.html

This snippet shows how to join a room, publish local tracks including a screen share track, and leave the room. It also handles subscribing to remote user tracks. Ensure you have a valid room token.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let localTracks = [];

async function handleUserPublished(userID, tracks) {
  try {
    const { videoTracks, audioTracks } = await client.subscribe(tracks);
    playUserTracks([...videoTracks, ...audioTracks]);
  } catch (e) {
    alert(e.message, "warning");
  }
}

function playUserTracks(tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      track.play(document.body)
        .catch(e => {
          alert(e.message, "warning");
        });
    } else {
      const div = document.createElement("div");
      if (track.trackID) div.id = track.trackID;
      mediaContainer.appendChild(div);
      track.play(div)
        .catch(e => {
          alert(e.message, "warning");
        });
    }
  }
}

function handleUserUnPublished(userID, tracks) {
  for (const track of tracks) {
    let div = document.getElementById(track.trackID);
    if (div) div.remove();
  }
}

joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnPublished);
    // 采集屏幕分享 track
    const screenTrack = await QNRTC.createScreenVideoTrack();
    localTracks = await QNRTC.createMicrophoneAndCameraTracks();
    // 监听用户点击了屏幕分享按钮
    screenTrack.once("ended", () => {
      alert("screen track stopped", "warning");
    });
    localTracks.push(screenTrack);
    await client.join(roomTokenInput.value);
    for (const track of localTracks) {
      if (track.isVideo()) {
        playUserTracks([track]);
      }
    }
    await client.publish(localTracks);
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
  } catch (e) {
    alert(e.message, "warning");
  }
};

leaveRoomBtn.onclick = (e) => {
  e.preventDefault();
  client.leave()
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      mediaContainer.innerHTML = "";
      joinRoomBtn.disabled = false;
      leaveRoomBtn.disabled = true;
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Join and Publish with Audio Mixing

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/audioMixing/index.html

This snippet demonstrates joining an RTC room and publishing local tracks. It includes creating an audio mixer to play a remote MP3 file as background music, setting its volume, and publishing the local tracks. Ensure you have the necessary room token and the remote audio file URL.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let localTracks = [];

async function handleUserPublished(userID, tracks) {
    try {
        const { videoTracks, audioTracks } = await client.subscribe(tracks);
        playUserTracks([...videoTracks, ...audioTracks]);
    } catch (e) {
        alert(e.message, "warning");
    }
}

function playUserTracks(tracks) {
    for (const track of tracks) {
        if (track.isAudio()) {
            track.play(document.body)
                .catch(e => {
                    alert(e.message, "warning");
                });
        } else {
            const div = document.createElement("div");
            if (track.trackID) div.id = track.trackID;
            mediaContainer.appendChild(div);
            track.play(div)
                .catch(e => {
                    alert(e.message, "warning");
                });
        }
    }
}

function handleUserUnPublished(userID, tracks) {
    for (const track of tracks) {
        let div = document.getElementById(track.trackID);
        if (div) div.remove();
    }
}

joinRoomBtn.onclick = async (e) => {
    e.preventDefault();
    try {
        client.on("user-published", handleUserPublished);
        client.on("user-unpublished", handleUserUnPublished);
        await client.join(roomTokenInput.value);
        localTracks = await QNRTC.createMicrophoneAndCameraTracks();
        for (const track of localTracks) {
            if (track.isVideo()) {
                playUserTracks([track]);
            } else {
                const audioMixer = track.createAudioMixer("https://docs.qnsdk.com/eva_edm.mp3");
                audioMixer.start();
                audioMixer.setPlayingVolume(0.1);
            }
        }
        await client.publish(localTracks);
        joinRoomBtn.disabled = true;
        leaveRoomBtn.disabled = false;
    } catch (e) {
        alert(e.message, "warning");
    }
};

```

--------------------------------

### Join Room and Publish Tracks with Specific Devices

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/switchMediaDevices/index.html

Joins a room using a provided token and publishes local audio/video tracks. Allows specifying the exact microphone and camera device IDs to use for track creation. If no device ID is specified, the default device is used.

```javascript
let localTracks = [];

async function handleUserPublished(userID, tracks) {
    try {
        const { videoTracks, audioTracks } = await client.subscribe(tracks);
        playUserTracks([...videoTracks, ...audioTracks]);
    } catch (e) {
        alert(e.message, "warning");
    }
}

function playUserTracks(tracks) {
    for (const track of tracks) {
        if (track.isAudio()) {
            track.play(document.body)
                .then(() => {
                    if (playbackDeviceSelect.value !== "-") {
                        return track.setPlaybackDevice(playbackDeviceSelect.value);
                    }
                })
                .catch(e => {
                    alert(e.message, "warning");
                });
        } else {
            const div = document.createElement("div");
            if (track.trackID) div.id = track.trackID;
            mediaContainer.appendChild(div);
            track.play(div)
                .catch(e => {
                    alert(e.message, "warning");
                });
        }
    }
}

function handleUserUnPublished(userID, tracks) {
    for (const track of tracks) {
        let div = document.getElementById(track.trackID);
        if (div) div.remove();
    }
}

joinRoomBtn.onclick = async (e) => {
    e.preventDefault();
    try {
        client.on("user-published", handleUserPublished);
        client.on("user-unpublished", handleUserUnPublished);
        await client.join(roomTokenInput.value);
        // 根据指定的设备 id 来完成采集
        localTracks = await QNRTC.createMicrophoneAndCameraTracks(
            { microphoneId: microphoneSelect.value === "-" ? undefined : microphoneSelect.value },
            { cameraId: cameraSelect.value === "-" ? undefined : cameraSelect.value },
        );

        for (const track of localTracks) {
            if (track.isVideo()) {
                playUserTracks([track]);
            }
        }
        await client.publish(localTracks);
        joinRoomBtn.disabled = true;
        leaveRoomBtn.disabled = false;
    } catch (e) {
        alert(e.message, "warning");
    }
};
```

--------------------------------

### Join and Publish with Dual Stream

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/videoDualStream/index.html

Joins a room and publishes local audio and video tracks. The video track is configured with dual-stream encoding, specifying resolution and bitrate for both the main and low-stream. This snippet requires a room token and sets up event listeners for user publishing and unpublishing.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const roomTokenInput = document.getElementById("room-token");
const mediaContainer = document.getElementById("media-container");
let localTracks = [];
// 存储开启了大小流的远端 video track
let remoteVideoTracks = new Map();

async function handleUserPublished(userID, tracks) {
    try {
        const { videoTracks, audioTracks } = await client.subscribe(tracks);
        playUserTracks([...videoTracks, ...audioTracks]);
        for (const track of videoTracks) {
            if (track.isLowStreamEnabled) {
                track.on("low-stream-state-changed", state => {
                    console.log("state: ", track.trackID, state);
                });
                remoteVideoTracks.set(track.trackID, track);
            }
        }
    } catch (e) {
        alert(e.message, "warning");
    }
}

function handleUserUnPublished(userID, tracks) {
    for (const track of tracks) {
        if (track.isVideo() && track.isLowStreamEnabled) {
            remoteVideoTracks.delete(track.trackID);
            const div = document.getElementById(track.trackID);
            if (div) div.remove();
        }
    }
}

function handleSetLowStream(checked, trackID) {
    const track = remoteVideoTracks.get(trackID);
    if (!track) {
        alert("remote track not found", trackID);
        return;
    }
    track.setLowStream(checked);
}

function createVideoPlayContainer(trackID) {
    const div = document.createElement("div");
    div.style.position = "relative";
    div.id = trackID;
    div.innerHTML = ` <div class="form-check form-switch dual-stream-control">
 <label class="form-check-label">low stream <input class="form-check-input" type="checkbox" role="switch" onclick="handleSetLowStream(this.checked, '${trackID}')"> </label>
 </div>`;
    return div;
}

function playUserTracks(tracks) {
    for (const track of tracks) {
        if (track.isAudio()) {
            track.play(document.body)
                .catch(e => {
                    alert(e.message, "warning");
                });
        } else {
            let div;
            if (track.isLowStreamEnabled) {
                div = createVideoPlayContainer(track.trackID);
            } else {
                div = document.createElement("div");
            }
            mediaContainer.appendChild(div);
            track.play(div)
                .catch(e => {
                    alert(e.message, "warning");
                });
        }
    }
}

joinRoomBtn.onclick = async (e) => {
    e.preventDefault();
    try {
        client.on("user-published", handleUserPublished);
        client.on("user-unpublished", handleUserUnPublished);
        await client.join(roomTokenInput.value);
        const microphoneTrack = await QNRTC.createMicrophoneAudioTrack();
        // 发布视频大小流
        const cameraTrack = await QNRTC.createCameraVideoTrack({
            encoderConfig: {
                width: 720,
                height: 480,
                bitrate: 1000,
                lowStreamConfig: {
                    scaleResolutionDownBy: 2,
                    bitrate: 100
                }
            }
        });
        localTracks.push(cameraTrack, microphoneTrack);
        for (const track of localTracks) {
            if (track.isVideo()) {
                playUserTracks([track]);
            }
        }
        await client.publish(localTracks);
        joinRoomBtn.disabled = true;
        leaveRoomBtn.disabled = false;
    } catch (e) {
        alert(e.message, "warning");
    }
};

leaveRoomBtn.onclick = (e) => {
    e.preventDefault();
    client.leave()
        .then(() => {
            for (const track of localTracks) {
                track.destroy();
            }
            localTracks = [];
            remoteVideoTracks = new Map();
            mediaContainer.innerHTML = "";
            joinRoomBtn.disabled = false;
            leaveRoomBtn.disabled = true;
        })
        .catch((e) => {
            alert(e.message, "warning");
        });
}
```

--------------------------------

### Initialize Client and Room Operations

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/sendCustomMessage/index.html

Initializes the QNRTC client and sets up event listeners for joining a room and receiving messages. This code is used to manage the RTC connection and message handling.

```javascript
const client = QNRTC.createClient();
const joinRoomBtn = document.getElementById("join-room-btn");
const leaveRoomBtn = document.getElementById("leave-room-btn");
const sendMsgBtn = document.getElementById("send-msg-btn");
const roomTokenInput = document.getElementById("room-token");
const msgContentInput = document.getElementById("msg-content");
const msgContainer = document.getElementById("msg-container");
const msgControl = document.getElementById("msg-control");

function appendMsg(userID, msgContent) {
    const msgItemContainer = document.createElement("div");
    msgItemContainer.className = "msg-item";
    const user = document.createElement("div");
    user.innerText = userID;
    const msg = document.createElement("div");
    msg.innerText = msgContent;
    msgItemContainer.appendChild(user);
    msgItemContainer.appendChild(msg);
    msgContainer.appendChild(msgItemContainer);
    msgItemContainer.scrollIntoView();
}

function handleMessageReceived(msgInfo) {
    appendMsg(msgInfo.userID, msgInfo.content);
}

joinRoomBtn.onclick = async (e) => {
    e.preventDefault();
    try {
        client.on("message-received", handleMessageReceived);
        await client.join(roomTokenInput.value);
        joinRoomBtn.disabled = true;
        leaveRoomBtn.disabled = false;
        msgControl.style.display = "block";
    } catch (e) {
        alert(e.message, "warning");
    }
};

leaveRoomBtn.onclick = (e) => {
    e.preventDefault();
    client.leave()
        .then(() => {
            joinRoomBtn.disabled = false;
            leaveRoomBtn.disabled = true;
            msgControl.style.display = "none";
            msgContainer.innerHTML = "";
        })
        .catch((e) => {
            alert(e.message, "warning");
        });
};

sendMsgBtn.onclick = (e) => {
    e.preventDefault();
    const value = msgContentInput.value;
    client.sendMessage("xx", value)
        .then(() => {
            appendMsg("Me", value);
            msgContentInput.value = "";
        })
        .catch((e) => {
            alert(e.message, "warning");
        });
}
```

--------------------------------

### Handle Device Change Events

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/switchMediaDevices/index.html

Listens for changes in camera, microphone, or playback devices and re-fetches the device lists to update the UI. This ensures the application reflects the current state of available hardware.

```javascript
/**
 * 监听设备变化事件，然后再次设备列表
 */
QNRTC.onCameraChanged = (info) => {
    console.log("camera changed", info);
    getCameras();
};

QNRTC.onMicrophoneChanged = (info) => {
    console.log("microphone changed", info);
    getMicrophones();
};

QNRTC.onPlaybackDeviceChanged = (info) => {
    console.log("playback device changed", info);
    getPlaybackDevices();
};
```

--------------------------------

### Join Room

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/muteAudioOrVideo/index.html

Joins a room using the provided token, sets up event listeners for user publishing/unpublishing, creates and publishes local camera and microphone tracks, and enables mute controls. This function is triggered by the 'Join Room' button click.

```javascript
joinRoomBtn.onclick = async (e) => {
  e.preventDefault();
  try {
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnPublished);
    await client.join(roomTokenInput.value);
    cameraTrack = await QNRTC.createCameraVideoTrack();
    microphoneTrack = await QNRTC.createMicrophoneAudioTrack();
    playUserTracks([cameraTrack]);
    await client.publish([cameraTrack, microphoneTrack]);
    joinRoomBtn.disabled = true;
    leaveRoomBtn.disabled = false;
    muteControlContainer.style.display = "block";
  } catch (e) {
    alert(e.message, "warning");
  }
};
```

--------------------------------

### Join and Leave Video Call

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/videoCallStatistics/index.html

Handles joining a room with a provided token and publishing local audio/video tracks. Also manages leaving the room, cleaning up tracks, and resetting UI elements. Requires QNRTC library and DOM elements for token input, join/leave buttons, and media display.

```javascript
const client = QNRTC.createClient(); const joinRoomBtn = document.getElementById("join-room-btn"); const leaveRoomBtn = document.getElementById("leave-room-btn"); const roomTokenInput = document.getElementById("room-token"); const mediaContainer = document.getElementById("media-container"); let localTracks = []; let statsIntervals = new Map(); async function handleUserPublished(userID, tracks) { try { const { videoTracks, audioTracks } = await client.subscribe(tracks); playUserTracks([...videoTracks, ...audioTracks], true); } catch (e) { alert(e.message, "warning"); } } function handleUserUnpublished(userID, tracks) { for (const track of tracks) { const interval = statsIntervals.get(track.trackID); if (!interval) continue; clearInterval(interval.id); interval.div.remove(); } } function playUserTracks(tracks, isRemote) { for (const track of tracks) { if (track.isAudio()) { track.play(document.body) .catch(e => { alert(e.message, "warning"); }); } else { const div = document.createElement("div"); mediaContainer.appendChild(div); track.play(div) .catch(e => { alert(e.message, "warning"); }) .then(() => { showStats(div, track, isRemote); }); } } } function showStats(div, track, isRemote) { const statsContainer = document.createElement("div"); statsContainer.className = "media-stats"; div.appendChild(statsContainer); const keyContainer = document.createElement("div"); const valueContainer = document.createElement("div"); statsContainer.appendChild(keyContainer); statsContainer.appendChild(valueContainer); const frameRateKey = document.createElement("div"); frameRateKey.innerText = "frameRate:"; const bitrateKey = document.createElement("div"); bitrateKey.innerText = "bitrate:"; const lostRateKey = document.createElement("div"); lostRateKey.innerText = "lostRate:"; keyContainer.appendChild(frameRateKey); keyContainer.appendChild(bitrateKey); keyContainer.appendChild(lostRateKey); const frameRateValue = document.createElement("div"); const bitrateValue = document.createElement("div"); const lostRateValue = document.createElement("div"); valueContainer.appendChild(frameRateValue); valueContainer.appendChild(bitrateValue); valueContainer.appendChild(lostRateValue); const id = setInterval(() => { let frameRate, bitrate, lostRate; if (isRemote) { const stat = track.getStats(); frameRate = stat.downlinkFrameRate; bitrate = stat.downlinkBitrate; lostRate = stat.downlinkLostRate; } else { const localStats = track.getStats(); frameRate = localStats.length > 0 ? localStats[0].uplinkFrameRate : 0; bitrate = localStats.length > 0 ? localStats[0].uplinkBitrate : 0; lostRate = localStats.length > 0 ? localStats[0].uplinkLostRate : 0; } frameRateValue.innerText = frameRate + " fps"; bitrate = (bitrate / 1000).toFixed(2); bitrateValue.innerText = bitrate + " kbps"; lostRate = (lostRate * 100).toFixed(2); lostRateValue.innerText = lostRate + " %"; }, 1000); statsIntervals.set(track.trackID, { id, div }); } joinRoomBtn.onclick = async (e) => { e.preventDefault(); try { client.on("user-published", handleUserPublished); client.on("user-unpublished", handleUserUnpublished); await client.join(roomTokenInput.value); localTracks = await QNRTC.createMicrophoneAndCameraTracks(); await client.publish(localTracks); for (const track of localTracks) { if (track.isVideo()) { playUserTracks([track], false); } } joinRoomBtn.disabled = true; leaveRoomBtn.disabled = false; } catch (e) { alert(e.message, "warning"); } }; leaveRoomBtn.onclick = (e) => { e.preventDefault(); client.leave() .then(() => { for (const track of localTracks) { track.destroy(); } localTracks = []; mediaContainer.innerHTML = ""; joinRoomBtn.disabled = false; leaveRoomBtn.disabled = true; for (const interval of statsIntervals.values()) { clearInterval(interval.id); interval.div.remove(); } }) .catch((e) => { alert(e.message, "warning"); }); }
```

--------------------------------

### Handle User Published Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/muteAudioOrVideo/index.html

Subscribes to tracks published by a remote user and plays them. It also sets up listeners for mute state changes on remote tracks.

```javascript
async function handleUserPublished(userID, tracks) {
  try {
    const { videoTracks, audioTracks } = await client.subscribe(tracks);
    const remoteTracks = [...videoTracks, ...audioTracks];
    // 监听每个远端 track mute 状态是否变化
    for (const track of remoteTracks) {
      track.on("mute-state-changed", (isMuted) => {
        console.log("trackID: " + track.trackID + ", mute state: ", isMuted);
      });
    }
    playUserTracks(remoteTracks);
  } catch (e) {
    alert(e.message, "warning");
  }
}
```

--------------------------------

### Leave Room and Clean Up Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/customTrack/index.html

This snippet demonstrates how to leave the current room, destroy all published custom tracks, reset the localTracks array, and update the UI by enabling the join button and disabling the leave button. It also pauses the video playback.

```javascript
leaveRoomBtn.onclick = (e) => {
  e.preventDefault();
  client.leave()
    .then(() => {
      for (const track of localTracks) {
        track.destroy();
      }
      localTracks = [];
      joinRoomBtn.disabled = false;
      leaveRoomBtn.disabled = true;
      videoSource.pause();
    })
    .catch((e) => {
      alert(e.message, "warning");
    });
}
```

--------------------------------

### Handle User Published Audio Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/pureAudioCall/index.html

Subscribes to remote audio tracks published by other users in the room and plays them. This function is called when a user publishes new tracks.

```javascript
async function handleUserPublished(userID, tracks) {
  try {
    const { videoTracks, audioTracks } = await client.subscribe(tracks);
    playUserTracks([...audioTracks]);
  } catch (e) {
    alert(e.message, "warning");
  }
}
```

--------------------------------

### Play User Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/muteAudioOrVideo/index.html

Plays audio and video tracks for a user. Audio tracks are played directly on the body, while video tracks are played in dedicated div elements.

```javascript
function playUserTracks(tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      track.play(document.body)
        .catch(e => {
          alert(e.message, "warning");
        });
    } else {
      const div = document.createElement("div");
      if (track.trackID) div.id = track.trackID;
      mediaContainer.appendChild(div);
      track.play(div)
        .catch(e => {
          alert(e.message, "warning");
        });
    }
  }
}
```

--------------------------------

### Play Remote Audio Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/pureAudioCall/index.html

Iterates through provided audio tracks and plays them. This is used to render audio from remote users.

```javascript
function playUserTracks(tracks) {
  for (const track of tracks) {
    if (track.isAudio()) {
      track.play(document.body)
        .catch(e => {
          alert(e.message, "warning");
        });
    }
  }
}
```

--------------------------------

### Leave Room and Clean Up Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/audioMixing/index.html

This snippet handles leaving an RTC room and cleaning up local audio and video tracks. It stops publishing, removes media elements, and resets UI states. This is essential for proper session termination and resource management.

```javascript
leaveRoomBtn.onclick = (e) => {
    e.preventDefault();
    client.leave()
        .then(() => {
            for (const track of localTracks) {
                track.destroy();
            }
            localTracks = [];
            mediaContainer.innerHTML = "";
            joinRoomBtn.disabled = false;
            leaveRoomBtn.disabled = true;
        })
        .catch((e) => {
            alert(e.message, "warning");
        });
}
```

--------------------------------

### Handle User UnPublished Tracks

Source: https://github.com/pili-engineering/qnrtc-web/blob/master/API-Examples-Web/muteAudioOrVideo/index.html

Removes the media elements associated with a user when they unpublish their tracks from the room.

```javascript
function handleUserUnPublished(userID, tracks) {
  for (const track of tracks) {
    let div = document.getElementById(track.trackID);
    if (div) div.remove();
  }
}
```