录制视频和音频答案

【问题标题】：Recording video and audio录制视频和音频
【发布时间】：2014-08-02 16:04:54
【问题描述】：

我跟着这个小提琴。在此它具有视频和音频捕获。但它不会让我录制视频并将其发送到 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 = '';
}

【问题讨论】：

您可以通过 WebSockets 发送媒体（您必须不断抓取帧）或使用现有的library for recording。
在本例中，您在变量“localMediaStream”中获取视频 blob，使用 php 或任何其他脚本语言将其发送、解析并保存在服务器上 ..

标签： php html audio video html5-video

【解决方案1】：

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

要录制视频（和音频），您需要使用 Chrome (49+) 和 Firefox(30+) 现在支持的 Media Recorder API。两种浏览器都记录到.webm，您可以将文件发布到网络服务器以进行进一步处理。

This article 详细介绍了规范，这里是 live demo + GitHub project。

【讨论】：

【解决方案2】：

看看RecordRTC

您可能也想看看这个：How to record webcam and audio using webRTC and a server-based Peer connection

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

这是一个录制视频和音频的例子：opentokrtc.com

【讨论】：

【解决方案3】：

1- 首先，您将使用 javascript 进行录制 2-然后在页面中设置一个隐藏的多部分隐藏表单 3- 录制视频后，您会触发一个事件，该事件将录制的视频呈现出来。 4 - 然后在这里您可以手动将此视频提交到 PHP 脚本

【讨论】：