62

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>

保存ボタンのクリック時にストリームを保存したい。

4

5 に答える 5

44

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

HTML5 でオーディオとビデオをキャプチャする

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

于 2013-08-29T11:32:45.197 に答える
21

MediaRecorder APIは、あなたが探しているソリューションです。

Firefox はしばらく前からサポートしており、Chrome が次のリリース (Chrome 48) で実装する予定だという噂がありますが、まだ実験的フラグを有効にする必要があるかもしれません。 Chrome バージョン 49。詳細については、このChrome の問題を確認してください。

一方、Firefox でそれを行う方法のサンプル:

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;
}
<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>

于 2015-12-14T03:28:43.957 に答える
10

現在、Web 経由でビデオを録画するための本番対応のHTML5 のみのソリューションはありません。現在利用可能なソリューションは次のとおりです。

HTML メディア キャプチャ

モバイル デバイスで動作し、OS のビデオ キャプチャ アプリを使用してビデオをキャプチャし、Web サーバーにアップロード/投稿します。iOS では.movファイル (これらは私が試した Android では再生できません)、Android では.mp4 と .3gpを取得します。少なくともコーデックは同じです。デバイスの 99% で、ビデオは H.264、オーディオは AAC です。

HTML メディア キャプチャ

画像提供: https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

デスクトップ上の Flash およびメディア サーバー。

Flash でのビデオ録画は次のように機能します。オーディオとビデオのデータは Web カメラとマイクからキャプチャされ、Sorenson Spark または H.264 (ビデオ) と Nellymoser Asao または Speex (オーディオ) を使用してエンコードされ、メディア サーバーにストリーミング (rtmp) されます。 (Red5、AMS、Wowza) .flv または .f4vファイルに保存されます。

MediaStream Recording の提案

MediaStream Recording は、Media Capture Task Force (WebRTC と Device APIs ワーキング グループ間の合同タスク フォース) による、ブラウザでの基本的なビデオ録画を非常にシンプルにすることを目的とした JS API の提案です。

主要なブラウザではサポートされていません。それが実装されると (実装される場合)、ブラウザーに応じて異なるファイル タイプ (少なくとも .ogg と .webm) とオーディオ/ビデオ コーデックが使用される可能性が高くなります。

商用ソリューション

addpipe.com、HDFVR、Nimbb、Cameratag など、上記の一部またはすべてを処理する SaaS およびソフトウェア ソリューションがいくつかあります。

参考文献：

于 2015-10-08T15:55:05.600 に答える
3

次の例は、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>

于 2020-10-20T19:00:59.070 に答える