amass/ZLMediaKit
1
0
Fork 0
mirror of https://github.com/ZLMediaKit/ZLMediaKit.git synced 2024-11-25 20:27:34 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

zlm rtc js sdk update for data channel

Browse Source
This commit is contained in:
xgj 2022-03-24 18:20:10 +08:00
parent a16b6cbc59
commit 24c6f28ef8
5 changed files with 208 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
www/ZLMRTCClient.js
View File

@ -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 (stream.getVideoTracks().length > 0) {
this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
} else {
VideoTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('video', VideoTransceiverInit);
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 (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;

2
www/ZLMRTCClient.js.map
View File

File diff suppressed because one or more lines are too long

93
www/webrtc/ZLMRTCClient.js
View File

@ -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 (stream.getVideoTracks().length > 0) {
this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
} else {
VideoTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('video', VideoTransceiverInit);
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 (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;

2
www/webrtc/ZLMRTCClient.js.map
View File

File diff suppressed because one or more lines are too long

61
www/webrtc/index.html
View File

@ -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>
<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>
@ -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>