![本地商店视频]( "本地商店视频")
本文介绍了本地商店视频 webRTC的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用了链接(此处)中的信息并获得了以下代码，这有助于我使用网络摄像头录制视频.该代码允许我录制视频并使其可供下载.但是，我想将录制的视频自动保存到本地文件夹.我怎样才能做到这一点?
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script><section class="experiment"><div class="inner"><button style="float: right;"id="fit-to-screen">适合屏幕！</button><label for="canvas-width-input">画布宽度</label><input type="text" id="canvas-width-input" value="320"><br/><label for="canvas-height-input">画布高度</label><input type="text" id="canvas-height-input" value="240"><br/><div><button id="record-video">Record</button><button id="pause-resume-video" disabled>Pause</button><button id="stop-recording-video" disabled>Stop</button><小时><h2 id="video-url-preview"></h2><br><input type="checkbox" id="record-screen" style="width:auto;"><label for="record-screen">Record Screen</label><br><video id="video" 自动播放循环控制静音></video>
</节><脚本>(功能() {无功参数 = {},r =/([^&=]+)=?([^&]*)/g;函数 d(s) {返回 decodeURIComponent(s.replace(/\+/g, ' '));}var match, search = window.location.search;while (match = r.exec(search.substring(1)))参数[d(match[1])] = d(match[2]);window.params = params;})();<脚本>函数 getByID(id) {返回 document.getElementById(id);}var recordVideo = getByID('record-video'),pauseResumeVideo = getByID('pause-resume-video'),stopRecordingVideo = getByID('stop-recording-video');var canvasWidth_input = getByID('canvas-width-input'),canvasHeight_input = getByID('canvas-height-input');如果(params.canvas_width){canvasWidth_input.value = params.canvas_width;}如果(params.canvas_height){canvasHeight_input.value = params.canvas_height;}var video = getByID('video');var videoConstraints = {音频:假，视频: {强制的: {}，可选的: []}};<脚本>var screen_constraints;函数 isCaptureScreen(回调){if (document.getElementById('record-screen').checked) {document.getElementById('fit-to-screen').onclick();getScreenId(function (error, sourceId, _screen_constraints) {如果(错误 === '未安装'){window.open('https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk');}if(error === '权限被拒绝') {alert('截屏权限被拒绝.');}如果(错误 === '安装禁用'){alert('请启用 Chrome 屏幕捕获扩展.');}如果(_screen_constraints){screen_constraints = _screen_constraints.video;videoConstraints = _screen_constraints;}别的 {videoConstraints = screen_constraints;}打回来();});}别的 {打回来();}}recordVideo.onclick = function() {isCaptureScreen(function() {recordVideoOrGIF(true);});};功能 recordVideoOrGIF(isRecordVideo) {navigator.getUserMedia(videoConstraints, function(stream) {video.onloadedmetadata = function() {video.width = canvasWidth_input.value ||320;video.height = canvasHeight_input.value ||240;变量选项 = {类型: isRecordVideo ?'视频':'gif'，视频:视频，帆布: {宽度:canvasWidth_input.value，高度:canvasHeight_input.value},disableLogs: params.disableLogs ||错误的，recorderType: null//让 RecordRTC 自己选择相关类型};recorder = window.RecordRTC(stream, options);recorder.startRecording();video.onloadedmetadata = false;};video.src = URL.createObjectURL(stream);}， 功能() {if (document.getElementById('record-screen').checked) {if (location.protocol === 'http:')alert(' 是捕获屏幕所必需的.');别的alert('不允许多屏截屏.截屏过程被拒绝.是否启用标志:在 getUserMedia 中启用截屏支持"?');} 别的alert('网络摄像头访问被拒绝.');});window.isAudio = false;如果(isRecordVideo){recordVideo.disabled = true;stopRecordingVideo.disabled = false;pauseResumeVideo.disabled = false;}}stopRecordingVideo.onclick = function() {this.disabled = true;recordVideo.disabled = false;如果(录音机)recorder.stopRecording(function(url) {video.src = url;视频播放()；document.getElementById('video-url-preview').innerHTML = '<a href="' + url + '" target="_blank">录制的视频网址</a>';});};<脚本>document.getElementById('fit-to-screen').onclick = function() {this.disabled = true;video.width = canvasWidth_input.value = innerWidth;video.height = canvasHeight_input.value = innerHeight;};
解决方案
您必须使用 recorder.getBlob() 方法来获取视频文件的实际 blob，然后将其发送到您的服务器然后将其保存到文件中:
javascript:
stopRecordingVideo.onclick = function() {this.disabled = true;recordVideo.disabled = false;如果(录音机)recorder.stopRecording(function(url) {video.src = url;视频播放()；var RecordedBlob = recorder.getBlob();var formData = new FormData();formData.append("videofile", RecordedBlob);var xhr = new XMLHttpRequest();xhr.open("POST", "savevideofile.php");xhr.send(formData);document.getElementById('video-url-preview').innerHTML = '<a href="' + url + '>录制的视频网址</a>';});};
savevideofile.php:
I used the the information from the link (here) and got the following code, which helps me to record a video with my webcam. The code allows me to record a video and makes it available to download. However, I want to save the recorded video automatically to a local folder. How can I do that?
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<section class="experiment">
<div class="inner">
<button style="float: right;" id="fit-to-screen">Fit to Screen!</button>
<label for="canvas-width-input">Canvas Width</label>
<input type="text" id="canvas-width-input" value="320">
<br />
<label for="canvas-height-input">Canvas Height</label>
<input type="text" id="canvas-height-input" value="240">
<br />
<div>
<button id="record-video">Record</button>
<button id="pause-resume-video" disabled>Pause</button>
<button id="stop-recording-video" disabled>Stop</button>
<hr>
<h2 id="video-url-preview"></h2>
<br>
<input type="checkbox" id="record-screen" style="width:auto;">
<label for="record-screen">Record Screen</label>
<br>
<video id="video" autoplay loop controls muted></video>
</div>
</div>
</section>
<script>
(function() {
var params = {},
r = /([^&=]+)=?([^&]*)/g;
function d(s) {
return decodeURIComponent(s.replace(/\+/g, ' '));
}
var match, search = window.location.search;
while (match = r.exec(search.substring(1)))
params[d(match[1])] = d(match[2]);
window.params = params;
})();
</script>
<script>
function getByID(id) {
return document.getElementById(id);
}
var recordVideo = getByID('record-video'),
pauseResumeVideo = getByID('pause-resume-video'),
stopRecordingVideo = getByID('stop-recording-video');
var canvasWidth_input = getByID('canvas-width-input'),
canvasHeight_input = getByID('canvas-height-input');
if(params.canvas_width) {
canvasWidth_input.value = params.canvas_width;
}
if(params.canvas_height) {
canvasHeight_input.value = params.canvas_height;
}
var video = getByID('video');
var videoConstraints = {
audio: false,
video: {
mandatory: {},
optional: []
}
};
</script>
<script>
var screen_constraints;
function isCaptureScreen(callback) {
if (document.getElementById('record-screen').checked) {
document.getElementById('fit-to-screen').onclick();
getScreenId(function (error, sourceId, _screen_constraints) {
if(error === 'not-installed') {
window.open('https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk');
}
if(error === 'permission-denied') {
alert('Screen capturing permission is denied.');
}
if(error === 'installed-disabled') {
alert('Please enable chrome screen capturing extension.');
}
if(_screen_constraints) {
screen_constraints = _screen_constraints.video;
videoConstraints = _screen_constraints;
}
else {
videoConstraints = screen_constraints;
}
callback();
});
}
else {
callback();
}
}
recordVideo.onclick = function() {
isCaptureScreen(function() {
recordVideoOrGIF(true);
});
};
function recordVideoOrGIF(isRecordVideo) {
navigator.getUserMedia(videoConstraints, function(stream) {
video.onloadedmetadata = function() {
video.width = canvasWidth_input.value || 320;
video.height = canvasHeight_input.value || 240;
var options = {
type: isRecordVideo ? 'video' : 'gif',
video: video,
canvas: {
width: canvasWidth_input.value,
height: canvasHeight_input.value
},
disableLogs: params.disableLogs || false,
recorderType: null // to let RecordRTC choose relevant types itself
};
recorder = window.RecordRTC(stream, options);
recorder.startRecording();
video.onloadedmetadata = false;
};
video.src = URL.createObjectURL(stream);
}, function() {
if (document.getElementById('record-screen').checked) {
if (location.protocol === 'http:')
alert('<https> is mandatory to capture screen.');
else
alert('Multi-capturing of screen is not allowed. Capturing process is denied. Are you enabled flag: "Enable screen capture support in getUserMedia"?');
} else
alert('Webcam access is denied.');
});
window.isAudio = false;
if (isRecordVideo) {
recordVideo.disabled = true;
stopRecordingVideo.disabled = false;
pauseResumeVideo.disabled = false;
}
}
stopRecordingVideo.onclick = function() {
this.disabled = true;
recordVideo.disabled = false;
if (recorder)
recorder.stopRecording(function(url) {
video.src = url;
video.play();
document.getElementById('video-url-preview').innerHTML = '<a href="' + url + '" target="_blank">Recorded Video URL</a>';
});
};
</script>
<script>
document.getElementById('fit-to-screen').onclick = function() {
this.disabled = true;
video.width = canvasWidth_input.value = innerWidth;
video.height = canvasHeight_input.value = innerHeight;
};
</script>
解决方案
You will have to use the recorder.getBlob() method to get the actual blob of the video file, then send it to your server which will then save it to a file :
javascript:
stopRecordingVideo.onclick = function() {
this.disabled = true;
recordVideo.disabled = false;
if (recorder)
recorder.stopRecording(function(url) {
video.src = url;
video.play();
var recordedBlob = recorder.getBlob();
var formData = new FormData();
formData.append("videofile", recordedBlob);
var xhr = new XMLHttpRequest();
xhr.open("POST", "savevideofile.php");
xhr.send(formData);
document.getElementById('video-url-preview').innerHTML = '<a href="' + url + '>Recorded Video URL</a>';
});
};
savevideofile.php:
<?php
if($_FILES['videofile']){
$my_file = $_FILES['videofile'];
$my_blob = file_get_contents($my_file['tmp_name']);
file_put_contents('/path/to/your/file.webm', $my_blob);
}
?>
这篇关于本地商店视频 webRTC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！