Записать холст как видео, используя DrawerJs

Question

Я использую DrawerJs из здесь

Я пытаюсь записать действия холста как видео, когда пользователи рисуют на холсте.Все хорошо, но только то, что мне нужно исправить.и я не знаю, как я могу это исправить.Я не смог найти ничего об этом в документации DrawerJs: (

Проблема с карандашом для рисования от руки, мне нужно обновлять значение пути холста при каждом движении мыши. Поскольку DrawerJs обновляет холст, когда mouseUp и устройство записи холста не могут поймать перемещение мышиActions.I попытался изменить функцию _onMouseMoveInDrawingMode, она работает, но это не очень хорошее решение. Потому что что-то не так, и я не могу управлять курсором на холсте, потому что это так медленно и трудно рисовать что-либо.

Вот мойкод из boxJs.standalone.js:

_onMouseMoveInDrawingMode: function(e) {

        if (this._isCurrentlyDrawing) {
        var pointer = this.getPointer(e);
        this.freeDrawingBrush.onMouseMove(pointer);
        //  I added this region for set path values from every single mouse move
        if (this.clipTo) {
            this.contextTop.restore();
        }
        this.freeDrawingBrush.onMouseUp();
        // end

      }
      this.setCursor(this.freeDrawingCursor);
      this._handleEvent(e, 'move');
    },

    /**
     * @private
     * @param {Event} e Event object fired on mouseup
     */
    _onMouseUpInDrawingMode: function (e) {
      this._isCurrentlyDrawing = false;
      if (this.clipTo) {
        this.contextTop.restore();
      }
      //this.freeDrawingBrush.onMouseUp();  
      this._handleEvent(e, 'up');
    } 

Вот HTML-код:

<div class="row">
            <div class="col-md-6">
                <div id="canvas-editor"></div>
            </div>
            <div class="col-md-6">
                <video id="video1" playsinline autoplay></video>
            </div>
        </div>
        <div class="row">
            <button type="button" id="startCanvasRecord" onclick="StartClick();">Start Canvas Record</button>
            <button type="button" id="stopCanvasRecord" onclick="StopClick();">Stop Canvas Record</button>
        </div>

А вот мой код JavaScript для записи холста как видео,

    <script>
    var mediaRecorder;
            var recordedBlobs = [];
            var sourceBuffer;
            var stream;
        const mediaSource = new MediaSource();
        mediaSource.addEventListener('sourceopen', handleSourceOpen, false);

function handleSourceOpen(event) {
  console.log('MediaSource opened');
  sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  console.log('Source buffer: ', sourceBuffer);
}
            const video = document.getElementById('video1');

                $(document).ready(function () {
                    drawer = new DrawerJs.Drawer(null, {
                        texts: customLocalization,
                        exitOnOutsideClick: false,
                        plugins: drawerPlugins,
                        defaultImageUrl: '/images/drawer.jpg',
                        defaultActivePlugin : { name : 'Pencil', mode : 'lastUsed'},
                        contentConfig: {
                                        saveAfterInactiveSec: 0.1,
                                        saveInHtml: true,
                                    },
                    }, 600, 600);
                    $('#canvas-editor').append(drawer.getHtml()); 
                      drawer.onInsert();
                });

                function StartClick()
                {
                    canvas = $(".lower-canvas")[0];
                    if(canvas===undefined)
                     {  
                        alert("Canvas Undefined");
                        return;
                     }
                    startRecording();
                }

                function handleDataAvailable(event) {
                debugger;
                  if (event.data && event.data.size > 0) {
                    recordedBlobs.push(event.data);
                  }
                }


                function startRecording() {
                canvas = $(".lower-canvas")[0];
                if(canvas===undefined)
                 {  
                    alert("Canvas Undefined");
                    return;
                 }
                stream = canvas.captureStream();
                  try {
                  debugger;
                    mediaRecorder = new MediaRecorder(stream, options);
                  } catch (e0) {
                    console.log('Unable to create MediaRecorder with options Object: ', e0);
                    try {
                      options = {mimeType: 'video/webm,codecs=vp9'};
                      mediaRecorder = new MediaRecorder(stream, options);
                    } catch (e1) {
                      console.log('Unable to create MediaRecorder with options Object: ', e1);
                      try {
                        options = 'video/vp8'; // Chrome 47
                        mediaRecorder = new MediaRecorder(stream, options);
                      } catch (e2) {
                        alert('MediaRecorder is not supported by this browser.\n\n' +
                          'Try Firefox 29 or later, or Chrome 47 or later, ' +
                          'with Enable experimental Web Platform features enabled from chrome://flags.');
                        console.error('Exception while creating MediaRecorder:', e2);
                        return;
                      }
                    }
                  }
                    mediaRecorder.onstop = handleStop;
                    mediaRecorder.ondataavailable = handleDataAvailable;
                    mediaRecorder.start(100); // collect 100ms of data
                }


                function StopClick()
                {
                  mediaRecorder.stop();
                  console.log('Recorded Blobs: ', recordedBlobs);
                  video.controls = true;
                }
        <script>

У вас есть какое-нибудь решение?

С уважением