import { store } from '../store' import Whammy from './whammy' import types from '../types' let fps = 0, last_frame let recording = false, saving = false let videoWriter export function startRecording(){ videoWriter = new Whammy.Video(10) recording = true store.dispatch({ type: types.player.start_recording, }) } export function stopRecording(){ if (!recording) return recording = false store.dispatch({ type: types.player.saving_video, }) videoWriter.compile(false, function(blob){ // console.log(blob) store.dispatch({ type: types.player.save_video, blob: blob, }) }) } export function saveFrame(){ saving = true } export function onFrame (data) { const blob = new Blob([data.frame], { type: 'image/jpg' }) const url = URL.createObjectURL(blob) const img = new Image () let canvas = document.querySelector('.player canvas') if (! canvas) return console.error('no canvas for frame') img.onload = () => { img.onload = null last_frame = data.meta URL.revokeObjectURL(url) const ctx = canvas.getContext('2d-lodpi') ctx.drawImage(img, 0, 0, canvas.width, canvas.height) if (recording) { console.log('record frame') videoWriter.add(canvas) store.dispatch({ type: types.player.add_record_frame, }) } if (saving) { saving = false canvas.toBlob(blob => { store.dispatch({ type: types.player.save_frame, blob: blob, }) }) } fps += 1 } img.src = url } let previousValue, currentValue function handleChange() { let previousValue = currentValue currentValue = store.getState().live.playing if (previousValue !== currentValue) { if (currentValue) { startWatchingFPS() } else { stopWatchingFPS() } } } let fpsInterval; function startWatchingFPS(){ clearInterval(fpsInterval) fpsInterval = setInterval(() => { store.dispatch({ type: types.player.set_fps, fps: fps, }) store.dispatch({ type: types.player.current_frame, meta: last_frame, }) fps = 0 }, 1000) } function stopWatchingFPS(){ clearInterval(fpsInterval) }