You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.8 KiB
JavaScript
111 lines
2.8 KiB
JavaScript
class WebRtcPlayer {
|
|
webrtc = null;
|
|
video = null;
|
|
server = null;
|
|
codecLink = null;
|
|
rsdpLink = null;
|
|
stream = new MediaStream();
|
|
uuid = null;
|
|
options={
|
|
onStatusChange:null
|
|
};
|
|
|
|
constructor(server,id, uuid, options={}) {
|
|
this.server = server;
|
|
this.video = document.getElementById(id);
|
|
this.uuid = uuid;
|
|
Object.assign(this.options, options);
|
|
this.createLinks();
|
|
this.play();
|
|
}
|
|
|
|
createLinks() {
|
|
this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
|
|
this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
|
|
}
|
|
|
|
play() {
|
|
this.webrtc = new RTCPeerConnection({
|
|
iceServers: [{
|
|
urls: ["stun:stun.l.google.com:19302"]
|
|
}]
|
|
});
|
|
this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
|
|
this.webrtc.ontrack = this.onTrack.bind(this);
|
|
fetch(this.codecLink)
|
|
.then((response) => {
|
|
response.json().then((data) => {
|
|
data.forEach((item, i) => {
|
|
this.webrtc.addTransceiver(item.Type, {
|
|
'direction': 'sendrecv'
|
|
});
|
|
});
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
|
|
this.webrtc.onconnectionstatechange = () => {
|
|
if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
|
|
console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
|
|
}else{
|
|
console.log(this.webrtc.connectionState)
|
|
this.load(this.uuid);
|
|
}
|
|
}
|
|
}
|
|
|
|
async handleNegotiationNeeded() {
|
|
let offer = await this.webrtc.createOffer();
|
|
await this.webrtc.setLocalDescription(offer);
|
|
let formData = new FormData();
|
|
formData.append('suuid', this.uuid);
|
|
formData.append('data', btoa(this.webrtc.localDescription.sdp));
|
|
fetch(this.rsdpLink, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then((response) => {
|
|
response.text().then((data) => {
|
|
this.webrtc.setRemoteDescription(new RTCSessionDescription({
|
|
type: 'answer',
|
|
sdp: atob(data)
|
|
}))
|
|
});
|
|
})
|
|
.catch((err) => {})
|
|
}
|
|
|
|
onTrack(event) {
|
|
this.stream.addTrack(event.track);
|
|
this.video.srcObject = this.stream;
|
|
this.video.play();
|
|
}
|
|
|
|
load(uuid) {
|
|
this.destroy();
|
|
this.uuid = uuid;
|
|
this.createLinks();
|
|
this.play();
|
|
}
|
|
|
|
destroy() {
|
|
|
|
this.webrtc.close();
|
|
this.webrtc = null;
|
|
this.video.srcObject = null;
|
|
this.stream = new MediaStream();
|
|
}
|
|
|
|
getImageUrl() {
|
|
let canvas = document.createElement("canvas");
|
|
canvas.width = this.video.videoWidth;
|
|
canvas.height = this.video.videoHeight;
|
|
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
let dataURL = canvas.toDataURL();
|
|
canvas.remove();
|
|
return dataURL;
|
|
}
|
|
}
|