视频墙
qiushui
4 years ago
parent
84dd6cbf88
commit
03beee4a1d
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -0,0 +1,123 @@
|
||||
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(video1, uuid, options={}) {
|
||||
console.log("new uuid:"+uuid)
|
||||
this.server = WebRtcPlayer.server;
|
||||
//this.video = document.getElementById(id);
|
||||
this.video = video1
|
||||
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'){
|
||||
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() {
|
||||
console.log("destroy uuid:"+this.uuid)
|
||||
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;
|
||||
}
|
||||
}
|
||||
export default WebRtcPlayer;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@ -1,12 +0,0 @@
|
||||
{
|
||||
"program": {
|
||||
"portable": {
|
||||
"pnacl-translate": {
|
||||
"url": "media_player.pexe"
|
||||
},
|
||||
"pnacl-debug": {
|
||||
"url": "media_player_unstripped.bc"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
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,123 +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(video1, uuid, options={}) {
|
||||
console.log("new uuid:"+uuid)
|
||||
this.server = WebRtcPlayer.server;
|
||||
//this.video = document.getElementById(id);
|
||||
this.video = video1
|
||||
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'){
|
||||
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() {
|
||||
console.log("destroy uuid:"+this.uuid)
|
||||
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;
|
||||
}
|
||||
}
|
||||
export default WebRtcPlayer;
|
||||
@ -1,123 +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(video1, uuid, options={}) {
|
||||
console.log("new uuid:"+uuid)
|
||||
this.server = WebRtcPlayer.server;
|
||||
//this.video = document.getElementById(id);
|
||||
this.video = video1
|
||||
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'){
|
||||
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() {
|
||||
console.log("destroy uuid:"+this.uuid)
|
||||
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;
|
||||
}
|
||||
}
|
||||
export default WebRtcPlayer;
|
||||
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div id="videos">
|
||||
|
||||
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
|
||||
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
|
||||
<a-row v-for='rowIndex in row' :key='rowIndex'>
|
||||
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}">
|
||||
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted controls :style="{'height': '100%',width:'100%','object-fit':'fill'}"></video>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WebRtcPlayer from "../../../public/static/webrtcplayer"
|
||||
export default {
|
||||
name: 'top',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row : 0,
|
||||
column : 0,
|
||||
a: 0,
|
||||
clientHeight: 0,
|
||||
videoH: 0,
|
||||
isFullscreen: false,
|
||||
originHeight: 0,
|
||||
fullHeight: 0
|
||||
}
|
||||
},
|
||||
//watch: {},
|
||||
computed: {
|
||||
videoHeight() {
|
||||
return( this.clientHeight/ this.row ) + 'px';
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getWallStyle();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getAllCameras()
|
||||
});
|
||||
let isFullscreen =
|
||||
document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.fullScreen ||
|
||||
document.mozFullScreen ||
|
||||
document.webkitIsFullScreen;
|
||||
this.isFullscreen = !!isFullscreen;
|
||||
|
||||
let that = this;
|
||||
document.addEventListener("fullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("mozfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("webkitfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
document.addEventListener("msfullscreenchange", () => {
|
||||
that.isFullscreen = !that.isFullscreen;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getWallStyle(){
|
||||
this.$api.httpApi.getWallStyle({
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if(res.code == 200) {
|
||||
this.row = res.data[0];
|
||||
this.column = res.data[1];
|
||||
this.getClientHeight();
|
||||
sessionStorage.setItem('originHeight', this.clientHeight)
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getClientHeight() {
|
||||
this.clientHeight = this.$el.clientHeight-40;
|
||||
|
||||
console.log("clientHeight:"+this.clientHeight)
|
||||
},
|
||||
getAllCameras(){
|
||||
this.$api.httpApi.getAllCameras({
|
||||
data: {}
|
||||
}).then(res => {
|
||||
if(res.code == 200) {
|
||||
let cameras = res.data;
|
||||
for(let i = 1;i<=cameras.length;i++){
|
||||
let rowIndex = Math.floor((i-1) / this.column) + 1;
|
||||
if(rowIndex > this.row){
|
||||
return
|
||||
}
|
||||
let columnIndex = i % this.column;
|
||||
if(columnIndex == 0){
|
||||
columnIndex = this.column;
|
||||
}
|
||||
let idName = rowIndex + "-" + columnIndex;
|
||||
console.log("idName:"+idName);
|
||||
let video = document.getElementById(idName);
|
||||
let player = new WebRtcPlayer(video,"camera"+cameras[i].id);
|
||||
player.play('camera'+cameras[i].id);
|
||||
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
|
||||
full () {
|
||||
if(this.isFullscreen){
|
||||
this.exitfullscreen()
|
||||
}else{
|
||||
this.enterfullscreen()
|
||||
}
|
||||
|
||||
},
|
||||
//控制全屏
|
||||
enterfullscreen () { //进入全屏
|
||||
var docElm = document.getElementById('videos') // 指定容器id
|
||||
//W3C
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen()
|
||||
}
|
||||
|
||||
//FireFox
|
||||
else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen()
|
||||
}
|
||||
//Chrome等
|
||||
else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen()
|
||||
}
|
||||
//IE11
|
||||
else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.clientHeight = document.body.clientHeight;
|
||||
console.log("full:"+document.body.clientHeight)
|
||||
})
|
||||
|
||||
},
|
||||
//退出全屏
|
||||
exitfullscreen () {
|
||||
console.log("tuichu");
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let origin = sessionStorage.getItem('originHeight');
|
||||
if(origin){
|
||||
this.clientHeight = origin;
|
||||
}else{
|
||||
this.getClientHeight();
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
/* #videos > .ant-row {
|
||||
height: calc(100% / 8);
|
||||
}
|
||||
#videos > .ant-row > .ant-col{
|
||||
height: calc(100% / 8);
|
||||
} */
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue