@lcap/nasl/out/service/video/VideoTranscribe.js

NetEase Application Specific Language

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class VideoTranscribe {
    constructor(props) {
        this.stopBtn = null;
        this.recordBtn = null;
        this.recorder = null;
        this.videoUrl = null;
        this.video = null;
        this.init({
            background: props.background || '#0072ff',
            color: props.color || '#fff',
        });
    }
    init(options) {
        const room = document.createElement('div');
        room.style.position = 'fixed';
        room.style.right = '10px';
        room.style.bottom = '10px';
        room.style.background = options.background;
        room.style.borderRadius = '50%';
        room.style.width = '60px';
        room.style.height = '60px';
        room.style.boxShadow = '1px 1px 5px #ccc';
        room.style.display = 'flex';
        room.style.justifyContent = 'center';
        room.style.alignItems = 'center';
        room.style.color = options.color;
        this.recordBtn = document.createElement('div');
        this.recordBtn.innerHTML = '录制';
        this.stopBtn = document.createElement('div');
        this.stopBtn.innerHTML = '停止';
        this.stopBtn.style.display = 'none';
        room.appendChild(this.recordBtn);
        room.appendChild(this.stopBtn);
        document.body.appendChild(room);
        this.recordBtn.onclick = () => {
            this.record();
        };
        this.stopBtn.onclick = () => {
            this.stop();
        };
    }
    async record() {
        this.captureStream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            cursor: 'always',
            frameRate: 20,
        });
        this.recordBtn.style.display = 'none';
        this.stopBtn.style.display = 'block';
        this.recorder = new MediaRecorder(this.captureStream);
        this.recorder.start();
        this.captureStream.getVideoTracks()[0].onended = () => {
            this.recorder.stop();
        };
        this.recorder.addEventListener('dataavailable', (event) => {
            // 录屏结束，并且数据可用
            this.recordBtn.style.display = 'block';
            this.stopBtn.style.display = 'none';
            this.videoUrl = URL.createObjectURL(event.data, {
                type: 'video/mp4',
            });
            this.download();
            this.reset();
        });
    }
    reset() {
        this.stopBtn = null;
        this.recordBtn = null;
        this.recorder = null;
        this.videoUrl = null;
        this.video = null;
    }
    stop() {
        const tracks = this.captureStream.getVideoTracks();
        tracks.forEach((track) => track.stop());
    }
    download() {
        const name = new Date()
            .toISOString()
            .slice(0, 19)
            .replace('T', ' ')
            .replace(' ', '_')
            .replace(/:/g, '-');
        const a = document.createElement('a');
        a.style = 'display: none';
        a.download = `${name}.mp4`;
        a.href = this.videoUrl;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}
exports.default = VideoTranscribe;
//# sourceMappingURL=VideoTranscribe.js.map