unknown
5 years ago
10 changed files with 278 additions and 258 deletions
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
@-webkit-keyframes blink-data-v-b8166bc0{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-b8166bc0{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-b8166bc0]{-webkit-animation:blink-data-v-b8166bc0 1s infinite;animation:blink-data-v-b8166bc0 1s infinite} |
@-webkit-keyframes blink-data-v-50fea0bc{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}@keyframes blink-data-v-50fea0bc{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.blink[data-v-50fea0bc]{-webkit-animation:blink-data-v-50fea0bc 1s infinite;animation:blink-data-v-50fea0bc 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,82 +1,86 @@ |
|||||
<template> |
<template> |
||||
<Modal |
<Modal |
||||
v-bind="$attrs" |
v-bind="$attrs" |
||||
draggable |
draggable |
||||
v-on="$listeners" |
v-on="$listeners" |
||||
:title="streamPath" |
:title="streamPath" |
||||
@on-ok="onClosePreview" |
@on-ok="onClosePreview" |
||||
@on-cancel="onClosePreview" |
@on-cancel="onClosePreview" |
||||
> |
> |
||||
<video ref="webrtc" :srcObject.prop="stream" width="488" height="275" autoplay muted controls></video> |
<video ref="webrtc" :srcObject.prop="stream" width="488" height="275" autoplay muted controls></video> |
||||
<div slot="footer"> |
<div slot="footer"> |
||||
<a v-if="remoteSDP" :href="remoteSDPURL" download="remoteSDP.txt">remoteSDP</a> |
<mu-badge v-if="remoteSDP"> |
||||
<span> </span> |
<a slot="content" :href="remoteSDPURL" download="remoteSDP.txt">remoteSDP</a> |
||||
<a v-if="localSDP" :href="localSDPURL" download="localSDP.txt">localSDP</a> |
</mu-badge> |
||||
</div> |
<mu-badge v-if="localSDP"> |
||||
</Modal> |
<a slot="content" :href="localSDPURL" download="localSDP.txt">localSDP</a> |
||||
|
</mu-badge> |
||||
|
</div> |
||||
|
</Modal> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
let pc = null |
let pc = null; |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
iceConnectionState: pc && pc.iceConnectionState, |
iceConnectionState: pc && pc.iceConnectionState, |
||||
stream: null, |
stream: null, |
||||
localSDP: "", |
localSDP: "", |
||||
remoteSDP: "", |
remoteSDP: "", |
||||
remoteSDPURL: "", |
remoteSDPURL: "", |
||||
localSDPURL: "", |
localSDPURL: "", |
||||
streamPath: "" |
streamPath: "" |
||||
}; |
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
async play(streamPath) { |
||||
|
pc = new RTCPeerConnection(); |
||||
|
this.streamPath = streamPath; |
||||
|
pc.onsignalingstatechange = e => { |
||||
|
console.log(e); |
||||
|
}; |
||||
|
pc.oniceconnectionstatechange = e => { |
||||
|
this.$toast.info(pc.iceConnectionState); |
||||
|
this.iceConnectionState = pc.iceConnectionState; |
||||
|
}; |
||||
|
pc.onicecandidate = event => {}; |
||||
|
const result = await this.ajax({ |
||||
|
url: "/webrtc/preparePlay?streamPath=" + this.streamPath, |
||||
|
dataType: "json" |
||||
|
}); |
||||
|
if (result.errmsg) { |
||||
|
this.$toast.error(result.errmsg); |
||||
|
return; |
||||
|
} else { |
||||
|
this.remoteSDP = result.sdp; |
||||
|
this.remoteSDPURL = URL.createObjectURL( |
||||
|
new Blob([this.remoteSDP], { type: "text/plain" }) |
||||
|
); |
||||
|
} |
||||
|
pc.ontrack = event => { |
||||
|
console.log(event); |
||||
|
if (event.streams[0].id == "monibuca") this.stream = event.streams[0]; |
||||
|
}; |
||||
|
await pc.setRemoteDescription(new RTCSessionDescription(result)); |
||||
|
await pc.setLocalDescription(await pc.createAnswer()); |
||||
|
this.localSDP = pc.localDescription.sdp; |
||||
|
this.localSDPURL = URL.createObjectURL( |
||||
|
new Blob([this.localSDP], { type: "text/plain" }) |
||||
|
); |
||||
|
result = await this.ajax({ |
||||
|
type: "POST", |
||||
|
processData: false, |
||||
|
data: JSON.stringify(pc.localDescription), |
||||
|
url: "/webrtc/play?streamPath=" + this.streamPath, |
||||
|
dataType: "json" |
||||
|
}); |
||||
|
if (result != "success") { |
||||
|
this.$toast.error(result.errmsg || result); |
||||
|
} |
||||
}, |
}, |
||||
methods: { |
onClosePreview() { |
||||
async play(streamPath) { |
pc.close(); |
||||
pc = new RTCPeerConnection(); |
|
||||
this.streamPath = streamPath; |
|
||||
pc.onsignalingstatechange = e => { |
|
||||
console.log(e); |
|
||||
}; |
|
||||
pc.oniceconnectionstatechange = e => { |
|
||||
this.$toast.info(pc.iceConnectionState); |
|
||||
this.iceConnectionState = pc.iceConnectionState; |
|
||||
}; |
|
||||
pc.onicecandidate = event => {}; |
|
||||
const result = await this.ajax({ |
|
||||
url: "/webrtc/preparePlay?streamPath=" + this.streamPath, |
|
||||
dataType: "json" |
|
||||
}); |
|
||||
if (result.errmsg) { |
|
||||
this.$toast.error(result.errmsg); |
|
||||
return; |
|
||||
} else { |
|
||||
this.remoteSDP = result.sdp; |
|
||||
this.remoteSDPURL = URL.createObjectURL(new Blob([this.remoteSDP], { type: "text/plain" })); |
|
||||
} |
|
||||
pc.ontrack = event => { |
|
||||
console.log(event); |
|
||||
if (event.streams[0].id == "monibuca") |
|
||||
this.stream = event.streams[0]; |
|
||||
}; |
|
||||
await pc.setRemoteDescription(new RTCSessionDescription(result)); |
|
||||
await pc.setLocalDescription(await pc.createAnswer()); |
|
||||
this.localSDP = pc.localDescription.sdp; |
|
||||
this.localSDPURL = URL.createObjectURL( |
|
||||
new Blob([this.localSDP], { type: "text/plain" }) |
|
||||
); |
|
||||
result = await this.ajax({ |
|
||||
type: "POST", |
|
||||
processData: false, |
|
||||
data: JSON.stringify(pc.localDescription), |
|
||||
url: "/webrtc/play?streamPath=" + this.streamPath, |
|
||||
dataType: "json" |
|
||||
}); |
|
||||
if (result != "success") { |
|
||||
this.$toast.error(result.errmsg || result); |
|
||||
} |
|
||||
}, |
|
||||
onClosePreview() { |
|
||||
pc.close(); |
|
||||
} |
|
||||
} |
} |
||||
|
} |
||||
}; |
}; |
||||
</script> |
</script> |
||||
Loading…
Reference in new issue