Hi, we have problem in fetching playback videos from mobile server.
The problem is whenever i try to get playback i only get the first frame, the others will be with dataSize 0 and wrong date time (the first frame time only). here is our code:
(async function () {
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
let vc = null;
let firstFrameReceived = false;
let fromMs = 0;
let toMs = 0;
function parseLocalDateTime(value) {
return new Date(value).getTime();
}
let connectionId = null;
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");
XPMobileSDKSettings.supportsCHAP = !1;
XPMobileSDK.features = {
SupportTimeBetweenFrames: !1,
};
const connectionDetails = await XPMobileSDK.connect(urlInput.value);
await sleep(500);
connectionId = connectionDetails.response.outputParameters.ConnectionId;
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;
fromMs = parseLocalDateTime(fromInput.value);
toMs = parseLocalDateTime(toInput.value);
if (!camId || isNaN(fromMs) || isNaN(toMs) || fromMs >= toMs) {
return alert("Select a camera and valid From/To times");
}
startStream(camId, ctx);
});
});
function startStream(cameraId, ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const params = {
ConnectionId: connectionId,
CameraId: cameraId,
DestWidth: ctx.canvas.width,
DestHeight: ctx.canvas.height,
SignalType: "Playback",
MethodType: "Push",
Fps: 24,
ComprLevel: 90,
KeyFramesOnly: "No",
RequestSize: "Yes",
SeekType: "Time",
StreamType: "Transcoded",
Time: `${fromMs}`,
};
const token = XPMobileSDK.RequestStream(params, onStreamReady, (err) =>
console.error("Stream error", err)
);
const obs = {
videoConnectionReceivedFrame(frame) {
console.log(`${frame.timestamp} -> ${frame.dataSize}`);
if (frame.dataSize <= 0) return;
if (!firstFrameReceived) {
firstFrameReceived = true;
if (frame.timestamp.getTime() >= toMs) {
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();
console.log("Playback complete");
}
};
img.src = url;
},
};
function onStreamReady(videoConnection) {
vc = videoConnection;
vc.addObserver(obs);
vc.open();
}
}
})();
I checked the time and records in smart client and everything is fine.
We also have two posts about this issue and we didn’t receive any solution for the problem.
also you can take a look here at the example and smart client playback to see the issue:
