Skip to content

Z
ZLMediaKit
Commit 24c6f28e by xgj
Options

zlm rtc js sdk update for data channel

parent a16b6cbc
正在显示 包含 208 行增加 和 46 行删除
www/ZLMRTCClient.js
...@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) { ...@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) {
WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS', WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS',
WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM', WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM',
WEBRTC_ON_CONNECTION_STATE_CHANGE: 'WEBRTC_ON_CONNECTION_STATE_CHANGE', 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' CAPTURE_STREAM_FAILED: 'CAPTURE_STREAM_FAILED'
}; };
const VERSION = '1.0.1'; 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 // Copyright (C) <2018> Intel Corporation
// //
...@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) { ...@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) {
resolution: { resolution: {
w: 0, w: 0,
h: 0 h: 0
} },
usedatachannel: false
}; };
this.options = Object.assign({}, defaults, options); this.options = Object.assign({}, defaults, options);
...@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) { ...@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) {
onicecandidate: this._onIceCandidate.bind(this), onicecandidate: this._onIceCandidate.bind(this),
ontrack: this._onTrack.bind(this), ontrack: this._onTrack.bind(this),
onicecandidateerror: this._onIceCandidateError.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._remoteStream = null;
this._localStream = null; this._localStream = null;
...@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) { ...@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) {
this.pc.onicecandidateerror = this.e.onicecandidateerror; this.pc.onicecandidateerror = this.e.onicecandidateerror;
this.pc.ontrack = this.e.ontrack; this.pc.ontrack = this.e.ontrack;
this.pc.onconnectionstatechange = this.e.onconnectionstatechange; 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(); if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive();
} }
...@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) { ...@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) {
scaleResolutionDownBy: 4 scaleResolutionDownBy: 4
}]; }];
} }
if (this.options.audioEnable){
if (stream.getAudioTracks().length > 0) { if (this.options.audioEnable) {
this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit); if (stream.getAudioTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
AudioTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('audio', AudioTransceiverInit); AudioTransceiverInit.direction = 'recvonly';
} this.pc.addTransceiver('audio', AudioTransceiverInit);
} }
}
if (this.options.videoEnable){
if (stream.getVideoTracks().length > 0) { if (this.options.videoEnable) {
this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit); if (stream.getVideoTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
VideoTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('video', VideoTransceiverInit); VideoTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('video', VideoTransceiverInit);
}
} }
}
/* /*
stream.getTracks().forEach((track,idx)=>{ stream.getTracks().forEach((track,idx)=>{
debug.log(this.TAG,track); debug.log(this.TAG,track);
...@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) { ...@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) {
this.dispatch(Events$1.WEBRTC_ON_CONNECTION_STATE_CHANGE, this.pc.connectionState); 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() { close() {
this.closeDataChannel();
if (this.pc) { if (this.pc) {
this.pc.close(); this.pc.close();
this.pc = null; this.pc = null;
......
www/ZLMRTCClient.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
www/webrtc/ZLMRTCClient.js
...@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) { ...@@ -8,11 +8,15 @@ var ZLMRTCClient = (function (exports) {
WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS', WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS',
WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM', WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM',
WEBRTC_ON_CONNECTION_STATE_CHANGE: 'WEBRTC_ON_CONNECTION_STATE_CHANGE', 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' CAPTURE_STREAM_FAILED: 'CAPTURE_STREAM_FAILED'
}; };
const VERSION = '1.0.1'; 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 // Copyright (C) <2018> Intel Corporation
// //
...@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) { ...@@ -7294,7 +7298,8 @@ var ZLMRTCClient = (function (exports) {
resolution: { resolution: {
w: 0, w: 0,
h: 0 h: 0
} },
usedatachannel: false
}; };
this.options = Object.assign({}, defaults, options); this.options = Object.assign({}, defaults, options);
...@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) { ...@@ -7306,7 +7311,11 @@ var ZLMRTCClient = (function (exports) {
onicecandidate: this._onIceCandidate.bind(this), onicecandidate: this._onIceCandidate.bind(this),
ontrack: this._onTrack.bind(this), ontrack: this._onTrack.bind(this),
onicecandidateerror: this._onIceCandidateError.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._remoteStream = null;
this._localStream = null; this._localStream = null;
...@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) { ...@@ -7315,6 +7324,16 @@ var ZLMRTCClient = (function (exports) {
this.pc.onicecandidateerror = this.e.onicecandidateerror; this.pc.onicecandidateerror = this.e.onicecandidateerror;
this.pc.ontrack = this.e.ontrack; this.pc.ontrack = this.e.ontrack;
this.pc.onconnectionstatechange = this.e.onconnectionstatechange; 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(); if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive();
} }
...@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) { ...@@ -7418,23 +7437,24 @@ var ZLMRTCClient = (function (exports) {
scaleResolutionDownBy: 4 scaleResolutionDownBy: 4
}]; }];
} }
if (this.options.audioEnable){
if (stream.getAudioTracks().length > 0) { if (this.options.audioEnable) {
this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit); if (stream.getAudioTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
AudioTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('audio', AudioTransceiverInit); AudioTransceiverInit.direction = 'recvonly';
} this.pc.addTransceiver('audio', AudioTransceiverInit);
} }
}
if (this.options.videoEnable){
if (stream.getVideoTracks().length > 0) { if (this.options.videoEnable) {
this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit); if (stream.getVideoTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
VideoTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('video', VideoTransceiverInit); VideoTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('video', VideoTransceiverInit);
}
} }
}
/* /*
stream.getTracks().forEach((track,idx)=>{ stream.getTracks().forEach((track,idx)=>{
debug.log(this.TAG,track); debug.log(this.TAG,track);
...@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) { ...@@ -7517,7 +7537,44 @@ var ZLMRTCClient = (function (exports) {
this.dispatch(Events$1.WEBRTC_ON_CONNECTION_STATE_CHANGE, this.pc.connectionState); 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() { close() {
this.closeDataChannel();
if (this.pc) { if (this.pc) {
this.pc.close(); this.pc.close();
this.pc = null; this.pc = null;
......
www/webrtc/ZLMRTCClient.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
www/webrtc/index.html
...@@ -51,16 +51,27 @@ ...@@ -51,16 +51,27 @@
<input type="radio" name="methond" value="push" >push <input type="radio" name="methond" value="push" >push
<input type="radio" name="methond" value="play" checked = true>play <input type="radio" name="methond" value="play" checked = true>play
</p> </p>
<p> <p>
<label for="resilution">resolution:</label> <label for="resilution">resolution:</label>
<select id="resilution"> <select id="resilution">
</select> </select>
</p> </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>
<p>
<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>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
</div> </div>
</div> </div>
...@@ -76,7 +87,7 @@ ...@@ -76,7 +87,7 @@
if(!ishttps && !isLocal){ 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){ if(isLocal){
...@@ -125,7 +136,8 @@ ...@@ -125,7 +136,8 @@
audioEnable:document.getElementById('audioEnable').checked, audioEnable:document.getElementById('audioEnable').checked,
videoEnable:document.getElementById('videoEnable').checked, videoEnable:document.getElementById('videoEnable').checked,
recvOnly:recvOnly, recvOnly:recvOnly,
resolution:{w:w,h:h} resolution:{w:w,h:h},
usedatachannel:document.getElementById('datachannel').checked,
} }
); );
...@@ -164,6 +176,24 @@ ...@@ -164,6 +176,24 @@
{// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
console.log('当前状态==>',state) 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() function start()
...@@ -192,12 +222,31 @@ ...@@ -192,12 +222,31 @@
{ {
player.close(); player.close();
player = null; player = null;
var remote = document.getElementById('video');
if(remote)
{
remote.srcObject = null;
remote.load();
}
var local = document.getElementById('selfVideo'); var local = document.getElementById('selfVideo');
local.srcObject = null; local.srcObject = null;
local.load(); 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> </script>
</body> </body>
...@@ -206,4 +255,4 @@ ...@@ -206,4 +255,4 @@
</script> </script>
</html> </html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论