update zlmrtcclient.js sdk and demon (#3653)

1.can select video and audio source when push stream
2.support video and audio switch on fly for push

www/webrtc/index.html

@@ -82,8 +82,28 @@
             <button onclick="send()">发送(send by datachannel)</button>
             <button onclick="close()">关闭(close datachannel)</button>
 
+            <p>
+              <label for="videoDevice">videodevice:</label>
+              <select id="videoDevice">
+              </select>
+            </p>
 
 
+            <p>
+              <label for="audioDevice">audiodevice:</label>
+              <select id="audioDevice">
+              </select>
+            </p>
+
+            <p>
+              <label for="switchDevice">switchDevice:</label>
+              <input type="checkbox" id='switchDevice' checked="checked">
+            </p>
+            <button onclick="switchVideo()">切换视频(switch video)</button>
+            <button onclick="switchAudio()">切换音频(switch  audio)</button>
+            
+
+        <div>11111</div>
             
         </div>
     </div>
@@ -132,6 +152,24 @@
           document.getElementById("resolution").add(opt,null);
       });
 
+      ZLMRTCClient.GetAllMediaDevice().then(devices=>{
+        devices.forEach(device=>{
+          opt = document.createElement('option');
+          opt.text = device.label + ":"+device.deviceId
+          opt.value = JSON.stringify(device)
+          if(device.kind == 'videoinput'){
+            document.getElementById("videoDevice").add(opt,null)
+          }else if(device.kind == 'audioinput'){
+            document.getElementById("audioDevice").add(opt,null)
+          }else if(device.kind == 'audiooutput'){
+            // useless
+            //console.error('not support device')
+          }
+        })
+      }).catch(e=>{
+        console.error(e);
+      })
+
       function start_play(){
         let elr = document.getElementById("resolution");
         let res = elr.options[elr.selectedIndex].text.match(/\d+/g);
@@ -157,6 +195,12 @@
             window.history.pushState(null, null, newUrl);
         }
 
+        let elv = document.getElementById("videoDevice");
+        let ela = document.getElementById("audioDevice");
+
+        let vdevid = JSON.parse(elv.options[elv.selectedIndex].value).deviceId
+        let adevid = JSON.parse(ela.options[ela.selectedIndex].value).deviceId
+
         player = new ZLMRTCClient.Endpoint(
                 {
                     element: document.getElementById('video'),// video 标签
@@ -169,6 +213,8 @@
                     recvOnly:recvOnly,
                     resolution:{w,h},
                     usedatachannel:document.getElementById('datachannel').checked,
+                    videoId:vdevid, // 不填选择默认的
+                    audioId:adevid, // 不填选择默认的
                 }
             );
     
@@ -344,6 +390,39 @@
        // get_media_list();
       }, 5000);
 
+      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);
+          })
+        }
+
+      }
+
+      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);
+          })
+        }
+      }
+
     </script>
     
   </body>