Question

我试图显示从Kinect摄像机使用网络套接字到画布元素的实时记录，下一步是将画布存储到视频元素中，当用户单击“开始”“停止”按钮时，视频流将保存到另一个视频标签

我尝试使用方法从画布捕获数据并将其放在视频元素上（但不能像网络摄像头一样播放）

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;

这部分是通过Web套接字在画布上显示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索引页面 `

是否有任何方法可以将画布流式传输为可以下载的视频元素？

捕获画布并流到视频元素中（可以下载）

0 个答案: