Как записать потоковую передачу холста? - PullRequest
Новая
       14

Как записать потоковую передачу холста?

0 голосов
/ 03 июня 2019

Я работаю с HTML5 видео и холстом. Моё требование - записывать видео в реальном времени с редактированием видео.

Для этого я использую метод navigator.getUserMedia для захвата прямой трансляции.

То, что я сделал, - у меня есть видео тег, в котором идет прямая трансляция. У меня есть холст в моем HTML, я использую два холста один над другим - первый холст показывает потоковое видео, а canvas2 используется для редактирования в прямом эфире.

Вот код - который получает видео и показывает на холсте 

navigator.getUserMedia({audio: true, video: {facingMode: {exact: "environment"}}}, (stream) => {

      this.canvas = <HTMLCanvasElement>document.getElementById('canvas');
      this.ctx = this.canvas.getContext('2d');
      this.video = this.elRef.nativeElement.querySelector('#video');
      this.videostream = this.elRef.nativeElement.querySelector('#videostream');

      this.myStream = stream;
      this.video.srcObject = this.myStream;

      this.canvas2 = <HTMLCanvasElement>document.getElementById('canvas2');
      this.canvas3 = <HTMLCanvasElement>document.getElementById('canvas3');

      let self = this;
      this.video.addEventListener('play', () => {
        function step() {
          self.ctx.drawImage(self.video, 0, 0, self.canvas.width, self.canvas.height);

          requestAnimationFrame(step)
        }

        requestAnimationFrame(step);
      })

    }, (error) => {

    });

Так же, как мне нужно сделать редактирование, я создаю новый canvas3 - комбинацию canvas один и canvas два. И показываю поток canvas3 на новом теге видео

Вот код рисунка - 

handleMove(event) {
    var canvasPosition = this.canvas2.getBoundingClientRect();

    let currentX = event.touches[0].pageX - canvasPosition.x;
    let currentY = event.touches[0].pageY - canvasPosition.y;

    let ctx = this.canvas2.getContext('2d');

    ctx.lineJoin = 'round';
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();

    ctx.stroke();
    this.lastX = currentX;
    this.lastY = currentY;


    /*for canvas recording*/
    var ctx3 = this.canvas3.getContext('2d');
    ctx3.drawImage(this.canvas, 0, 0);
    ctx3.drawImage(this.canvas2, 0, 0);

    let canvasStream = this.canvas3.captureStream(60);

     this.videostream.srcObject = canvasStream;

     this.videostream.play()
     this.videostream.addEventListener('play', () => {
     })

  }

Вот мой HTML-код- 

 <video id="video" controls="false" style="width: 100%; height: 30%;" autoplay playsinline></video>

  <canvas id="canvas" style="width: 100%; height: 30%;position: absolute"></canvas>

  <canvas id="canvas2" style="background-color: transparent;width: 100%; height: 30%;position: relative"
          (touchstart)="handleStart($event)" (touchmove)="handleMove($event)"></canvas>

  <canvas id="canvas3" style="width: 100%; height: 30%;"></canvas>

  <video id="videostream" controls="false" style="width: 100%; height: 30%;" autoplay playsinline></video>

Моя проблема в том, что я не могу показать поток холста как видео.

Я также покопался в Google и нашел несколько плагинов / библиотек для записи, таких как - RecordRtc, CanvasCamera и т. Д., Но я не получил от них помощи.

Ожидаемый результат - показ потока холста в виде видео.

Текущий вывод - я получаю отдельные потоки холста и его показы, подобные изображению в «видеопотоке» в теге video.

Кто-нибудь знает, как это сделать?

Любая помощь будет оценена

...