webRtc
qiushui
4 years ago
parent
dfa539241c
commit
e139267fcb
@ -1,121 +0,0 @@
|
||||
class WebRtcPlayer {
|
||||
static server = '127.0.0.1:8083';
|
||||
webrtc = null;
|
||||
video = null;
|
||||
server = null;
|
||||
codecLink = null;
|
||||
rsdpLink = null;
|
||||
stream = new MediaStream();
|
||||
uuid = null;
|
||||
options={
|
||||
onStatusChange:null
|
||||
};
|
||||
|
||||
constructor(id, uuid, options={}) {
|
||||
this.server = WebRtcPlayer.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"]
|
||||
}]
|
||||
});
|
||||
if(this.webrtc){
|
||||
|
||||
}else{
|
||||
console.log("no")
|
||||
}
|
||||
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'){
|
||||
|
||||
}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;
|
||||
}
|
||||
|
||||
static setServer(serv) {
|
||||
this.server = serv;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue