You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.8 KiB
82 lines
2.8 KiB
5 years ago
|
<template>
|
||
|
|
<Modal
|
||
|
|
v-bind="$attrs"
|
||
|
|
draggable
|
||
|
|
v-on="$listeners"
|
||
|
|
:title="streamPath"
|
||
|
|
@on-ok="onClosePreview"
|
||
|
|
@on-cancel="onClosePreview"
|
||
|
|
>
|
||
|
|
<video ref="webrtc" :srcObject.prop="stream" width="488" height="275" autoplay muted controls></video>
|
||
|
|
<div slot="footer">
|
||
|
|
<a v-if="remoteSDP" :href="remoteSDPURL" download="remoteSDP.txt">remoteSDP</a>
|
||
|
|
<span> </span>
|
||
|
|
<a v-if="localSDP" :href="localSDPURL" download="localSDP.txt">localSDP</a>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
let pc = null
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
iceConnectionState: pc && pc.iceConnectionState,
|
||
|
|
stream: null,
|
||
|
|
localSDP: "",
|
||
|
|
remoteSDP: "",
|
||
|
|
remoteSDPURL: "",
|
||
|
|
localSDPURL: "",
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onClosePreview() {
|
||
|
|
pc.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|