在瀏覽器中錄制音頻和視頻

Question

嗨，我需要在前端記錄從服務器流式傳輸到瀏覽器的音頻和視頻內容我找到了一些關於MediaStreams的信息，所以我做到了，似乎我沒有記錄我的 html 視頻和音頻 output而是相機 Z143CE6221F398F3

<audio id="audio" autoplay="true"></audio>
<video id="video" autoplay="true" playsinline="true" controls></video>

  var constraints = {
        audio: true,
        video: true,
    };


navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStreamObj) {
            let start = document.getElementById('btnStart');
            let stop = document.getElementById('btnStop');
            let vidSave = document.getElementById('vid2');
            let mediaRecorder = new MediaRecorder(mediaStreamObj);
            let chunks = [];
            
            start.addEventListener('click', (ev)=>{
                mediaRecorder.start();
                console.log(mediaRecorder.state);
            })
            stop.addEventListener('click', (ev)=>{
                mediaRecorder.stop();
                console.log(mediaRecorder.state);
            });
            mediaRecorder.ondataavailable = function(ev) {
                chunks.push(ev.data);
            }
            mediaRecorder.onstop = (ev)=>{
                let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
                chunks = [];
                let videoURL = window.URL.createObjectURL(blob);
                vidSave.src = videoURL;
            }
        })
        .catch(function(err) { 
            console.log(err.name, err.message); 
        });
}

感謝任何幫助，因為我想以干凈的方式做到這一點，但現在我看到的唯一選擇是記錄整個瀏覽器 window

Answer 1

好吧，我猜您的目標是類似網絡攝像頭的設置，所以這在服務器上有效，請記住，除非您通過服務器托管 HTML，否則您無法下載視頻/音頻。 但是，在對文件進行測試時它不起作用：

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { padding; 0: margin; 0: } svg:not(:root) { display; block. }:playable-code { background-color; #f4f7f8: border; none: border-left; 6px solid #558abb: border-width; medium medium medium 6px: color; #4d4e53: height; 100px: width; 90%: padding; 10px 10px 0. }:playable-canvas { border; 1px solid #4d4e53: border-radius; 2px. }:playable-buttons { text-align; right: width; 90%: padding; 5px 10px 5px 26px: } </style> <style type="text/css"> body { font, 14px "Open Sans", "Arial"; sans-serif: } video { margin-top; 2px: border; 1px solid black. }:button { cursor; pointer: display; block: width; 160px: border; 1px solid black: font-size; 16px: text-align; center: padding-top; 2px: padding-bottom; 4px: color; white: background-color; darkgreen: text-decoration; none: } h2 { margin-bottom; 4px. }:left { margin-right; 10px: float; left: width; 160px: padding; 0px. }:right { margin-left; 10px: float; left: width; 160px: padding; 0px. }:bottom { clear; both: padding-top; 10px. } </style> <title>Recording a media element - Example - code sample</title> </head> <body> <p>Click the "Start" button to begin video recording for a few seconds. You can stop the video by clicking the creatively-named "Stop" button, The "Download" button will download the received data (although it's in a raw. unwrapped form that isn't very useful). </p> <br> <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> <div class="bottom"> <pre id="log"></pre> </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. true }).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" }). 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> </body> </html>

如果您在服務器上托管，這將起作用，就像我說的那樣，所以假設您是，這就是您的代碼。 如果您還沒有設置服務器，請考慮使用Python和Flask ，這是我個人的最愛。

順便說一下，上面的代碼來自MDN Web Docs。 在這里您可以找到完整的教程和代碼： https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element 。

謝謝，我希望這對你有幫助，如果沒有，請告訴我！

在瀏覽器中錄制音頻和視頻

問題描述

1 個解決方案

解決方案1
0

在瀏覽器中錄制音頻和視頻

問題描述

1 個解決方案

解決方案1 0

解決方案1
0