захватить холст и поток в элемент видео (можно загрузить) - PullRequest
Новая
       22

захватить холст и поток в элемент видео (можно загрузить)

0 голосов
/ 27 марта 2019

Я попытался отобразить запись в реальном времени с камеры Kinect с помощью веб-сокетов в элементе canvas, следующим шагом будет сохранение холста в элементе video, и когда пользователь нажимает кнопку «start», «stop»,видеопоток будет сохранен в другом теге видео

Я попытался с помощью метода захватить данные с холста и поместить их на элемент видео (но его нельзя воспроизвести так же, как веб-камеру) 

function gotStream(stream) {
        let videorecord = document.getElementById('vid1');
        videorecord.srcobject = stream;

        // construct a MediaRecorder; passing stream  to mediarecorder as parameter
        var mediaRecorder = new MediaRecorder(stream);
        let chunks = [];

        mediaRecorder.ondataavailable = function(ev){
            chunks.push(ev.data);
        }
        document.getElementById("start").addEventListener('click', StratRecording);
        function StratRecording(){
            mediaRecorder.start();
            chunks = []; //clean cache after everytime start recording
        }

        document.getElementById("stop").addEventListener("click", StopRecording);
        function StopRecording(){
            mediaRecorder.stop();
        }

        mediaRecorder.onstop = function(ev){
            var blob = new Blob(chunks,{ 'type' : 'video/mp4;' });
            var videoURL = window.URL.createObjectURL(blob);
            var vid2 = document.getElementById("vid2");
            vid2.src = videoURL;
        }

    }

эта часть предназначена для хранения клипов vid1 в vid2 

socket.onmessage = function (event) {
    if (event.data instanceof Blob) {

          // RGB FRAME DATA
        // 1. Get the raw data.
        var blob = event.data;

        // 2. Create a new URL for the blob object.
        window.URL = window.URL || window.webkitURL;

        var source = window.URL.createObjectURL(blob);

        // 3. Update the image source.
        camera.src = source;

эта часть предназначена для отображения данных Kinect на холсте через веб-сокет 

<canvas id="bodies" width="1080" height="920"></canvas><video id="vid1" width="1080" height="920" controls></video>

            <button id="start">start</button>
            <button id="stop">stop</button>

        <video id="vid2" width="1080" height="920" controls></video>

HTML-страница индекса `

Есть ли способ для потоковой передачи холста в элемент видео, который можно загрузить?

...