利用RecordRTC打开手机或者电脑摄像头,进行录像,完成后对视频文件进行压缩。
github地址:
https://github.com/muaz-khan/RecordRTC
git上的例子是比较复杂的,会对各种摄像参数进行选择和处理。这里提供一个简单并且能实现录像功能的例子。
页面:
<div style="width: 75%;" id="recording-player"></div>
<button id="btn-start-recording" ng-click="videoCapture()">开始</button>
<button id="save-to-disk">保存</button>
操作处理的js代码如下:
var video = document.createElement('video');
video.controls = false;
var mediaElement = getHTMLMediaElement(video, {
buttons: ['full-screen'/!*, 'take-snapshot'*!/],
showOnMouseEnter: false,
width: 360,
});
document.getElementById('recording-player').appendChild(mediaElement);
var div = document.createElement('section');
mediaElement.media.parentNode.appendChild(div);
div.appendChild(mediaElement.media);
var recordingPlayer = mediaElement.media;
var btnStartRecording = document.querySelector('#btn-start-recording');
var saveRecording = document.querySelector('#save-to-disk');
var mimeType = 'video/webm';
var fileExtension = 'webm';
var recorderType = null;
var type = 'video';
var videoBitsPerSecond = null;
var button = btnStartRecording;
function getURL(arg) {
var url = arg;
if(arg instanceof Blob || arg instanceof File) {
url = URL.createObjectURL(arg);
}
if(arg instanceof RecordRTC || arg.getBlob) {
url = URL.createObjectURL(arg.getBlob());
}
if(arg instanceof MediaStream || arg.getTracks || arg.getVideoTracks || arg.getAudioTracks) {
// url = URL.createObjectURL(arg);
}
return url;
}
function setVideoURL(arg, forceNonImage) {
var url = getURL(arg);
var parentNode = recordingPlayer.parentNode;
parentNode.removeChild(recordingPlayer);
parentNode.innerHTML = '';
var elem = 'video';
recordingPlayer = document.createElement(elem);
if(arg instanceof MediaStream) {
recordingPlayer.muted = true;
}
recordingPlayer.addEventListener('loadedmetadata', function() {
if(navigator.userAgent.toLowerCase().indexOf('android') == -1) return;
// android
setTimeout(function() {
if(typeof recordingPlayer.play === 'function') {
recordingPlayer.play();
}
}, 2000);
}, false);
recordingPlayer.poster = '';
if(arg instanceof MediaStream) {
recordingPlayer.srcObject = arg;
}
else {
recordingPlayer.src = url;
}
if(typeof recordingPlayer.play === 'function') {
recordingPlayer.play();
}
recordingPlayer.addEventListener('ended', function() {
url = getURL(arg);
if(arg instanceof MediaStream) {
recordingPlayer.srcObject = arg;
}
else {
recordingPlayer.src = url;
}
});
parentNode.appendChild(recordingPlayer);
}
button.mediaCapturedCallback = function() {
var options = {
type: type,
mimeType: mimeType,
getNativeBlob: false, // enable it for longer recordings
video: recordingPlayer
};
options.ignoreMutedMedia = false;
button.recordRTC = RecordRTC(button.stream, options);
button.recordingEndedCallback = function(url) {
setVideoURL(url);
};
button.recordRTC.startRecording();
}
var commonConfig = {
onMediaCaptured: function(stream) {
button.stream = stream;
if(button.mediaCapturedCallback) {
button.mediaCapturedCallback();
}
button.innerHTML = "停止";
button.disabled = false;
},
onMediaStopped: function() {
button.innerHTML = "开始";
if(!button.disableStateWaiting) {
button.disabled = false;
}
},
onMediaCapturingFailed: function(error) {
console.error('onMediaCapturingFailed:', error);
if(error.toString().indexOf('no audio or video tracks available') !== -1) {
alert('RecordRTC failed to start because there are no audio or video tracks available.');
}
if(DetectRTC.browser.name === 'Safari') return;
if(error.name === 'PermissionDeniedError' && DetectRTC.browser.name === 'Firefox') {
alert('Firefox requires version >= 52. Firefox also requires HTTPs.');
}
commonConfig.onMediaStopped();
}
};
function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
if(mediaConstraints.video == true) {
mediaConstraints.video = {};
}
navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(stream) {
successCallback(stream);
setVideoURL(stream, true);
}).catch(function(error) {
if(error && error.name === 'ConstraintNotSatisfiedError') {
alert('Your camera or browser does NOT supports selected resolutions or frame-rates. \n\nPlease select "default" resolutions.');
}
errorCallback(error);
});
}
function addStreamStopListener(stream, callback) {
var streamEndedEvent = 'ended';
if ('oninactive' in stream) {
streamEndedEvent = 'inactive';
}
stream.addEventListener(streamEndedEvent, function() {
callback();
callback = function() {};
}, false);
stream.getAudioTracks().forEach(function(track) {
track.addEventListener(streamEndedEvent, function() {
callback();
callback = function() {};
}, false);
});
stream.getVideoTracks().forEach(function(track) {
track.addEventListener(streamEndedEvent, function() {
callback();
callback = function() {};
}, false);
});
}
function captureAudioPlusVideo(config) {
captureUserMedia({video: true, audio: true}, function(audioVideoStream) {
config.onMediaCaptured(audioVideoStream);
if(audioVideoStream instanceof Array) {
audioVideoStream.forEach(function(stream) {
addStreamStopListener(stream, function() {
config.onMediaStopped();
});
});
return;
}
addStreamStopListener(audioVideoStream, function() {
config.onMediaStopped();
});
}, function(error) {
config.onMediaCapturingFailed(error);
});
}
function stopStream() {
if(button.stream && button.stream.stop) {
button.stream.stop();
button.stream = null;
}
if(button.stream instanceof Array) {
button.stream.forEach(function(stream) {
stream.stop();
});
button.stream = null;
}
videoBitsPerSecond = null;
var html = 'Recording status: stopped';
html += '<br>Size: ' + bytesToSize(button.recordRTC.getBlob().size);
}
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth() + 1;
var date = d.getUTCDate();
return 'RecordRTC-' + year + month + date + '-' + fileExtension;
}
function saveToDiskOrOpenNewTab(recordRTC) {
/!*if(!recordRTC.getBlob().size) {
var info = getFailureReport();
console.log('blob', recordRTC.getBlob());
console.log('recordrtc instance', recordRTC);
console.log('report', info);
if(mediaContainerFormat.value !== 'default') {
alert('RecordRTC seems failed recording using ' + mediaContainerFormat.value + '. Please choose "default" option from the drop down and record again.');
}
else {
alert('RecordRTC seems failed. Unexpected issue. You can read the email in your console log. \n\nPlease report using disqus chat below.');
}
if(mediaContainerFormat.value !== 'vp9' && DetectRTC.browser.name === 'Chrome') {
alert('Please record using VP9 encoder. (select from the dropdown)');
}
}*!/
var fileName = getFileName(fileExtension);
saveRecording.onclick = function(event) {
if(!recordRTC) return alert('No recording found.');
var file = new File([recordRTC.getBlob()], fileName, {
type: mimeType
});
invokeSaveAsDialog(file, file.name);
}
}
//操作录像
btnStartRecording.onclick = function(event) {
if(button.innerHTML === "停止") {
button.disabled = true;
button.disableStateWaiting = true;
setTimeout(function() {
button.disabled = false;
button.disableStateWaiting = false;
}, 2000);
button.innerHTML = '开始';
if(button.recordRTC) {
if(button.recordRTC.length) {
button.recordRTC[0].stopRecording(function(url) {
if(!button.recordRTC[1]) {
button.recordingEndedCallback(url);
stopStream();
saveToDiskOrOpenNewTab(button.recordRTC[0]);
return;
}
button.recordRTC[1].stopRecording(function(url) {
button.recordingEndedCallback(url);
stopStream();
});
});
}
else {
button.recordRTC.stopRecording(function(url) {
button.recordingEndedCallback(url);
saveToDiskOrOpenNewTab(button.recordRTC);
stopStream();
});
}
}
return;
}
captureAudioPlusVideo(commonConfig);
}
在你的index文件中需要引入两个相关文件:
<link href="https://cdn.webrtc-experiment.com/getHTMLMediaElement.css" rel="stylesheet">
<script src="https://cdn.webrtc-experiment.com/getHTMLMediaElement.js"></script>
还需要引入RecordRTC.js。这个从git上就可以找到。
以上是从git上扒下来的部分代码,可以简单实现录像,并将视频文件压缩的功能