init
qiushui
4 years ago
parent
0c7cb22456
commit
3d70ecb6ea
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"serverIp": "http://localhost:9007",
|
||||||
|
"webRtcIp": "192.168.8.140:8083"
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<html>
|
||||||
|
<script src="webrtcplayer.js"></script>
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<body>
|
||||||
|
<!-- <video id="camera1" class="camera" autoplay controls muted style="width:700px;"></video>
|
||||||
|
<video id="camera2" class="camera" autoplay controls muted style="width:700px;"></video> -->
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var body = document.querySelector('body');
|
||||||
|
$(function(){
|
||||||
|
let ip ;
|
||||||
|
$.getJSON("config.json", function (data){
|
||||||
|
console.log(data)
|
||||||
|
ip = data["serverIp"]
|
||||||
|
let webRtc = data["webRtcIp"]
|
||||||
|
WebRtcPlayer.setServer(webRtc);
|
||||||
|
$.ajax({
|
||||||
|
url:ip+'/api/realTime/allCameras',
|
||||||
|
type:'get',
|
||||||
|
data:{},
|
||||||
|
dataType:'json',
|
||||||
|
success:function(data){
|
||||||
|
for(camera of data.data){
|
||||||
|
var video = document.createElement('video')
|
||||||
|
video.setAttribute('id',camera.id)
|
||||||
|
video.autoplay = true
|
||||||
|
video.controls = true
|
||||||
|
video.muted = true
|
||||||
|
video.style = 'width:700px;'
|
||||||
|
video.setAttribute('class','video')
|
||||||
|
body.appendChild(video)
|
||||||
|
let player = new WebRtcPlayer(camera.id,'camera'+camera.id);
|
||||||
|
player.load('camera'+camera.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error:function(){
|
||||||
|
console.log('请求出错！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,115 @@
|
|||||||
|
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"]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
static setServer(serv) {
|
||||||
|
this.server = serv;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue