记录视频和音频

Question

此Fiddle中包含了视频和音频捕获功能。但是，我无法录制视频并将其发送到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 = '';
}

- user3508453

---

你可以通过WebSockets发送媒体（需要不断获取帧），或使用现有的录制库。 - Benjamin Trent

在这个例子中，你可以通过变量'localMediaStream'获取视频blob，使用php或任何其他脚本语言将其发送、解析并保存到服务器上。 - Qarib Haider

Answer 1

您发布的代码只是访问网络摄像头并在<video>元素中显示视频流（showUserMedia()函数）。它不会录制视频或将数据POST到Web服务器。

要录制视频（和音频），您需要使用媒体记录器API，该API现在由Chrome（49+）和Firefox（30+）支持。 两个浏览器都记录为.webm格式，您可以将文件POST到Web服务器以进行进一步处理。 本文详细介绍了规范，这里有一个实时演示+GitHub项目。

- octavn

Answer 2

看一下RecordRTC

你可能也想看一下这个：如何使用WebRTC和基于服务器的Peer连接记录网络摄像头和音频

我认为这可以满足你的具体需求：https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP

以下是录制视频和音频的示例：opentokrtc.com

- saifwilljones

Answer 3

1- 首先，您将使用JavaScript进行记录 2- 然后在页面上设置一个隐藏的多部分表单 3- 当录制视频时，触发事件将录制的视频渲染到表单中。 4- 然后，您可以手动将此视频提交给PHP脚本。

- Sajid Ali Khan