Html canvas 視頻流

Question

我有這段代碼在視頻標簽中播放我的相機視圖，然后在同一頁面的 canvas 元素中，該頁面有 2 個方塊，一個用於視頻標簽（播放相機視圖），另一個用於畫布（播放相同的視頻）視頻標簽）。我如何編輯我的代碼以使視頻在另一個頁面的 canvas 中播放，讓我的用戶實時觀看它，如果有一種方法可以讓用戶在同一頁面而不是另一個頁面觀看它並且只看到 canvas，它是也接受了。

這是我的 html 文件：

<html>
    <head>
        <meta charset="UTF-8">
        <title>With canvas</title>
    </head>
    <body>
        <div class="booth">
            <video id="video" width="400" height="300" autoplay></video>
            <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
        </div>
        <script src="video.js"></script>
    </body>
</html>

這是我的 js 文件：

(function() {
    var canvas= document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    video = document.getElementById('video'),
    vendorUrl = window.URL || window.webkitURL;

    navigator.getMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;

    navigator.getMedia ({
        video: true,
        audio: false
    }, function(stream) {
        //video.src = vendorUrl.createObjectURL(stream);
        if ('srcObject' in video) {
            video.srcObject = stream;
          } else {
            video.src = vendorUrl.createObjectURL(stream);
          }
        video.play();
    }, function(error) {
        // An error occured
        //error.code
    });


    video.addEventListener('play', function() {
        setInterval(() => {
        draw(this, context, 400, 300);
        }, 100);

    }, false );
    function draw(video, context, width, height) {
        context.drawImage(video, 0, 0, width, height);
    }
    
}) ();

Answer 1

使用MediaRecorder獲取塊中的實時數據作為媒體記錄器記錄來自相機的塊，並提供可以通過用戶另一端發送的塊

然后使用mediasource到用戶另一側的 append 塊到 append 它並在收到新塊時實時播放

我知道這是一件復雜的事情，但請相信我，當我對此進行實驗時，我花了很多時間來理解我相信你會從我下面的實驗代碼中得到一些好處

這是一個工作演示

var mediasource = new MediaSource(),video = document.querySelector("video"),
    mime = 'video/webm;codecs=vp9,opus'
video.src = URL.createObjectURL(mediasource)

mediasource.addEventListener("sourceopen",function(_){
    var source = mediasource.addSourceBuffer(mime)
    navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
// creating chunks of 5 seconds of video continiously
            var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
            r.then(arraybuffer=>{
                source.appendBuffer(arraybuffer)
            })
        }
        recorder.start(5000)
    })
})

 <video class="video" controls autoplay></video>

用於收集實時數據和播放演示的分離版本

// gathering camera data to liveData array
var vid = document.querySelector(".video"),
    mime = 'video/webm;codecs=vp9,opus',
    liveData = []

    navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
            console.log("capturing")
            new Response(d.data).arrayBuffer().then(eachChunk=>{
            // recording in chunks here and saving it to liveData array                
                liveData.push(eachChunk)
            })
        }
        recorder.start(5000)    
    })
//--------------------------------------------------------------------------------
 
// playing from liveData in video 
var ms = new MediaSource()
vid.src =URL.createObjectURL(ms)

ms.onsourceopen = function(){
    var source = ms.addSourceBuffer(mime),chunkIndex = 0
    setInterval(function(){
        if(liveData.length > 0){
            var currentChunk = liveData[chunkIndex]
            source.appendBuffer(currentChunk)
            console.log("playing")
            chunkIndex++     
        }
    },5000)
}

Html canvas 視頻流

問題描述

1 個解決方案

解決方案1
2 2021-09-25 14:43:35

Html canvas 視頻流

問題描述

1 個解決方案

解決方案1 2 2021-09-25 14:43:35

解決方案1
2 2021-09-25 14:43:35