video js - запись звука недоступна при сохранении фрагментов видео в событии отметки времени - PullRequest
0 голосов
/ 09 января 2020

Я использую videojs-record для записи видео, и я хочу сохранить фрагменты видео одновременно, пока запись продолжается. Я использовал timestamp событие этого, чтобы достичь этого. И я успешно смог запустить это, но проблема, с которой я сталкиваюсь, заключается в том, что единственный первый блок имеет аудио, а остальные фрагменты не имеют аудио.

Angular компонент

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"));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...