Hi, i was trying to get playback in web app for specific time (start, end), so i went into the samples and the docs, i use XPMobileSDK.playbackGoTo
but the problem is i only get the last frame from the last record exists and it’s ignore the time that i give it.
here is my code:
(async function () {
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
function parseLocalDateTime(value) {
const local = new Date(value);
return local.getTime() - local.getTimezoneOffset() * 60000;
}
window.LoadMobileSdk(async () => {
const urlInput = document.getElementById("serverUrl");
const userInput = document.getElementById("username");
const passInput = document.getElementById("password");
const camSelect = document.getElementById("cameraSelect");
const fromInput = document.getElementById("fromTime");
const toInput = document.getElementById("toTime");
const startBtn = document.getElementById("startBtn");
const canvas = document.getElementById("playbackCanvas");
const ctx = canvas.getContext("2d");
XPMobileSDK.connect(urlInput.value);
await sleep(1000);
XPMobileSDK.login(userInput.value, passInput.value, "Basic", {
SupportsAudioIn: "Yes",
SupportsAudioOut: "No",
});
await sleep(1000);
XPMobileSDK.getAllViews((items) => {
const cams = items[0].Items[0].Items[0].Items;
cams.forEach((cam) => {
const opt = document.createElement("option");
opt.value = cam.Id;
opt.textContent = cam.Name || cam.Id;
camSelect.appendChild(opt);
});
startBtn.disabled = false;
});
startBtn.addEventListener("click", () => {
const camId = camSelect.value;
const fromMs = parseLocalDateTime(fromInput.value);
const toMs = parseLocalDateTime(toInput.value);
if (!camId || isNaN(fromMs) || isNaN(toMs) || fromMs >= toMs) {
return alert("Select a camera and valid From/To times");
}
startPlayback(camId, fromMs, toMs, ctx);
});
});
function startPlayback(cameraId, fromMs, toMs, ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const params = {
CameraId: cameraId,
DestWidth: ctx.canvas.width,
DestHeight: ctx.canvas.height,
SignalType: "Playback",
MethodType: "Push",
Fps: 25,
ComprLevel: 71,
KeyFramesOnly: "No",
RequestSize: "Yes",
StreamType: "Transcoded",
};
const token = XPMobileSDK.RequestStream(params, onStreamReady, (err) =>
console.error("Stream error", err)
);
let vc;
const obs = {
connectionOpened() {
XPMobileSDK.playbackSeek(vc, "DbStart");
setTimeout(() => {
XPMobileSDK.playbackGoTo(
vc,
fromMs,
"TimeOrAfter",
() => {
console.log("Seeked to ≥", new Date(fromMs).toISOString());
XPMobileSDK.playbackSpeed(vc, 1.0);
},
(err) => console.error("Seek error", err)
);
}, 200);
},
videoConnectionReceivedFrame(frame) {
if (frame.dataSize <= 0) return;
const url = URL.createObjectURL(frame.blob);
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
URL.revokeObjectURL(url);
if (frame.timestamp.getTime() >= toMs) {
vc.removeObserver(obs);
vc.close();
XPMobileSDK.cancelRequest(token);
console.log("Playback complete");
}
};
img.src = url;
},
};
function onStreamReady(videoConnection) {
vc = videoConnection;
vc.addObserver(obs);
vc.open();
}
}
})();
Thanks for any help
