錄制視頻和音頻

Question

小提琴

我跟着這個小提琴。 其中它具有視頻和音頻捕獲。 但它不會讓我錄制視頻並將其發送到 php 以使用 ffmpeg 進行進一步處理並保存。 我想知道如何錄制視頻並將其發送到 php 並保存？

var btnVideoCapture = document.getElementById('btn-capture-video');
btnVideoCapture.addEventListener('click', showUserMedia, false);

var btnScreenshot = document.getElementById('btn-screenshot');
btnScreenshot.addEventListener('click', snapshot, false);

var btnStopVideo = document.getElementById('btn-stop-video');
btnStopVideo.addEventListener('click', stopUserMedia, false);

var onFailSoHard = function (e) {
    console.log('Reeeejected!', e);
};
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;


function showUserMedia() {
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            audio: true,
            video: true
        }, function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.controls = true;
            localMediaStream = stream;
        }, onFailSoHard);
        // console.log('Good to go!');
    } else {
        video.src = 'somevideo.webm'; // fallback.
        //console.log('getUserMedia() is not supported in your browser');
    }
}

function snapshot() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
        document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
}

function stopUserMedia() {
    video.pause();
    localMediaStream.stop();
    video.src = '';
}

Answer 1

您發布的代碼僅訪問網絡攝像頭並在<video>元素（ showUserMedia()函數）中顯示視頻流。 它不會錄制視頻或將數據發布到 Web 服務器。

要錄制視頻（和音頻），您需要使用 Chrome（49+）和 Firefox（30+）現在支持的Media Recorder API 。 兩個瀏覽器都記錄到.webm ，您可以將文件 POST 到 Web 服務器以進行進一步處理。

本文詳細介紹了規范，這里有一個現場演示+ GitHub 項目。

Answer 2

看一下RecordRTC

您可能還想看看這個： 如何使用 webRTC 和基於服務器的對等連接錄制網絡攝像頭和音頻

我認為這可以滿足您的特定需求： https : //github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP

這是錄制視頻和音頻的示例：opentokrtc.com

Answer 3

1- 首先，您將使用 javascript 2- 然后在第 3 頁中設置一個隱藏的多部分隱藏表單- 錄制視頻后，您將觸發一個事件，將錄制的視頻呈現為表單。 4 - 然后在這里您可以手動將此視頻提交到 PHP 腳本