Question

使用Html 5我想录制视频并将流保存到本地文件中。以下是代码。在按钮单击中，它已调用相机并在HTML的“VIDEO”标签中捕获视频。我可以将流存储到本地文件中吗？或者我可以将其存储为MP4文件？

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

function enter() {

    if (navigator.mozGetUserMedia) { 
       navigator.myGetMedia=navigator.mozGetUserMedia;
       navigator.myGetMedia({video: true}, connect, error); 
    } 
    else {
       alert("NO");
    }

    function connect(stream) {

        var video = document.getElementById("my_video");
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();

        var canvas = document.getElementById("c"); 
    }

    function error(e) { console.log(e); }

}

</script>

</head>    
<body>
    <canvas width="640" height="480" id="c"></canvas>
    <input type="button" value="RECORD" onClick="enter()"/>
    <input type="button" value="SAVE" />
    <video id="my_video" width="640" height="480"/>
</body>
</html>

我想在点击保存按钮时保存流。

Answer 1

RecordRTC：WebRTC音频/视频录制

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

适用于Chrome和Firefox的录音
Chrome的视频/ Gif录制; （Firefox有一点问题，很快就会恢复）

演示：https://www.webrtc-experiment.com/RecordRTC/

从getUserMedia（）

创建.webm视频

http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

演示：http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

捕捉音频＆amp; HTML5中的视频

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 2

MediaRecorder API是您正在寻找的解决方案，

Firefox已经支持它已经有一段时间了，而嗡嗡声就是chrome会在它的下一个版本（chrome 48）中实现它，但是猜测你仍然可能需要启用实验标记，显然是我们不需要从chrome 49版获得标志，有关详细信息，请查看此chrome issue。

同时，有关如何在firefox中执行此操作的示例：

＆＃13;

var video, reqBtn, startBtn, stopBtn, ul, stream, recorder;
video = document.getElementById('video');
reqBtn = document.getElementById('request');
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
ul = document.getElementById('ul');
reqBtn.onclick = requestVideo;
startBtn.onclick = startRecording;
stopBtn.onclick = stopRecording;
startBtn.disabled = true;
ul.style.display = 'none';
stopBtn.disabled = true;

function requestVideo() {
  navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    .then(stm => {
      stream = stm;
      reqBtn.style.display = 'none';
      startBtn.removeAttribute('disabled');
      video.src = URL.createObjectURL(stream);
    }).catch(e => console.error(e));
}

function startRecording() {
  recorder = new MediaRecorder(stream, {
    mimeType: 'video/mp4'
  });
  recorder.start();
  stopBtn.removeAttribute('disabled');
  startBtn.disabled = true;
}


function stopRecording() {
  recorder.ondataavailable = e => {
    ul.style.display = 'block';
    var a = document.createElement('a'),
      li = document.createElement('li');
    a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join('');
    a.href = URL.createObjectURL(e.data);
    a.textContent = a.download;
    li.appendChild(a);
    ul.appendChild(li);
  };
  recorder.stop();
  startBtn.removeAttribute('disabled');
  stopBtn.disabled = true;
}

＆＃13;

<div>

  <button id='request'>
    Request Camera
  </button>
  <button id='start'>
    Start Recording
  </button>
  <button id='stop'>
    Stop Recording
  </button>
  <ul id='ul'>
    Downloads List:
  </ul>

</div>
<video id='video' autoplay></video>

＆＃13;

Answer 3

目前，还没有适用于通过网络录制视频的生产就绪 HTML5 解决方案。目前可用的解决方案如下：

HTML媒体捕获

适用于移动设备并使用操作系统＆＃39;视频捕获应用程序，用于捕获视频并将其上传/发布到Web服务器。您将在iOS上获得 .mov 文件（这些在Android上已经尝试过无法播放）和Android上的 .mp4和.3gp 。至少编解码器是相同的：视频的H.264和99％的设备的音频AAC。

图片由https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

提供

桌面上的Flash和媒体服务器。

Flash中的视频录制工作方式如下：从网络摄像头和麦克风捕获音频和视频数据，使用Sorenson Spark或H.264（视频）和Nellymoser Asao或Speex（音频）对其进行编码然后＃＆＃ 39;流式传输（rtmp）到媒体服务器（Red5，AMS，Wowza），并将其保存在 .flv或.f4v 文件中。

MediaStream录制提案

MediaStream Recording是由媒体捕获任务组（WebRTC和Device API工作组之间的联合任务组）提出的JS API的提议，其目的是在浏览器中进行基本的视频录制。简单。

主流浏览器不支持。如果它实现了（如果可以的话），你很可能最终得到不同的文件类型（至少.ogg和.webm）和音频/视频编解码器，具体取决于浏览器。

商业解决方案

有一些saas和软件解决方案可以处理上述部分或全部，包括addpipe.com，HDFVR，Nimbb和Cameratag。

进一步阅读：

HTML Media Capture video recording prompts in iOS9
HTML5 Video Recording涵盖HTML Media Capture和MediaStream Recording。
Pipe是视频录制的saas，也可以处理最终转换为.mp4

Answer 4

这是一个优雅的库，可以在所有受支持的浏览器中记录视频并支持上传：

https://www.npmjs.com/package/videojs-record

Answer 5

以下示例显示了如何捕获和处理HTML5中的视频帧：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Capturing & Processing Video in HTML5</title>
</head>
<body>
    <div>
        <h2>Camera Preview</h2>
        <video id="cameraPreview" width="240" height="180" autoplay></video>
        <p>
            <button id="startButton" onclick="startCapture();">Start Capture</button>
            <button id="stopButton" onclick="stopCapture();">Stop Capture</button>
        </p>
    </div>

    <div>
        <h2>Processing Preview</h2>
        <canvas id="processingPreview" width="240" height="180"></canvas>
    </div>

    <div>
        <h2>Recording Preview</h2>
        <video id="recordingPreview" width="240" height="180" autoplay controls></video>
        <p>
            <a id="downloadButton">Download</a>
        </p>
    </div>

    <script>

    const ROI_X = 250;
    const ROI_Y = 150;
    const ROI_WIDTH = 240;
    const ROI_HEIGHT = 180;
    
    const FPS = 25;
    
    let cameraStream = null;
    let processingStream = null;
    let mediaRecorder = null;
    let mediaChunks = null;
    let processingPreviewIntervalId = null;

    function processFrame() {
        let cameraPreview = document.getElementById("cameraPreview");
        
        processingPreview
            .getContext('2d')
            .drawImage(cameraPreview, ROI_X, ROI_Y, ROI_WIDTH, ROI_HEIGHT, 0, 0, ROI_WIDTH, ROI_HEIGHT);
    }
    
    function generateRecordingPreview() {
        let mediaBlob = new Blob(mediaChunks, { type: "video/webm" });
        let mediaBlobUrl = URL.createObjectURL(mediaBlob);
        
        let recordingPreview = document.getElementById("recordingPreview");
        recordingPreview.src = mediaBlobUrl;

        let downloadButton = document.getElementById("downloadButton");
        downloadButton.href = mediaBlobUrl;
        downloadButton.download = "RecordedVideo.webm";
    }
        
    function startCapture() {
        const constraints = { video: true, audio: false };
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
            cameraStream = stream;
            
            let processingPreview = document.getElementById("processingPreview");
            processingStream = processingPreview.captureStream(FPS);
            
            mediaRecorder = new MediaRecorder(processingStream);
            mediaChunks = []
            
            mediaRecorder.ondataavailable = function(event) {
                mediaChunks.push(event.data);
                if(mediaRecorder.state == "inactive") {
                    generateRecordingPreview();
                }
            };
            
            mediaRecorder.start();
            
            let cameraPreview = document.getElementById("cameraPreview");
            cameraPreview.srcObject = stream;
        
            processingPreviewIntervalId = setInterval(processFrame, 1000 / FPS);
        })
        .catch((err) => {
            alert("No media device found!");
        });
    };
    
    function stopCapture() {
        if(cameraStream != null) {
            cameraStream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        
        if(processingStream != null) {
            processingStream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        
        if(mediaRecorder != null) {
            if(mediaRecorder.state == "recording") {
                mediaRecorder.stop();
            }
        }
        
        if(processingPreviewIntervalId != null) {
            clearInterval(processingPreviewIntervalId);
            processingPreviewIntervalId = null;
        }
    };
    </script>
</body>
</html>

HTML 5视频录制和存储流

5 个答案: