videojs-record audio недоступна при сохранении фрагментов видео в событии timestamp
Я использую videojs-record
для записи видео, и я хочу сохранять куски видео одновременно, пока запись продолжается. я использовалtimestamp
событие для достижения этого. И мне удалось успешно запустить это, но проблема, с которой я столкнулся, заключается в том, что единственный первый фрагмент имеет звук, а остальные фрагменты не имеют звука.
Угловой компонент
import {
Component,
OnInit,
OnDestroy,
ElementRef
} from '@angular/core';
import { HttpClient } from '@angular/common/http'
import videojs from 'video.js';
import * as adapter from 'webrtc-adapter/out/adapter_no_global.js';
import * as RecordRTC from 'recordrtc';
import * as Record from 'videojs-record/dist/videojs.record.js';
@Component({
selector: 'videojs-record',
template: `
<style>
/* change player background color */
.video-js video {
background-color: #42f489;
}
</style>
<video id="video_{{idx}}" class="video-js vjs-default-skin" playsinline></video>
`
})
export class VideoJSRecordComponent implements OnInit, OnDestroy {
// reference to the element itself: used to access events and methods
private _elementRef: ElementRef
private counter = 0;
private recording = false;
private startTime = new Date() ;
private stop = false;
// index to create unique ID for component
idx = 'clip1';
private config: any;
private player: any;
private plugin: any;
// constructor initializes our declared vars
constructor(elementRef: ElementRef , private http : HttpClient) {
this.player = false;
// save reference to plugin (so it initializes)
this.plugin = Record;
// video.js configuration
this.config = {
controls: true,
autoplay: false,
fluid: false,
loop: false,
width: 500,
height: 500,
controlBar: {
volumePanel: false
},
plugins: {
record: {
audio: true,
frameWidth : 1280,
frameHeight : 720,
video: true,
debug: true,
maxLength : 30,
timeSlice : 10000
}
}
};
}
ngOnInit() {}
ngAfterViewInit() {
let el = 'video_' + this.idx;
// setup the player via the unique element ID
this.player = videojs(document.getElementById(el), this.config, () => {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' and recordrtc ' + RecordRTC.version;
videojs.log(msg);
});
// user completed recording and stream is available
this.player.on('finishRecord', () => {
let fileName = "video_" + new Date().getMilliseconds() + ".webm";
this.sendToServer(this.player.recordedData);
});
this.player.on('timestamp', () => {
this.sendToServer(this.player.recordedData[this.player.recordedData.length - 1]);
});
}
sendToServer(files) {
var fd = new FormData();
fd.append("video" , files , "video_11.webm");
this.http.post("http://localhost:3040/profile", fd).subscribe((res)=>{
console.log("RESPONSE :" , res);
})
}
// use ngOnDestroy to detach event handlers and remove the player
ngOnDestroy() {
if (this.player) {
this.player.dispose();
this.player = false;
}
}
}
Приложение Node для сохранения видео
const app = require("express")();
const cors = require("cors");
var bodyParser = require('body-parser');
var FileSaver = require('file-saver');
const save = require('save-file')
var multer = require('multer')
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + "/uploads")
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + ".webm")
}
})
var upload = multer({ storage: storage })
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/profile', upload.single('video'), async function (req, res, next) {
res.sendFile(req.file.path , function(err){
console.log("Error while sending error : " , err);
});
})
app.listen("3040" , ()=>console.log("Listening on port 3040"));