video works
This commit is contained in:
parent
50834353b2
commit
e291e4d1c9
@ -24,7 +24,7 @@ export function loadVp9(callback) {
|
|||||||
"OGVDecoderVideoVP9W",
|
"OGVDecoderVideoVP9W",
|
||||||
(videoCodecClass) => {
|
(videoCodecClass) => {
|
||||||
window.videoCodecClass = videoCodecClass;
|
window.videoCodecClass = videoCodecClass;
|
||||||
videoCodecClass().then((decoder) => {
|
videoCodecClass({ videoFormat: {} }).then((decoder) => {
|
||||||
decoder.init(() => {
|
decoder.init(() => {
|
||||||
callback(decoder);
|
callback(decoder);
|
||||||
})
|
})
|
||||||
@ -38,7 +38,7 @@ export function loadOpus(callback) {
|
|||||||
window.OGVLoader.loadClass(
|
window.OGVLoader.loadClass(
|
||||||
"OGVDecoderAudioOpusW",
|
"OGVDecoderAudioOpusW",
|
||||||
(audioCodecClass) => {
|
(audioCodecClass) => {
|
||||||
audioCodecClass().then((decoder) => {
|
audioCodecClass({ audioFormat: {} }).then((decoder) => {
|
||||||
decoder.init(() => {
|
decoder.init(() => {
|
||||||
callback(decoder);
|
callback(decoder);
|
||||||
})
|
})
|
||||||
|
@ -226,6 +226,8 @@ export default class Connection {
|
|||||||
close() {
|
close() {
|
||||||
clearInterval(this._interval);
|
clearInterval(this._interval);
|
||||||
this._ws?.close();
|
this._ws?.close();
|
||||||
|
this._videoDecoder?.close();
|
||||||
|
this._audioDecoder?.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
setMsgbox(callback: MsgboxCallback) {
|
setMsgbox(callback: MsgboxCallback) {
|
||||||
@ -266,11 +268,10 @@ export default class Connection {
|
|||||||
}
|
}
|
||||||
if (vf.vp9s) {
|
if (vf.vp9s) {
|
||||||
let dec = this._videoDecoder;
|
let dec = this._videoDecoder;
|
||||||
|
// dec.sync();
|
||||||
vf.vp9s.frames.forEach((f) => {
|
vf.vp9s.frames.forEach((f) => {
|
||||||
dec.processFrame(f.data.buffer, (ok: any) => {
|
dec.processFrame(f.data.slice(0).buffer, (ok: any) => {
|
||||||
console.log(ok);
|
if (ok && dec.frameBuffer) {
|
||||||
if (dec.frameBuffer) {
|
|
||||||
console.log(dec.frameBuffer);
|
|
||||||
this.draw(dec.frameBuffer);
|
this.draw(dec.frameBuffer);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
12
src/ui.js
12
src/ui.js
@ -21,7 +21,10 @@ if (app) {
|
|||||||
<div id="text" style="line-height: 2em"></div>
|
<div id="text" style="line-height: 2em"></div>
|
||||||
<button id="cancel" onclick="cancel();">Cancel</button>
|
<button id="cancel" onclick="cancel();">Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="player"></canvas>
|
<div id="canvas" style="display: none;">
|
||||||
|
<button id="cancel" onclick="cancel();">Cancel</button>
|
||||||
|
<canvas id="player"></canvas>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
let player;
|
let player;
|
||||||
@ -33,7 +36,7 @@ if (app) {
|
|||||||
id.value = localStorage.getItem('id');
|
id.value = localStorage.getItem('id');
|
||||||
const key = document.querySelector('#key');
|
const key = document.querySelector('#key');
|
||||||
key.value = localStorage.getItem('key');
|
key.value = localStorage.getItem('key');
|
||||||
player = YUVCanvas.attach(document.getElementById("player"))
|
player = YUVCanvas.attach(document.getElementById('player'))
|
||||||
};
|
};
|
||||||
|
|
||||||
window.connect = () => {
|
window.connect = () => {
|
||||||
@ -67,11 +70,15 @@ if (app) {
|
|||||||
document.querySelector('div#status').style.display = 'none';
|
document.querySelector('div#status').style.display = 'none';
|
||||||
document.querySelector('div#password').style.display = 'block';
|
document.querySelector('div#password').style.display = 'block';
|
||||||
} else if (!type) {
|
} else if (!type) {
|
||||||
|
document.querySelector('div#canvas').style.display = 'block';
|
||||||
|
document.querySelector('div#password').style.display = 'none';
|
||||||
document.querySelector('div#status').style.display = 'none';
|
document.querySelector('div#status').style.display = 'none';
|
||||||
} else if (type == 'error') {
|
} else if (type == 'error') {
|
||||||
document.querySelector('div#status').style.display = 'block';
|
document.querySelector('div#status').style.display = 'block';
|
||||||
|
document.querySelector('div#canvas').style.display = 'none';
|
||||||
document.querySelector('div#text').innerHTML = '<div style="color: red; font-weight: bold;">' + text + '</div>';
|
document.querySelector('div#text').innerHTML = '<div style="color: red; font-weight: bold;">' + text + '</div>';
|
||||||
} else {
|
} else {
|
||||||
|
document.querySelector('div#password').style.display = 'none';
|
||||||
document.querySelector('div#status').style.display = 'block';
|
document.querySelector('div#status').style.display = 'block';
|
||||||
document.querySelector('div#text').innerHTML = '<div style="font-weight: bold;">' + text + '</div>';
|
document.querySelector('div#text').innerHTML = '<div style="font-weight: bold;">' + text + '</div>';
|
||||||
}
|
}
|
||||||
@ -82,6 +89,7 @@ if (app) {
|
|||||||
document.querySelector('div#connect').style.display = 'block';
|
document.querySelector('div#connect').style.display = 'block';
|
||||||
document.querySelector('div#password').style.display = 'none';
|
document.querySelector('div#password').style.display = 'none';
|
||||||
document.querySelector('div#status').style.display = 'none';
|
document.querySelector('div#status').style.display = 'none';
|
||||||
|
document.querySelector('div#canvas').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
window.confirm = () => {
|
window.confirm = () => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user