видео js -запись не работает в ионике - PullRequest
0 голосов
/ 27 мая 2020

Я пытаюсь записать видео со звуком, используя video js -record, и мое приложение находится в ioni c. Я следил за их вики. Вот ссылка ниже https://github.com/collab-project/videojs-record/wiki/Angular, но у меня это не работает. вот ошибка, которую я получаю

ERROR in ./node_modules/videojs-record/dist/videojs.record.js
Module not found: Error: Can't resolve 'RecordRTC' in '/path/to/project/root/node_modules/videojs-record/dist'
ERROR in ./node_modules/videojs-record/dist/videojs.record.js
Module not found: Error: Can't resolve 'videojs' in '/path/to/project/root/node_modules/videojs-record/dist'

Вот мой код и моя конфигурация для видео js в video-recorder.component.ts

import { Component, OnInit, OnDestroy, ElementRef, Input } from '#angular/core';
import videojs from 'video.js';
import * as adapter from 'webrtc-adapter/out/adapter_no_global.js';
import * as RecordRTC from 'recordrtc';
// register videojs-record plugin with this import
import * as Record from 'videojs-record/dist/videojs.record.js';

Component({
    selector: 'app-video-recorder',
    templateUrl: './video-recorder.component.html',
    styleUrls: ['./video-recorder.component.scss']
})
export class VideoRecorderComponent implements OnInit, OnDestroy {
    // reference to the element itself: used to access events and methods
    private _elementRef: ElementRef;
    // index to create unique ID for component
    #Input() idx: string;
    private config: any;
    private player: any;
    private plugin: any;
    // constructor initializes our declared vars
    constructor(elementRef: ElementRef) {
    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: 320,
    height: 240,
    controlBar: {
    volumePanel: false
    },
    plugins: {
    // configure videojs-record plugin
    record: {
    audio: false,
    video: true,
    debug: true
    }
    }
    };
    }
    ngOnInit() {}
    // use ngAfterViewInit to make sure we initialize the videojs element
    // after the component template itself has been rendered
    ngAfterViewInit() {
        // ID with which to access the template's video element
        let el = 'video_' + this.idx;
        // setup the player via the unique element ID
        this.player = videojs(document.getElementById(el), this.config, () => {
            console.log('player ready! id:', el);
            // 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);
        });
        // device is ready
        this.player.on('deviceReady', () => {
            console.log('device is ready!');
        });
        // user clicked the record button and started recording
        this.player.on('startRecord', () => {
            console.log('started recording!');
        });
        // user completed recording and stream is available
        this.player.on('finishRecord', () => {
            // recordedData is a blob object containing the recorded data that
            // can be downloaded by the user, stored on server etc.
            console.log('finished recording: ', this.player.recordedData);
        });
        // error handling
        this.player.on('error', (element, error) => {
            console.warn(error);
        });
        this.player.on('deviceError', () => {
            console.error('device error:', this.player.deviceErrorCode);
        });
    }
    // use ngOnDestroy to detach event handlers and remove the player
    ngOnDestroy() {
        if (this.player) {
            this.player.dispose();
            this.player = false;
        }
    }
}

и вот мой video-recorder.component. html

<video id="video_{{idx}}" class="video-js vjs-default-skin" playsinline></video>

Пожалуйста, как я могу решить эту ошибку

...