From 1fe9f918a907193e84e16de1c4c2d51c2f25c5ec Mon Sep 17 00:00:00 2001
From: liusuyi <1951119284@qq.com>
Date: 星期四, 11 七月 2024 22:45:52 +0800
Subject: [PATCH] 测试页兼容流媒体1.8.4
---
ard-work/src/main/resources/templates/test.html | 81 ++++++++++++++--------------------------
1 files changed, 28 insertions(+), 53 deletions(-)
diff --git a/ard-work/src/main/resources/templates/test.html b/ard-work/src/main/resources/templates/test.html
index e805ee4..4c4dc19 100644
--- a/ard-work/src/main/resources/templates/test.html
+++ b/ard-work/src/main/resources/templates/test.html
@@ -10,6 +10,7 @@
.top-buffer {
margin-top: 10px;
}
+
.container {
border: 2px solid #1b6d85;
padding: 15px;
@@ -142,7 +143,7 @@
</div>
</div>
<script th:inline="javascript">
- var cameraId, chanNo,opt, optOpen, optClose, token;
+ var cameraId, chanNo, opt, optOpen, optClose, token;
window.onload = function () {
console.log(RTCRtpReceiver.getCapabilities('video').codecs)
opt = {"username": "admin", "password": "admin123"};
@@ -878,7 +879,7 @@
function commondMethod(url, code, enable) {
cameraId = $('#selectDev option:selected').val();
chanNo = $('#selectChn option:selected').val();
- opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 4, "enable": enable, "code": code};
+ opt = {"cameraId": cameraId, "chanNo": chanNo, "speed": 8, "enable": enable, "code": code};
$.ajax({
headers: {
'Accept': 'application/json',
@@ -909,7 +910,7 @@
type: "get",
dataType: "json",
success: function (data) {
- realView(data.data.webrtcUrl + "/", e.target.id);
+ realView(data.data.webrtcUrl + "/");
}
})
});
@@ -919,7 +920,6 @@
const retryPause = 2000;
const video = document.getElementById('video');
- const message = document.getElementById('message');
let nonAdvertisedCodecs = [];
let pc = null;
@@ -928,15 +928,7 @@
let offerData = '';
let queuedCandidates = [];
let defaultControls = false;
-
- const setMessage = (str) => {
- if (str !== '') {
- video.controls = false;
- } else {
- video.controls = defaultControls;
- }
- message.innerText = str;
- };
+ let whepUrl = '';
const unquoteCredential = (v) => (
JSON.parse(`"${v}"`)
@@ -1133,13 +1125,14 @@
};
const loadStream = () => {
+ console.log('loadStream');
requestICEServers();
};
const supportsNonAdvertisedCodec = (codec, fmtp) => (
new Promise((resolve, reject) => {
- const pc = new RTCPeerConnection({ iceServers: [] });
- pc.addTransceiver('audio', { direction: 'recvonly' });
+ const pc = new RTCPeerConnection({iceServers: []});
+ pc.addTransceiver('audio', {direction: 'recvonly'});
pc.createOffer()
.then((offer) => {
if (offer.sdp.includes(' ' + codec)) { // codec is advertised, there's no need to add it manually
@@ -1202,7 +1195,6 @@
const onError = (err) => {
if (restartTimeout === null) {
- setMessage(err + ', retrying in some seconds');
if (pc !== null) {
pc.close();
@@ -1214,19 +1206,19 @@
loadStream();
}, retryPause);
- if (sessionUrl) {
- fetch(sessionUrl, {
+ if (this.sessionUrl) {
+ fetch(this.sessionUrl, {
method: 'DELETE',
});
}
- sessionUrl = '';
+ this.sessionUrl = '';
queuedCandidates = [];
}
};
const sendLocalCandidates = (candidates) => {
- fetch(sessionUrl + window.location.search, {
+ fetch(new URL('whep', this.whepUrl), {
method: 'PATCH',
headers: {
'Content-Type': 'application/trickle-ice-sdpfrag',
@@ -1255,10 +1247,10 @@
}
if (evt.candidate !== null) {
- if (sessionUrl === '') {
+ if (this.sessionUrl === '') {
queuedCandidates.push(evt.candidate);
} else {
- sendLocalCandidates([evt.candidate])
+ //sendLocalCandidates([evt.candidate])
}
}
};
@@ -1267,7 +1259,6 @@
if (restartTimeout !== null) {
return;
}
-
pc.setRemoteDescription(new RTCSessionDescription({
type: 'answer',
sdp,
@@ -1284,7 +1275,7 @@
};
const sendOffer = (offer) => {
- fetch(new URL('whep', window.location.href) + window.location.search, {
+ fetch(new URL('whep', this.whepUrl), {
method: 'POST',
headers: {
'Content-Type': 'application/sdp',
@@ -1298,13 +1289,14 @@
case 404:
throw new Error('stream not found');
case 400:
- return res.json().then((e) => { throw new Error(e.error); });
+ return res.json().then((e) => {
+ throw new Error(e.error);
+ });
default:
throw new Error(`bad status code ${res.status}`);
}
- sessionUrl = new URL(res.headers.get('location'), window.location.href).toString();
-
+ this.sessionUrl = new URL(res.headers.get('location'), new URL(this.whepUrl).origin).toString();
return res.text()
.then((sdp) => onRemoteAnswer(sdp));
})
@@ -1342,12 +1334,12 @@
};
const onTrack = (evt) => {
- setMessage('');
+
video.srcObject = evt.streams[0];
};
const requestICEServers = () => {
- fetch(new URL('whep', window.location.href) + window.location.search, {
+ fetch(new URL('whep', this.whepUrl), {
method: 'OPTIONS',
})
.then((res) => {
@@ -1358,8 +1350,8 @@
});
const direction = 'sendrecv';
- pc.addTransceiver('video', { direction });
- pc.addTransceiver('audio', { direction });
+ pc.addTransceiver('video', {direction});
+ pc.addTransceiver('audio', {direction});
pc.onicecandidate = (evt) => onLocalCandidate(evt);
pc.oniceconnectionstatechange = () => onConnectionState();
@@ -1372,31 +1364,14 @@
});
};
- const parseBoolString = (str, defaultVal) => {
- str = (str || '');
-
- if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
- return true;
- }
- if (['0', 'no', 'false'].includes(str.toLowerCase())) {
- return false;
- }
- return defaultVal;
+ const init = () => {
+ getNonAdvertisedCodecs();
};
- const loadAttributesFromQuery = () => {
- const params = new URLSearchParams(window.location.search);
- video.controls = parseBoolString(params.get('controls'), true);
- video.muted = parseBoolString(params.get('muted'), true);
- video.autoplay = parseBoolString(params.get('autoplay'), true);
- video.playsInline = parseBoolString(params.get('playsinline'), true);
- defaultControls = video.controls;
- };
-
-
- function realView(whepUrl, videoId) {
+ function realView(whepUrl) {
console.log(whepUrl)
- webrtcClient = new WHEPClient(whepUrl, videoId);
+ this.whepUrl = whepUrl
+ init();
}
</script>
</body>
--
Gitblit v1.9.3