### Install Dependencies and Build ZLMRTCClient.js

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/Readme.md

Run these commands to install project dependencies and then build the ZLMRTCClient.js project. The build can be performed in development mode ('npm run build') or production mode ('npm run pro').

```bash
npm install
npm run build # or npm run pro
```

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

### Start WebRTC Playback

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Initiates WebRTC playback after checking for resolution support if the camera is enabled and not in receive-only mode. Handles potential resolution incompatibility.

```javascript
function start() { stop(); let elr = document.getElementById("resolution"); let res = elr.options[elr.selectedIndex].text.match(/\d+/g); let h = parseInt(res.pop()); let w = parseInt(res.pop()); if(document.getElementById('useCamera').checked && !recvOnly) { ZLMRTCClient.isSupportResolution(w,h).then(e=>{ start_play(); }).catch(e=>{ alert("not support resolution"); }); }else{ start_play(); } }
```

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

### Get Media List and Populate UI

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Constructs the URL to fetch the media list and then calls getData to retrieve the data. The retrieved data is then used to fill the stream list UI. An interval is set to periodically refresh the list.

```javascript
function get_media_list() { let url = document.location.protocol+"//"+window.location.host+"/index/api/getMediaList?secret=035c73f7-bb6b-4889-a715-d9eb2d1925cc"; let json = getData(url); json.then((json)=> fillStreamList(json)); }
```

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

### Initiate Playback for a Specific Stream

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Constructs the WebRTC play URL using the provided app and stream identifiers and then calls the start function to begin playback. Updates the 'streamUrl' input field.

```javascript
function on_click_to_play(app, stream) { console.log(`on_click_to_play: ${app}/${stream}`); var url = `${document.location.protocol}//${window.location.host}/index/api/webrtc?app=${app}&stream=${stream}&type=play`; document.getElementById('streamUrl').value = url; start(); }
```

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

### Initialize and Handle WebRTC Events

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Sets up event listeners for data channel events like open, message, error, and close. This is essential for real-time data exchange over WebRTC.

```javascript
player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,function(event) { console.log('rtc datachannel 打开 :',event); }); player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,function(event) { console.log('rtc datachannel 消息 :',event.data); document.getElementById('msgrecv').value = event.data; }); player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,function(event) { console.log('rtc datachannel 错误 :',event); }); player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,function(event) { console.log('rtc datachannel 关闭 :',event); });
```

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

### Fetch Media List Data

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Asynchronously fetches a list of media streams from the server using the Fetch API. Returns the JSON response.

```javascript
async function getData(url) { const response = await fetch(url, { method: 'GET' }); const data = await response.json(); //console.log(data); return data; }
```

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

### Populate Stream List

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Clears the existing stream list and then populates it with streams from the provided JSON data. Streams are grouped by application and displayed as clickable list items.

```javascript
function fillStreamList(json) { clearStreamList(); if (json.code != 0 || !json.data) { return; } let ss = {}; for (let o of json.data) { if (ss[o.app]) { ss[o.app].add(o.stream); } else { let set = new Set(); set.add(o.stream); ss[o.app] = set; } } for (let o in ss) { let app = o; for (let s of ss[o]) { if (s) { //console.log(app, s); let content = document.getElementById("olstreamlist"); let child = `<li app="${app}" stream="${s}" onmouseover="this.style.color='blue';" onclick="on_click_to_play('${app}', '${s}')">${app}/${s}</li>`; content.insertAdjacentHTML("beforeend", child); } } } }
```

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

### Switch Audio Device

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Switches between microphone and other available audio input devices based on the 'switchDevice' checkbox. Requires an active player instance and the selected audio device ID.

```javascript
function switchAudio(){ if(player){ // first arg bool false mean switch to screen audio , second ignore // true mean switch to mic , second is mic deviceid let ela = document.getElementById("audioDevice"); let adevid = JSON.parse(ela.options[ela.selectedIndex].value).deviceId player.switcAudio(document.getElementById('switchDevice').checked,adevid).then(()=>{ // switch audio successful }).catch(e=>{ // switch audio failed console.error(e); }) } }
```

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

### Switch Video Device

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Switches between front and back cameras or other available video input devices based on the 'switchDevice' checkbox. Requires an active player instance and the selected video device ID.

```javascript
function switchVideo(){ if(player){ // first arg bool false mean switch to screen video , second ignore // true mean switch to video , second is camera deviceid let elv = document.getElementById("videoDevice"); let vdevid = JSON.parse(elv.options[elv.selectedIndex].value).deviceId player.switchVideo(document.getElementById('switchDevice').checked,vdevid).then(()=>{ // switch video successful }).catch(e=>{ // switch video failed console.error(e); }) } }
```

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

### Stop WebRTC Playback and Clean Up

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Closes the current player instance, releases media streams from video elements, and resets the player to null. Ensures proper cleanup of resources.

```javascript
function stop() { if(player) { player.close(); player = null; var remote = document.getElementById('video'); if(remote) { remote.srcObject = null; remote.load(); } var local = document.getElementById('selfVideo'); local.srcObject = null; local.load(); } }
```

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

### Send Message via Data Channel

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Sends a message from the 'msgsend' input field through the WebRTC data channel. Requires an active player instance.

```javascript
function send(){ if(player){ //send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send player.sendMsg(document.getElementById('msgsend').value); } }
```

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

### Close WebRTC Data Channel

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Explicitly closes the WebRTC data channel if a player instance exists. This can be used to terminate data communication.

```javascript
function close(){ if(player){ player.closeDataChannel(); } }
```

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

### Clear Stream List

Source: https://github.com/zlmediakit/zlmrtcclient.js/blob/dev/demo/index.html

Removes all child nodes from the 'olstreamlist' element, effectively clearing the displayed list of available streams.

```javascript
function clearStreamList() { let content = document.getElementById("olstreamlist"); while (content.hasChildNodes()) { content.removeChild(content.firstChild); } }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.