zlm rtc js sdk update for data channel

www/ZLMRTCClient.js

@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) {
 	  WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS',
 	  WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM',
 	  WEBRTC_ON_CONNECTION_STATE_CHANGE: 'WEBRTC_ON_CONNECTION_STATE_CHANGE',
+	  WEBRTC_ON_DATA_CHANNEL_OPEN: 'WEBRTC_ON_DATA_CHANNEL_OPEN',
+	  WEBRTC_ON_DATA_CHANNEL_CLOSE: 'WEBRTC_ON_DATA_CHANNEL_CLOSE',
+	  WEBRTC_ON_DATA_CHANNEL_ERR: 'WEBRTC_ON_DATA_CHANNEL_ERR',
+	  WEBRTC_ON_DATA_CHANNEL_MSG: 'WEBRTC_ON_DATA_CHANNEL_MSG',
 	  CAPTURE_STREAM_FAILED: 'CAPTURE_STREAM_FAILED'
 	};
 
 	const VERSION = '1.0.1';
-	const BUILD_DATE = 'Sat Jan 08 2022 15:24:38 GMT+0800 (China Standard Time)';
+	const BUILD_DATE = 'Thu Mar 24 2022 17:42:57 GMT+0800 (China Standard Time)';
 
 	// Copyright (C) <2018> Intel Corporation
 	//
@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) {
 	      resolution: {
 	        w: 0,
 	        h: 0
-	      }
+	      },
+	      usedatachannel: false
 	    };
 	    this.options = Object.assign({}, defaults, options);
 
@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) {
 	      onicecandidate: this._onIceCandidate.bind(this),
 	      ontrack: this._onTrack.bind(this),
 	      onicecandidateerror: this._onIceCandidateError.bind(this),
-	      onconnectionstatechange: this._onconnectionstatechange.bind(this)
+	      onconnectionstatechange: this._onconnectionstatechange.bind(this),
+	      ondatachannelopen: this._onDataChannelOpen.bind(this),
+	      ondatachannelmsg: this._onDataChannelMsg.bind(this),
+	      ondatachannelerr: this._onDataChannelErr.bind(this),
+	      ondatachannelclose: this._onDataChannelClose.bind(this)
 	    };
 	    this._remoteStream = null;
 	    this._localStream = null;
@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) {
 	    this.pc.onicecandidateerror = this.e.onicecandidateerror;
 	    this.pc.ontrack = this.e.ontrack;
 	    this.pc.onconnectionstatechange = this.e.onconnectionstatechange;
+	    this.datachannel = null;
+
+	    if (this.options.usedatachannel) {
+	      this.datachannel = this.pc.createDataChannel('chat');
+	      this.datachannel.onclose = this.e.ondatachannelclose;
+	      this.datachannel.onerror = this.e.ondatachannelerr;
+	      this.datachannel.onmessage = this.e.ondatachannelmsg;
+	      this.datachannel.onopen = this.e.ondatachannelopen;
+	    }
+
 	    if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive();
 	  }
 
@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) {
 	          scaleResolutionDownBy: 4
 	        }];
 	      }
-		  if (this.options.audioEnable){
-			if (stream.getAudioTracks().length > 0) {
-				this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
-			} else {
-				AudioTransceiverInit.direction = 'recvonly';
-				this.pc.addTransceiver('audio', AudioTransceiverInit);
-			}
-		}
 
-		if (this.options.videoEnable){
+	      if (this.options.audioEnable) {
-	      if (stream.getVideoTracks().length > 0) {
+	        if (stream.getAudioTracks().length > 0) {
-	        this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
+	          this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
-	      } else {
+	        } else {
-	        VideoTransceiverInit.direction = 'recvonly';
+	          AudioTransceiverInit.direction = 'recvonly';
-	        this.pc.addTransceiver('video', VideoTransceiverInit);
+	          this.pc.addTransceiver('audio', AudioTransceiverInit);
+	        }
+	      }
+
+	      if (this.options.videoEnable) {
+	        if (stream.getVideoTracks().length > 0) {
+	          this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
+	        } else {
+	          VideoTransceiverInit.direction = 'recvonly';
+	          this.pc.addTransceiver('video', VideoTransceiverInit);
+	        }
 	      }
-		}
 	      /*
 	      stream.getTracks().forEach((track,idx)=>{
 	          debug.log(this.TAG,track);
@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) {
 	    this.dispatch(Events$1.WEBRTC_ON_CONNECTION_STATE_CHANGE, this.pc.connectionState);
 	  }
 
+	  _onDataChannelOpen(event) {
+	    log(this.TAG, 'ondatachannel open:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_OPEN, event);
+	  }
+
+	  _onDataChannelMsg(event) {
+	    log(this.TAG, 'ondatachannel msg:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_MSG, event);
+	  }
+
+	  _onDataChannelErr(event) {
+	    log(this.TAG, 'ondatachannel err:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_ERR, event);
+	  }
+
+	  _onDataChannelClose(event) {
+	    log(this.TAG, 'ondatachannel close:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_CLOSE, event);
+	  }
+
+	  sendMsg(data) {
+	    if (this.datachannel != null) {
+	      this.datachannel.send(data);
+	    } else {
+	      error(this.TAG, 'data channel is null');
+	    }
+	  }
+
+	  closeDataChannel() {
+	    if (this.datachannel) {
+	      this.datachannel.close();
+	      this.datachannel = null;
+	    }
+	  }
+
 	  close() {
+	    this.closeDataChannel();
+
 	    if (this.pc) {
 	      this.pc.close();
 	      this.pc = null;

www/webrtc/ZLMRTCClient.js

@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) {
 	  WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS',
 	  WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM',
 	  WEBRTC_ON_CONNECTION_STATE_CHANGE: 'WEBRTC_ON_CONNECTION_STATE_CHANGE',
+	  WEBRTC_ON_DATA_CHANNEL_OPEN: 'WEBRTC_ON_DATA_CHANNEL_OPEN',
+	  WEBRTC_ON_DATA_CHANNEL_CLOSE: 'WEBRTC_ON_DATA_CHANNEL_CLOSE',
+	  WEBRTC_ON_DATA_CHANNEL_ERR: 'WEBRTC_ON_DATA_CHANNEL_ERR',
+	  WEBRTC_ON_DATA_CHANNEL_MSG: 'WEBRTC_ON_DATA_CHANNEL_MSG',
 	  CAPTURE_STREAM_FAILED: 'CAPTURE_STREAM_FAILED'
 	};
 
 	const VERSION = '1.0.1';
-	const BUILD_DATE = 'Sat Jan 08 2022 15:24:38 GMT+0800 (China Standard Time)';
+	const BUILD_DATE = 'Thu Mar 24 2022 17:42:57 GMT+0800 (China Standard Time)';
 
 	// Copyright (C) <2018> Intel Corporation
 	//
@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) {
 	      resolution: {
 	        w: 0,
 	        h: 0
-	      }
+	      },
+	      usedatachannel: false
 	    };
 	    this.options = Object.assign({}, defaults, options);
 
@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) {
 	      onicecandidate: this._onIceCandidate.bind(this),
 	      ontrack: this._onTrack.bind(this),
 	      onicecandidateerror: this._onIceCandidateError.bind(this),
-	      onconnectionstatechange: this._onconnectionstatechange.bind(this)
+	      onconnectionstatechange: this._onconnectionstatechange.bind(this),
+	      ondatachannelopen: this._onDataChannelOpen.bind(this),
+	      ondatachannelmsg: this._onDataChannelMsg.bind(this),
+	      ondatachannelerr: this._onDataChannelErr.bind(this),
+	      ondatachannelclose: this._onDataChannelClose.bind(this)
 	    };
 	    this._remoteStream = null;
 	    this._localStream = null;
@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) {
 	    this.pc.onicecandidateerror = this.e.onicecandidateerror;
 	    this.pc.ontrack = this.e.ontrack;
 	    this.pc.onconnectionstatechange = this.e.onconnectionstatechange;
+	    this.datachannel = null;
+
+	    if (this.options.usedatachannel) {
+	      this.datachannel = this.pc.createDataChannel('chat');
+	      this.datachannel.onclose = this.e.ondatachannelclose;
+	      this.datachannel.onerror = this.e.ondatachannelerr;
+	      this.datachannel.onmessage = this.e.ondatachannelmsg;
+	      this.datachannel.onopen = this.e.ondatachannelopen;
+	    }
+
 	    if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive();
 	  }
 
@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) {
 	          scaleResolutionDownBy: 4
 	        }];
 	      }
-		  if (this.options.audioEnable){
-			if (stream.getAudioTracks().length > 0) {
-				this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
-			} else {
-				AudioTransceiverInit.direction = 'recvonly';
-				this.pc.addTransceiver('audio', AudioTransceiverInit);
-			}
-		}
 
-		if (this.options.videoEnable){
+	      if (this.options.audioEnable) {
-	      if (stream.getVideoTracks().length > 0) {
+	        if (stream.getAudioTracks().length > 0) {
-	        this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
+	          this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
-	      } else {
+	        } else {
-	        VideoTransceiverInit.direction = 'recvonly';
+	          AudioTransceiverInit.direction = 'recvonly';
-	        this.pc.addTransceiver('video', VideoTransceiverInit);
+	          this.pc.addTransceiver('audio', AudioTransceiverInit);
+	        }
+	      }
+
+	      if (this.options.videoEnable) {
+	        if (stream.getVideoTracks().length > 0) {
+	          this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
+	        } else {
+	          VideoTransceiverInit.direction = 'recvonly';
+	          this.pc.addTransceiver('video', VideoTransceiverInit);
+	        }
 	      }
-		}
 	      /*
 	      stream.getTracks().forEach((track,idx)=>{
 	          debug.log(this.TAG,track);
@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) {
 	    this.dispatch(Events$1.WEBRTC_ON_CONNECTION_STATE_CHANGE, this.pc.connectionState);
 	  }
 
+	  _onDataChannelOpen(event) {
+	    log(this.TAG, 'ondatachannel open:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_OPEN, event);
+	  }
+
+	  _onDataChannelMsg(event) {
+	    log(this.TAG, 'ondatachannel msg:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_MSG, event);
+	  }
+
+	  _onDataChannelErr(event) {
+	    log(this.TAG, 'ondatachannel err:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_ERR, event);
+	  }
+
+	  _onDataChannelClose(event) {
+	    log(this.TAG, 'ondatachannel close:', event);
+	    this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_CLOSE, event);
+	  }
+
+	  sendMsg(data) {
+	    if (this.datachannel != null) {
+	      this.datachannel.send(data);
+	    } else {
+	      error(this.TAG, 'data channel is null');
+	    }
+	  }
+
+	  closeDataChannel() {
+	    if (this.datachannel) {
+	      this.datachannel.close();
+	      this.datachannel = null;
+	    }
+	  }
+
 	  close() {
+	    this.closeDataChannel();
+
 	    if (this.pc) {
 	      this.pc.close();
 	      this.pc = null;

www/webrtc/index.html

@@ -51,16 +51,27 @@
               <input type="radio" name="methond" value="push" >push
               <input type="radio" name="methond" value="play" checked = true>play
             </p>
-
             <p>
               <label for="resilution">resolution:</label>
               <select id="resilution">
-
               </select>
             </p>
+            <p>
+              <label for="datachannel">datachannel:</label>
+              <input id='datachannel' name="datachannel" type="checkbox" value="0">
+            </p>
+            <button onclick="start()">开始(start)</button>
+            <button onclick="stop()">停止(stop)</button>
 
-            <button onclick="start()">开始</button>
+            <p>
-            <button onclick="stop()">停止</button>
+              <label for="msg">msg:</label>
+              <input type="text" id='msg' value="hello word !">
+            </p>
+            <button onclick="send()">发送(send by datachannel)</button>
+            <button onclick="close()">关闭(close datachannel)</button>
+            
+
+           
             
         </div>
     </div>
@@ -76,7 +87,7 @@
       
 
       if(!ishttps && !isLocal){
-        alert('本demo需要在https的网站访问 (this demo must access in site of https)')
+        alert('本demo需要在https的网站访问 ,如果你要推流的话(this demo must access in site of https if you want push stream)')
       }
 
       if(isLocal){
@@ -125,7 +136,8 @@
                     audioEnable:document.getElementById('audioEnable').checked,
                     videoEnable:document.getElementById('videoEnable').checked,
                     recvOnly:recvOnly,
-                    resolution:{w:w,h:h}
+                    resolution:{w:w,h:h},
+                    usedatachannel:document.getElementById('datachannel').checked,
                 }
             );
     
@@ -164,6 +176,24 @@
             {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
               console.log('当前状态==>',state)
             });
+
+            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)
+            });
+            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)
+            });
       }
 
       function start()
@@ -192,12 +222,31 @@
           {
             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();
           }
       }
 
+      function send(){
+        if(player){
+          //send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
+          player.sendMsg(document.getElementById('msg').value)
+        }
+      }
+
+      function close(){
+        if(player){
+          player.closeDataChannel()
+        }
+      }
+
     </script>
     
   </body>
@@ -206,4 +255,4 @@
     
   </script>
 
-</html>
+</html>