mirror of https://bitbucket.org/ausocean/av.git
Merged in mjpeg-player-new (pull request #303)
Player demuxing MTS and playing MJPEG from file (new branch). Approved-by: Alan Noble
This commit is contained in:
Trek Hopton
commit
af6532296d
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Mjpeg Player</title>
|
||||||
|
<script type="text/javascript" src="main.js"></script>
|
||||||
|
<script type="module" src="player.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="height: 100%">
|
||||||
|
<div class="card m-auto" style="width: 40rem;">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="form-group">
|
||||||
|
<input class="form-control-file" type="file" id="fileinput" onchange="play();">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
Frame Rate: <input type="text" id="rate" class="mb-3 mx-3" value="30"> fps
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<img src="" id="viewer" style="max-width:100%; height:auto;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer id="sticky-footer" class="footer fixed-bottom py-4 bg-dark text-white-50" style="width: 100%;">
|
||||||
|
<div class="container text-center">
|
||||||
|
<small>©2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" href="https://www.ausocean.org/license">License</a>)</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
NAME
|
||||||
|
lex-mjpeg.js
|
||||||
|
|
||||||
|
AUTHOR
|
||||||
|
Trek Hopton <trek@ausocean.org>
|
||||||
|
|
||||||
|
LICENSE
|
||||||
|
This file is Copyright (C) 2019 the Australian Ocean Lab (AusOcean)
|
||||||
|
|
||||||
|
It is free software: you can redistribute it and/or modify them
|
||||||
|
under the terms of the GNU General Public License as published by the
|
||||||
|
Free Software Foundation, either version 3 of the License, or (at your
|
||||||
|
option) any later version.
|
||||||
|
|
||||||
|
It is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
|
||||||
|
for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License in gpl.txt.
|
||||||
|
If not, see http://www.gnu.org/licenses.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// MJPEGLexer lexes a byte array containing MJPEG into individual JPEGs.
|
||||||
|
class MJPEGLexer {
|
||||||
|
constructor(src) {
|
||||||
|
this.src = src;
|
||||||
|
this.off = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// read returns the next single frame.
|
||||||
|
read() {
|
||||||
|
// Check if the src can contain at least the start and end flags (4B).
|
||||||
|
if (this.off + 4 > this.src.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// Iterate through bytes until the start flag is found.
|
||||||
|
while (this.src[this.off] != 0xff || this.src[this.off + 1] != 0xd8) {
|
||||||
|
this.off++;
|
||||||
|
if (this.off + 4 > this.src.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Start after the start flag and loop until the end flag is found.
|
||||||
|
let end = this.off + 2;
|
||||||
|
while (true) {
|
||||||
|
if (end + 2 > this.src.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (this.src[end] == 0xff && this.src[end + 1] == 0xd9) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
end++;
|
||||||
|
}
|
||||||
|
// Copy the frame's bytes to a new array to return.
|
||||||
|
// Note: optimally this would return a reference but since we are in a worker thread,
|
||||||
|
// the main thread doesn't have access to the ArrayBuffer that we are working with.
|
||||||
|
let frame = this.src.slice(this.off, end + 2);
|
||||||
|
this.off = end + 2
|
||||||
|
return frame;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
/*
|
||||||
|
NAME
|
||||||
|
main.js
|
||||||
|
|
||||||
|
AUTHOR
|
||||||
|
Trek Hopton <trek@ausocean.org>
|
||||||
|
|
||||||
|
LICENSE
|
||||||
|
This file is Copyright (C) 2019 the Australian Ocean Lab (AusOcean)
|
||||||
|
|
||||||
|
It is free software: you can redistribute it and/or modify them
|
||||||
|
under the terms of the GNU General Public License as published by the
|
||||||
|
Free Software Foundation, either version 3 of the License, or (at your
|
||||||
|
option) any later version.
|
||||||
|
|
||||||
|
It is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
|
||||||
|
for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License in gpl.txt.
|
||||||
|
If not, see http://www.gnu.org/licenses.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// play will process and play the chosen target file.
|
||||||
|
function play() {
|
||||||
|
const viewer = document.getElementById('viewer');
|
||||||
|
const input = event.target.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = event => {
|
||||||
|
const player = new Worker("player.js");
|
||||||
|
|
||||||
|
let rate = document.getElementById('rate');
|
||||||
|
if (rate.value && rate.value > 0) {
|
||||||
|
player.postMessage({ msg: "setFrameRate", data: rate.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
player.onmessage = e => {
|
||||||
|
switch (e.data.msg) {
|
||||||
|
case "frame":
|
||||||
|
const blob = new Blob([new Uint8Array(e.data.data)], {
|
||||||
|
type: 'video/x-motion-jpeg'
|
||||||
|
});
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
viewer.src = url;
|
||||||
|
break;
|
||||||
|
case "log":
|
||||||
|
console.log(e.data.data);
|
||||||
|
break;
|
||||||
|
case "stop":
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error("unknown message from player");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (input.name.split('.')[1]) {
|
||||||
|
case "mjpeg":
|
||||||
|
case "mjpg":
|
||||||
|
player.postMessage({ msg: "loadMjpeg", data: event.target.result }, [event.target.result]);
|
||||||
|
break;
|
||||||
|
case "ts":
|
||||||
|
player.postMessage({ msg: "loadMtsMjpeg", data: event.target.result }, [event.target.result]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error("unknown file format");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
reader.readAsArrayBuffer(input);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
/*
|
||||||
|
NAME
|
||||||
|
player.js
|
||||||
|
|
||||||
|
AUTHOR
|
||||||
|
Trek Hopton <trek@ausocean.org>
|
||||||
|
|
||||||
|
LICENSE
|
||||||
|
This file is Copyright (C) 2019 the Australian Ocean Lab (AusOcean)
|
||||||
|
|
||||||
|
It is free software: you can redistribute it and/or modify them
|
||||||
|
under the terms of the GNU General Public License as published by the
|
||||||
|
Free Software Foundation, either version 3 of the License, or (at your
|
||||||
|
option) any later version.
|
||||||
|
|
||||||
|
It is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
|
||||||
|
for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License in gpl.txt.
|
||||||
|
If not, see http://www.gnu.org/licenses.
|
||||||
|
*/
|
||||||
|
|
||||||
|
let frameRate = 30;
|
||||||
|
|
||||||
|
onmessage = e => {
|
||||||
|
switch (e.data.msg) {
|
||||||
|
case "setFrameRate":
|
||||||
|
frameRate = e.data.data;
|
||||||
|
break;
|
||||||
|
case "loadMjpeg":
|
||||||
|
self.importScripts('./lex-mjpeg.js');
|
||||||
|
let mjpeg = new Uint8Array(e.data.data);
|
||||||
|
let lex = new MJPEGLexer(mjpeg);
|
||||||
|
player = new Player(lex);
|
||||||
|
player.setFrameRate(frameRate);
|
||||||
|
player.start();
|
||||||
|
break;
|
||||||
|
case "loadMtsMjpeg":
|
||||||
|
self.importScripts('./hlsjs/mts-demuxer.js');
|
||||||
|
let mtsMjpeg = new Uint8Array(e.data.data);
|
||||||
|
let demux = new MTSDemuxer();
|
||||||
|
let tracks = demux._getTracks();
|
||||||
|
demux.append(mtsMjpeg);
|
||||||
|
buf = new FrameBuffer(tracks.video.data);
|
||||||
|
player = new Player(buf);
|
||||||
|
player.setFrameRate(frameRate); //TODO: read frame rate from metadata.
|
||||||
|
player.start();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error("unknown message from main thread");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
class Player {
|
||||||
|
constructor(buffer) {
|
||||||
|
this.buffer = buffer;
|
||||||
|
this.frameRate = frameRate;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFrameRate(rate) {
|
||||||
|
this.frameRate = rate;
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
let frame = this.buffer.read();
|
||||||
|
if (frame != null) {
|
||||||
|
postMessage({ msg: "frame", data: frame.buffer }, [frame.buffer]);
|
||||||
|
setTimeout(() => { this.start(); }, 1000 / this.frameRate);
|
||||||
|
} else {
|
||||||
|
postMessage({ msg: "stop" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// FrameBuffer allows an array of subarrays (MJPEG frames) to be read one at a time.
|
||||||
|
class FrameBuffer {
|
||||||
|
constructor(src) {
|
||||||
|
this.src = src;
|
||||||
|
this.off = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// read returns the next single frame.
|
||||||
|
read() {
|
||||||
|
return this.src[this.off++];
|
||||||
|
}
|
||||||
|
}
|
||||||
2
go.sum
2
go.sum
|
|
@ -1,5 +1,3 @@
|
||||||
bitbucket.org/ausocean/iot v1.2.8 h1:m2UhfAbG/6RKPBzY4OJ5S7zLxTmuzyMKPNbu0qaxFIw=
|
|
||||||
bitbucket.org/ausocean/iot v1.2.8/go.mod h1:wCLOYeEDCxDquneSZ/zTEcKGXZ6uan+6sgZyTMlNVDo=
|
|
||||||
bitbucket.org/ausocean/iot v1.2.9 h1:3tzgiekH+Z0yXhkwnqBzxxe8qQJ2O7YTkz4s0T6stgw=
|
bitbucket.org/ausocean/iot v1.2.9 h1:3tzgiekH+Z0yXhkwnqBzxxe8qQJ2O7YTkz4s0T6stgw=
|
||||||
bitbucket.org/ausocean/iot v1.2.9/go.mod h1:Q5FwaOKnCty3dVeVtki6DLwYa5vhNpOaeu1lwLyPCg8=
|
bitbucket.org/ausocean/iot v1.2.9/go.mod h1:Q5FwaOKnCty3dVeVtki6DLwYa5vhNpOaeu1lwLyPCg8=
|
||||||
bitbucket.org/ausocean/utils v1.2.11 h1:zA0FOaPjN960ryp8PKCkV5y50uWBYrIxCVnXjwbvPqg=
|
bitbucket.org/ausocean/utils v1.2.11 h1:zA0FOaPjN960ryp8PKCkV5y50uWBYrIxCVnXjwbvPqg=
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue