1

我正在尝试使用 getusermedia 录制网络摄像头视频。

我跟着这个链接

如何使用 getusermedia 将视频捕获到服务器

我们如何知道视频是否真的被录制了。webcamstream.record 是否正常工作？

4

3 回答 3

1

功能后备（e）{ video.src = 'fallbackvideo.webm'; }

函数成功（流）{ video.src = window.URL.createObjectURL（流）；}

if (!navigator.getUserMedia) { fallback(); } else {
navigator.getUserMedia({video: true}, success, fallback); }

在这里您可以获得更多信息： http ://www.html5rocks.com/en/tutorials/getusermedia/intro/

于 2013-11-12T08:45:20.550 回答
0

这是用于录制视频并将其保存到本地以及将其发送到服务器的完整工作代码............：注意：根据您的需要编辑此代码...... ……

 <html>
        <div class="left">
            <div id="startButton" class="button">
            Start
            </div>
            <h2>Preview</h2>
            <video id="preview" width="160" height="120" autoplay muted></video>
        </div>

        <div class="right">
            <div id="stopButton" class="button">
            Stop
            </div>
            <h2>Recording</h2>
            <video id="recording" width="160" height="120" controls></video>
            <a id="downloadButton" class="button">
            Download
            </a>
        </div>

        <script>

        let preview = document.getElementById("preview");
        let recording = document.getElementById("recording");
        let startButton = document.getElementById("startButton");
        let stopButton = document.getElementById("stopButton");
        let downloadButton = document.getElementById("downloadButton");
        let logElement = document.getElementById("log");

        let recordingTimeMS = 5000;


        function log(msg) {
            //logElement.innerHTML += msg + "\n";
        }

        function wait(delayInMS) {
            return new Promise(resolve => setTimeout(resolve, delayInMS));
        }

        function startRecording(stream, lengthInMS) {
            let recorder = new MediaRecorder(stream);
            let data = [];

            recorder.ondataavailable = event => data.push(event.data);
            recorder.start();
            log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");

            let stopped = new Promise((resolve, reject) => {
            recorder.onstop = resolve;
            recorder.onerror = event => reject(event.name);
            });

            let recorded = wait(lengthInMS).then(
            () => recorder.state == "recording" && recorder.stop()
            );

            return Promise.all([
                stopped,
                recorded
            ])
            .then(() => data);
        }

        function stop(stream) {
            stream.getTracks().forEach(track => track.stop());
        }

        startButton.addEventListener("click", function() {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            }).then(stream => {
                    preview.srcObject = stream;
                    downloadButton.href = stream;
                    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
                    return new Promise(resolve => preview.onplaying = resolve);
                  }).then(() => startRecording(preview.captureStream(), recordingTimeMS))
                  .then (recordedChunks => {
                    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });

                 //upload it to server part start............................

/*you have **recordedBlob**  data that is nothing but video data which is getting recorded you can send this data directly to server */

                 //Here I am writing sample code to send it to server
                  //making request
                   var xhr = new XMLHttpRequest();
                   //creating form data to append files
                   var fd = new FormData();
                   //append the recorded blob
                   fd.append("video",recordedBlob);
                 //send data to server..............
                   xhr.send(fd);

                 //upload it to server part finish............................

                    recording.src = URL.createObjectURL(recordedBlob);  
                    downloadButton.href = recording.src;
                    downloadButton.download = "RecordedVideo.webm";

                    log("Successfully recorded " + recordedBlob.size + " bytes of " +
                        recordedBlob.type + " media.");
                  })
                  .catch(log);
            }, false);


            stopButton.addEventListener("click", function() {
            stop(preview.srcObject);
            }, false);

        </script>
    </html>
于 2019-07-01T12:12:56.707 回答
0

您链接到的问题中的示例使用定期从画布上拍摄的帧/图片，最后转换为webm使用 Whammy。生成的视频没有声音。

幸运的是，您现在可以同时使用两者：

  • 客户端媒体记录器 API和
  • 服务器端WebRTC 流录制。

两者都依赖于浏览器的原生视频/音频编码功能，并得到 Chrome 和 Firefox 的广泛支持。

有关更多详细信息/代码/链接，请参阅此答案。

于 2016-11-07T16:06:35.980 回答