langhuihui
5 years ago
9 changed files with 496 additions and 456 deletions
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
@-webkit-keyframes blink-data-v-3d66f6b2{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-3d66f6b2{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-3d66f6b2]{-webkit-animation:blink-data-v-3d66f6b2 1s infinite;animation:blink-data-v-3d66f6b2 1s infinite} |
@-webkit-keyframes blink-data-v-03ea1df8{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-03ea1df8{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-03ea1df8]{-webkit-animation:blink-data-v-03ea1df8 1s infinite;animation:blink-data-v-03ea1df8 1s infinite} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,140 +1,150 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<pre v-if="$parent.titleTabActive == 1">{{localSDP}}</pre> |
<pre v-if="$parent.titleTabActive == 1">{{localSDP}}</pre> |
||||
<pre v-else-if="$parent.titleTabActive == 2">{{remoteSDP}}</pre> |
<pre v-else-if="$parent.titleTabActive == 2">{{remoteSDP}}</pre> |
||||
<div v-else> |
<div v-else> |
||||
<mu-text-field v-model="streamPath" label="streamPath"></mu-text-field> |
<mu-text-field v-model="streamPath" label="streamPath"></mu-text-field> |
||||
<span class="blink" v-if="!localSDP || ask">Connecting</span> |
<span class="blink" v-if="!localSDP || ask">Connecting</span> |
||||
<template v-else-if="iceConnectionState!='connected'"> |
<template> |
||||
<m-button @click="startSession('publish')">Publish</m-button> |
<m-button @click="startSession('publish')">Publish</m-button> |
||||
<m-button @click="startSession('play')">Play</m-button> |
<m-button @click="startSession('play')">Play</m-button> |
||||
</template> |
</template> |
||||
<m-button @click="stopSession" v-else-if="iceConnectionState=='connected'">Stop</m-button> |
<m-button @click="stopSession">Stop</m-button> |
||||
<br /> |
<br /> |
||||
<video ref="video1" :srcObject.prop="stream" width="640" height="480" autoplay muted></video> |
<video ref="video1" :srcObject.prop="stream" width="640" height="480" autoplay muted></video> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
const config = { |
const config = { |
||||
iceServers:[ |
iceServers: [ |
||||
// { |
// { |
||||
// urls:[ |
// urls:[ |
||||
// "stun:stun.ekiga.net", |
// "stun:stun.ekiga.net", |
||||
// "stun:stun.ideasip.com", |
// "stun:stun.ideasip.com", |
||||
// "stun:stun.schlund.de", |
// "stun:stun.schlund.de", |
||||
// "stun:stun.stunprotocol.org:3478", |
// "stun:stun.stunprotocol.org:3478", |
||||
// "stun:stun.voiparound.com", |
// "stun:stun.voiparound.com", |
||||
// "stun:stun.voipbuster.com", |
// "stun:stun.voipbuster.com", |
||||
// "stun:stun.voipstunt.com", |
// "stun:stun.voipstunt.com", |
||||
// "stun:stun.voxgratia.org", |
// "stun:stun.voxgratia.org", |
||||
// "stun:stun.services.mozilla.com", |
// "stun:stun.services.mozilla.com", |
||||
// "stun:stun.xten.com", |
// "stun:stun.xten.com", |
||||
// "stun:stun.softjoys.com", |
// "stun:stun.softjoys.com", |
||||
// "stun:stunserver.org", |
// "stun:stunserver.org", |
||||
// "stun:stun.schlund.de", |
// "stun:stun.schlund.de", |
||||
// "stun:stun.rixtelecom.se", |
// "stun:stun.rixtelecom.se", |
||||
// "stun:stun.iptel.org", |
// "stun:stun.iptel.org", |
||||
// "stun:stun.ideasip.com", |
// "stun:stun.ideasip.com", |
||||
// "stun:stun.fwdnet.net", |
// "stun:stun.fwdnet.net", |
||||
// "stun:stun.ekiga.net", |
// "stun:stun.ekiga.net", |
||||
// "stun:stun01.sipphone.com", |
// "stun:stun01.sipphone.com", |
||||
// ] |
// ] |
||||
// } |
// } |
||||
] |
] |
||||
} |
}; |
||||
let pc = new RTCPeerConnection(config); |
let pc = new RTCPeerConnection(config); |
||||
var stream = null |
var stream = null; |
||||
var streamPath = "live/rtc" |
var streamPath = "live/rtc"; |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
localSDP: pc&&pc.localDescription&&pc.localDescription.sdp, |
localSDP: pc && pc.localDescription && pc.localDescription.sdp, |
||||
remoteSDP: pc&&pc.remoteDescription&&pc.remoteDescription.sdp, |
remoteSDP: pc && pc.remoteDescription && pc.remoteDescription.sdp, |
||||
streamPath, |
streamPath, |
||||
iceConnectionState:pc&&pc.iceConnectionState, |
iceConnectionState: pc && pc.iceConnectionState, |
||||
stream, |
stream, |
||||
type:"", |
type: "", |
||||
ask:false |
ask: false |
||||
}; |
}; |
||||
}, |
|
||||
methods: { |
|
||||
startSession(type) { |
|
||||
this.type = type |
|
||||
this.ask = true |
|
||||
this.ajax({type: 'POST',processData:false,data: JSON.stringify(pc.localDescription),url:"/webrtc/"+type+"?streamPath="+this.streamPath,dataType:"json"}).then(result => { |
|
||||
this.ask = false |
|
||||
if (result.errmsg){ |
|
||||
this.$toast.error(result.errmsg) |
|
||||
}else{ |
|
||||
streamPath = this.streamPath |
|
||||
this.remoteSDP = result.sdp; |
|
||||
this.$parent.titleTabs = ["摄像头", "localSDP","remoteSDP"]; |
|
||||
pc.setRemoteDescription(new RTCSessionDescription(result)); |
|
||||
} |
|
||||
}); |
|
||||
}, |
}, |
||||
stopSession(){ |
methods: { |
||||
pc.close() |
async startSession(type) { |
||||
pc = new RTCPeerConnection(config) |
this.type = type; |
||||
this.remoteSDP = "" |
this.ask = true; |
||||
this.localSDP = "" |
const result = await this.ajax({ |
||||
this.connectICE().catch(err=> this.$toast.error(err.message)) |
type: "POST", |
||||
}, |
processData: false, |
||||
async connectICE(){ |
data: JSON.stringify(pc.localDescription), |
||||
pc.addStream(stream); |
url: "/webrtc/" + type + "?streamPath=" + this.streamPath, |
||||
await pc.setLocalDescription(await pc.createOffer()) |
dataType: "json" |
||||
pc.oniceconnectionstatechange = e => { |
}); |
||||
this.$toast.info(pc.iceConnectionState) |
this.ask = false; |
||||
this.iceConnectionState = pc.iceConnectionState |
if (result.errmsg) { |
||||
}; |
this.$toast.error(result.errmsg); |
||||
pc.onicecandidate = event => { |
} else { |
||||
if (event.candidate === null) { |
streamPath = this.streamPath; |
||||
this.localSDP = pc.localDescription.sdp; |
this.remoteSDP = result.sdp; |
||||
this.$parent.titleTabs = ["摄像头", "localSDP"]; |
this.$parent.titleTabs = ["摄像头", "localSDP", "remoteSDP"]; |
||||
|
pc.setRemoteDescription(new RTCSessionDescription(result)); |
||||
|
} |
||||
|
if (type == "publish") { |
||||
|
pc.addStream(stream); |
||||
|
this.localSDP = ( |
||||
|
await pc.setLocalDescription(await pc.createOffer()) |
||||
|
).sdp; |
||||
|
} else { |
||||
|
pc.ontrack = event => { |
||||
|
if(event.streams[0].id=="monibuca") |
||||
|
this.stream = stream = event.streams[0]; |
||||
|
}; |
||||
|
} |
||||
|
}, |
||||
|
stopSession() { |
||||
|
pc.close(); |
||||
|
pc = new RTCPeerConnection(config); |
||||
|
this.remoteSDP = ""; |
||||
|
this.localSDP = ""; |
||||
|
this.type = ""; |
||||
|
// this.connectICE().catch(err => this.$toast.error(err.message)); |
||||
} |
} |
||||
}; |
}, |
||||
pc.ontrack = event=>{ |
async mounted() { |
||||
if(this.type=="play" && event.streams[0]){ |
pc.onsignalingstatechange = e => { |
||||
this.stream = stream = event.streams[0] |
console.log(e); |
||||
|
}; |
||||
|
pc.oniceconnectionstatechange = e => { |
||||
|
this.$toast.info(pc.iceConnectionState); |
||||
|
this.iceConnectionState = pc.iceConnectionState; |
||||
|
}; |
||||
|
pc.onicecandidate = event => { |
||||
|
if (event.candidate === null) { |
||||
|
this.$parent.titleTabs = ["摄像头", "localSDP"]; |
||||
|
} |
||||
|
}; |
||||
|
if (this.localSDP) { |
||||
|
let tabs = ["摄像头"]; |
||||
|
if (this.localSDP) tabs.push("localSDP"); |
||||
|
if (this.remoteSDP) tabs.push("remoteSDP"); |
||||
|
this.$parent.titleTabs = tabs; |
||||
|
} else { |
||||
|
try { |
||||
|
if (!this.stream) |
||||
|
this.stream = stream = await navigator.mediaDevices.getUserMedia( |
||||
|
{ video: true, audio: true } |
||||
|
); |
||||
|
} catch (err) { |
||||
|
this.$toast.error(err.message); |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
} |
} |
||||
}, |
|
||||
async mounted() { |
|
||||
if (this.localSDP){ |
|
||||
let tabs = ["摄像头"] |
|
||||
if(this.localSDP)tabs.push("localSDP") |
|
||||
if(this.remoteSDP)tabs.push("remoteSDP") |
|
||||
this.$parent.titleTabs = tabs; |
|
||||
} else { |
|
||||
try{ |
|
||||
if(!this.stream) |
|
||||
this.stream = stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) |
|
||||
await this.connectICE() |
|
||||
}catch(err){ |
|
||||
this.$toast.error(err.message) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
@keyframes blink { |
@keyframes blink { |
||||
0% { |
0% { |
||||
opacity: 0.2; |
opacity: 0.2; |
||||
} |
} |
||||
50% { |
50% { |
||||
opacity: 1; |
opacity: 1; |
||||
} |
} |
||||
100% { |
100% { |
||||
opacity: 0.2; |
opacity: 0.2; |
||||
} |
} |
||||
} |
} |
||||
.blink { |
.blink { |
||||
animation: blink 1s infinite; |
animation: blink 1s infinite; |
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
Loading…
Reference in new issue