如何使用HTML&J设置保存捕获视频的默认路径

2024-06-25 23:19:34 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在尝试使用MediaRecorderAPI和HTML和Java脚本来进行眨眼检测,我已经捕获了视频,并用我的正常下载路径下载了它,这是我的默认浏览器路径,我已经通过了我的视频和检测眨眼。但我的问题是,我想在我的项目中创建一个目录下载捕获的视频。有谁能帮我。。。提前感谢:)

这是我的html索引.html以及主要.js地址:

'use strict'; /* globals MediaRecorder */ // Spec is at http://dvcs.w3.org/hg/dap/raw-file/tip/media-stream-capture/RecordingProposal.html navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (getBrowser() == "Chrome") { var constraints = { "audio": true, "video": { "mandatory": { "minWidth": 640, "maxWidth": 640, "minHeight": 480, "maxHeight": 480 }, "optional": [] } }; //Chrome did not support the new constraints spec until 59 for video and 60 for audio } else if (getBrowser() == "Firefox") { var constraints = { audio: true, video: { width: { min: 640, ideal: 640, max: 640 }, height: { min: 480, ideal: 480, max: 480 } } }; //Firefox } var recBtn = document.querySelector('button#rec'); var pauseResBtn = document.querySelector('button#pauseRes'); var stopBtn = document.querySelector('button#stop'); var videoElement = document.querySelector('video'); var dataElement = document.querySelector('#data'); var downloadLink = document.querySelector('a#downloadLink'); videoElement.controls = false; function errorCallback(error) { console.log('navigator.getUserMedia error: ', error); } /* var mediaSource = new MediaSource(); mediaSource.addEventListener('sourceopen', handleSourceOpen, false); var sourceBuffer; */ var mediaRecorder; var chunks = []; var count = 0; function startRecording(stream) { log('Start recording...'); if (typeof MediaRecorder.isTypeSupported == 'function') { /* MediaRecorder.isTypeSupported is a function announced in https://developers.google.com/web/updates/2016/01/mediarecorder and later introduced in the MediaRecorder API spec http://www.w3.org/TR/mediastream-recording/ */ if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) { var options = { mimeType: 'video/webm;codecs=vp9' }; } else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) { var options = { mimeType: 'video/webm;codecs=h264' }; } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) { var options = { mimeType: 'video/webm;codecs=vp8' }; } log('Using ' + options.mimeType); mediaRecorder = new MediaRecorder(stream, options); } else { log('isTypeSupported is not supported, using default codecs for browser'); mediaRecorder = new MediaRecorder(stream); } pauseResBtn.textContent = "Pause"; mediaRecorder.start(10); var url = window.URL || window.webkitURL; videoElement.src = url ? url.createObjectURL(stream) : stream; videoElement.play(); mediaRecorder.ondataavailable = function(e) { //log('Data available...'); //console.log(e.data); //console.log(e.data.type); //console.log(e); chunks.push(e.data); }; mediaRecorder.onerror = function(e) { log('Error: ' + e); console.log('Error: ', e); }; mediaRecorder.onstart = function() { log('Started & state = ' + mediaRecorder.state); }; mediaRecorder.onstop = function() { var dt = new Date(); var day = dt.getDate(); var month = dt.getMonth() + 1; var year = dt.getFullYear(); var hour = dt.getHours(); var mins = dt.getMinutes(); // var dot =dot.getDot(); var postfix = day + "." + month + "." + year + "_" + hour + "." + mins; log('Stopped & state = ' + mediaRecorder.state); var blob = new Blob(chunks, { type: "video/mp4" }); chunks = []; // xhr.open("GET", "/favicon.png"); var videoURL = window.URL.createObjectURL(blob); downloadLink.href = videoURL; videoElement.src = videoURL; downloadLink.innerHTML = 'Download video file'; var rand = Math.floor((Math.random() * 10000000)); // var location =("D:/mine project/Media-Recorder-API-Demo-master/video" + rand + postfix+ ".mp4"); var name = ("video" + "_" + rand + "_" + postfix + ".mp4"); // var name = ("D:/mine project/Media-Recorder-API-Demo-master"+"video_"+rand+".mp4") ; downloadLink.setAttribute("download", name); downloadLink.setAttribute("name", name); }; mediaRecorder.onpause = function() { log('Paused & state = ' + mediaRecorder.state); } mediaRecorder.onresume = function() { log('Resumed & state = ' + mediaRecorder.state); } mediaRecorder.onwarning = function(e) { log('Warning: ' + e); }; } //function handleSourceOpen(event) { // console.log('MediaSource opened'); // sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"'); // console.log('Source buffer: ', sourceBuffer); //} function onBtnRecordClicked() { if (typeof MediaRecorder === 'undefined' || !navigator.getUserMedia) { alert('MediaRecorder not supported on your browser, use Firefox 30 or Chrome 49 instead.'); } else { navigator.getUserMedia(constraints, startRecording, errorCallback); recBtn.disabled = true; pauseResBtn.disabled = false; stopBtn.disabled = false; } } function onBtnStopClicked() { mediaRecorder.stop(); videoElement.controls = true; recBtn.disabled = false; pauseResBtn.disabled = true; stopBtn.disabled = true; } function onPauseResumeClicked() { if (pauseResBtn.textContent === "Pause") { console.log("pause"); pauseResBtn.textContent = "Resume"; mediaRecorder.pause(); stopBtn.disabled = true; } else { console.log("resume"); pauseResBtn.textContent = "Pause"; mediaRecorder.resume(); stopBtn.disabled = false; } recBtn.disabled = true; pauseResBtn.disabled = false; } function log(message) { dataElement.innerHTML = dataElement.innerHTML + '<br>' + message; } //browser ID function getBrowser() { var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var browserName = navigator.appName; var fullVersion = '' + parseFloat(navigator.appVersion); var majorVersion = parseInt(navigator.appVersion, 10); var nameOffset, verOffset, ix; // In Opera, the true version is after "Opera" or after "Version" if ((verOffset = nAgt.indexOf("Opera")) != -1) { browserName = "Opera"; fullVersion = nAgt.substring(verOffset + 6); if ((verOffset = nAgt.indexOf("Version")) != -1) fullVersion = nAgt.substring(verOffset + 8); } // In MSIE, the true version is after "MSIE" in userAgent else if ((verOffset = nAgt.indexOf("MSIE")) != -1) { browserName = "Microsoft Internet Explorer"; fullVersion = nAgt.substring(verOffset + 5); } // In Chrome, the true version is after "Chrome" else if ((verOffset = nAgt.indexOf("Chrome")) != -1) { browserName = "Chrome"; fullVersion = nAgt.substring(verOffset + 7); } // In Safari, the true version is after "Safari" or after "Version" else if ((verOffset = nAgt.indexOf("Safari")) != -1) { browserName = "Safari"; fullVersion = nAgt.substring(verOffset + 7); if ((verOffset = nAgt.indexOf("Version")) != -1) fullVersion = nAgt.substring(verOffset + 8); } // In Firefox, the true version is after "Firefox" else if ((verOffset = nAgt.indexOf("Firefox")) != -1) { browserName = "Firefox"; fullVersion = nAgt.substring(verOffset + 8); } // In most other browsers, "name/version" is at the end of userAgent else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) { browserName = nAgt.substring(nameOffset, verOffset); fullVersion = nAgt.substring(verOffset + 1); if (browserName.toLowerCase() == browserName.toUpperCase()) { browserName = navigator.appName; } } // trim the fullVersion string at semicolon/space if present if ((ix = fullVersion.indexOf(";")) != -1) fullVersion = fullVersion.substring(0, ix); if ((ix = fullVersion.indexOf(" ")) != -1) fullVersion = fullVersion.substring(0, ix); majorVersion = parseInt('' + fullVersion, 10); if (isNaN(majorVersion)) { fullVersion = '' + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } return browserName; }
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#fff">
  <base target="_blank">
  <title>Media Recorder API Demo</title>
  <link rel="stylesheet" href="../css/main.css" />
  <style>
    a#downloadLink {
      display: block;
      margin: 0 0 1em 0;
      min-height: 1.2em;
    }
    
    p#data {
      min-height: 6em;
    }
  </style>
</head>

<body>
  <div id="container">
    <div style="text-align:center;">
      <h1>Media Recorder API Demo </h1>
      <video controls autoplay></video><br>
      <button id="rec" onclick="onBtnRecordClicked()">Record</button>
      <button id="pauseRes" onclick="onPauseResumeClicked()" disabled>Pause</button>
      <button id="stop" onclick="onBtnStopClicked()" disabled>Stop</button>
    </div>
    <a id="downloadLink" name="mediarecorder.mp4" download=""></a>
    <p id="data"></p>
    <script src="../js/main.js"></script>
  </div>
</body>

</html>

Tags: logtruenavigatorifvarvideofunctionelse