关键词：
关键词：一对一视频录制,btnStartRecording.onclick函数
一、一对一视频录制
1.1 参考网址
https://www.webrtc-experiment.com/RecordRTC/
视频录制下载网址：
https://github.com/muaz-khan/RecordRTC
1.2 研究下如下代码
我要的是如下这个：
<scriptsrc="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<scriptsrc="https://cdn.webrtc-experiment.com/screenshot.js"></script>
<divid="elementToShare"style="width:100%;height:100%;background:green;"></div>
<script>
var elementToShare =document.getElementById(‘elementToShare‘);
var recordRTC =RecordRTC(elementToShare, {
type:‘canvas‘
});
recordRTC.startRecording();
recordRTC.stopRecording(function(videoURL) {
video.src= videoURL;
var recordedBlob =recordRTC.getBlob();
recordRTC.getDataURL(function(dataURL) { });
});
</script>
注：录制网页。
1.3 视频录制API
http://recordrtc.org/RecordRTC.html
注：RecordRTC是一个WebRTC JS库，可以进行音视频的录制，并且支持谷歌、火狐、Opera、安卓及Microsoft Edge浏览器，可以运行在Linux、Mac、Windows平台上。
1.4 录制过程
1）先来一个按钮
<buttonid="btn-start-recording">开始录制</button>
2）上述按钮所依赖的函数如下：
var btnStartRecording =document.querySelector(‘#btn-start-recording‘);
这是个选择器，看下面的代码：
P280至P676行，如下：
btnStartRecording.onclick= function(event) {
var button = btnStartRecording;
if(button.innerHTML === ‘StopRecording‘) {
btnPauseRecording.style.display = ‘none‘;
button.disabled = true;
button.disableStateWaiting= true;
setTimeout(function() {
button.disabled =false;
button.disableStateWaiting = false;
}, 2000);
button.innerHTML = ‘StarRecording‘;
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;
}
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);
stopStream();
saveToDiskOrOpenNewTab(button.recordRTC);
});
}
}
return;
}
if(!event) return;
button.disabled = true;
var commonConfig = {
onMediaCaptured:function(stream) {
button.stream = stream;
if(button.mediaCapturedCallback) {
button.mediaCapturedCallback();
}
button.innerHTML =‘Stop Recording‘;
button.disabled = false;
},
onMediaStopped: function(){
button.innerHTML =‘Start Recording‘;
if(!button.disableStateWaiting) {
button.disabled =false;
}
},
onMediaCapturingFailed:function(error) {
if(error.name ===‘PermissionDeniedError‘ && !!navigator.mozGetUserMedia) {
intallFirefoxScreenCapturingExtension();
}
commonConfig.onMediaStopped();
}
};
if(mediaContainerFormat.value=== ‘h264‘) {
mimeType =‘video/webm;codecs=h264‘;
fileExtension = ‘mp4‘;
if(typeofMediaRecorder.isTypeSupported === ‘function‘) {
if(MediaRecorder.isTypeSupported(‘video/mpeg‘)) {
mimeType = ‘video/mpeg‘;
}
else {
mimeType =‘video/webm;codecs=h264‘;
}
}
}
if(mediaContainerFormat.value=== ‘vp8‘) {
mimeType =‘video/webm;codecs=vp8‘;
fileExtension = ‘webm‘;
recorderType = null;
type = ‘video‘;
}
if(mediaContainerFormat.value=== ‘vp9‘) {
mimeType =‘video/webm;codecs=vp9‘;
fileExtension = ‘webm‘;
recorderType = null;
type = ‘video‘;
}
if(mediaContainerFormat.value=== ‘pcm‘) {
mimeType = ‘audio/wav‘;
fileExtension = ‘wav‘;
recorderType =StereoAudioRecorder;
type = ‘audio‘;
}
if(mediaContainerFormat.value=== ‘opus‘) {
mimeType = ‘audio/webm‘;
fileExtension = ‘webm‘; //ogg or webm?
recorderType = null;
type = ‘audio‘;
}
if(mediaContainerFormat.value=== ‘whammy‘) {
mimeType = ‘video/webm‘;
fileExtension = ‘webm‘;
recorderType =WhammyRecorder;
type = ‘video‘;
}
if(mediaContainerFormat.value=== ‘gif‘) {
mimeType = ‘image/gif‘;
fileExtension = ‘gif‘;
recorderType = GifRecorder;
type = ‘gif‘;
}
if(recordingMedia.value ===‘record-audio‘) {
captureAudio(commonConfig);
button.mediaCapturedCallback = function() {
var options = {
type: type,
mimeType: mimeType,
leftChannel:params.leftChannel || false,
disableLogs:params.disableLogs || false
};
if(params.sampleRate) {
options.sampleRate= parseInt(params.sampleRate);
}
if(params.bufferSize) {
options.bufferSize= parseInt(params.bufferSize);
}
if(recorderType) {
options.recorderType = recorderType;
}
if(videoBitsPerSecond){
options.videoBitsPerSecond = videoBitsPerSecond;
}
button.recordRTC =RecordRTC(button.stream, options);
button.recordingEndedCallback = function(url) {
setVideoURL(url);
};
button.recordRTC.startRecording();
btnPauseRecording.style.display = ‘‘;
};
}
if(recordingMedia.value ===‘record-audio-plus-video‘) {
captureAudioPlusVideo(commonConfig);
button.mediaCapturedCallback = function() {
if(typeof MediaRecorder=== ‘undefined‘) { // opera or chrome etc.
button.recordRTC =[];
if(!params.bufferSize) {
// it fixesaudio issues whilst recording 720p
params.bufferSize = 16384;
}
var options = {
type: ‘audio‘,// hard-code to set "audio"
leftChannel:params.leftChannel || false,
disableLogs:params.disableLogs || false,
video:recordingPlayer
};
if(params.sampleRate) {
options.sampleRate= parseInt(params.sampleRate);
}
if(params.bufferSize) {
options.bufferSize = parseInt(params.bufferSize);
}
if(params.frameInterval) {
options.frameInterval = parseInt(params.frameInterval);
}
if(recorderType) {
options.recorderType = recorderType;
}
if(videoBitsPerSecond) {
options.videoBitsPerSecond = videoBitsPerSecond;
}
if(chkMultiStreamRecorder.checked=== true) {
options.previewStream = function(previewStream) {
setVideoURL(previewStream, true);
};
}
var audioRecorder =RecordRTC(button.stream, options);
options.type =type;
var videoRecorder =RecordRTC(button.stream, options);
// to sync audio/videoplaybacks in browser!
videoRecorder.initRecorder(function() {
audioRecorder.initRecorder(function() {
audioRecorder.startRecording();
videoRecorder.startRecording();
btnPauseRecording.style.display = ‘‘;
});
});
button.recordRTC.push(audioRecorder, videoRecorder);
button.recordingEndedCallback = function() {
var audio = newAudio();
audio.src =audioRecorder.toURL();
audio.controls= true;
audio.autoplay= true;
recordingPlayer.parentNode.appendChild(document.createElement(‘hr‘));
recordingPlayer.parentNode.appendChild(audio);
if(audio.paused) audio.play();
};
return;
}
var options = {
type: type,
mimeType: mimeType,
disableLogs:params.disableLogs || false,
getNativeBlob:false, // enable it for longer recordings
video:recordingPlayer
};
if(recorderType) {
options.recorderType = recorderType;
if(recorderType ==WhammyRecorder || recorderType == GifRecorder) {
options.canvas = options.video = {
width:defaultWidth || 320,
height:defaultHeight || 240
};
}
}
if(videoBitsPerSecond){
options.videoBitsPerSecond = videoBitsPerSecond;
}
if(chkMultiStreamRecorder.checked === true) {
options.previewStream = function(previewStream) {
setVideoURL(previewStream, true);
};
var width = 320;
var height = 240;
var select =document.querySelector(‘.media-resolutions‘);
var value =select.value;
if(value !=‘default‘) {
value =value.split(‘x‘);
if(value.length== 2) {
width =parseInt(value[0]);
height =parseInt(value[1]);
}
}
options.video = {
width: width,
height: height
};
}
button.recordRTC =RecordRTC(button.stream, options);
button.recordingEndedCallback = function(url) {
setVideoURL(url);
};
button.recordRTC.startRecording();
btnPauseRecording.style.display = ‘‘;
};
}
if(recordingMedia.value ===‘record-screen‘) {
captureScreen(commonConfig);
button.mediaCapturedCallback= function() {
var options = {
type: type,
mimeType: mimeType,
disableLogs:params.disableLogs || false,
getNativeBlob:false, // enable it for longer recordings
video:recordingPlayer
};
if(recorderType) {
options.recorderType = recorderType;
if(recorderType == WhammyRecorder|| recorderType == GifRecorder) {
options.canvas= options.video = {
width:defaultWidth || 320,
height: defaultHeight|| 240
};
}
}
if(videoBitsPerSecond){
options.videoBitsPerSecond = videoBitsPerSecond;
}
button.recordRTC =RecordRTC(button.stream, options);
button.recordingEndedCallback = function(url) {
setVideoURL(url);
};
button.recordRTC.startRecording();
btnPauseRecording.style.display = ‘‘;
};
}
// note: audio+tab is supportedin Chrome 50+
// todo: add audio+tabrecording
if(recordingMedia.value ===‘record-audio-plus-screen‘) {
captureAudioPlusScreen(commonConfig);
button.mediaCapturedCallback = function() {
var options = {
type: type,
mimeType: mimeType,
disableLogs:params.disableLogs || false,
getNativeBlob:false, // enable it for longer recordings
video: recordingPlayer
};
if(recorderType) {
options.recorderType = recorderType;
if(recorderType ==WhammyRecorder || recorderType == GifRecorder) {
options.canvas= options.video = {
width:defaultWidth || 320,
height: defaultHeight || 240
};
}
}
if(videoBitsPerSecond){
options.videoBitsPerSecond = videoBitsPerSecond;
}
button.recordRTC =RecordRTC(button.stream, options);
button.recordingEndedCallback = function(url) {
setVideoURL(url);
};
button.recordRTC.startRecording();
btnPauseRecording.style.display = ‘‘;
};
}
};//eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
2017年5月03日星期三
1073字金牌
铜第124篇一对一视频录制及网站注册周四
关键词：一对一视频录制,网站注册一、一对一视频录制1.1参考网址https://www.webrtc-experiment.com/RecordRTC/视频录制下载网址：https://github.com/muaz-khan/RecordRTC1.2 网页录制本地：http://localhost:9001/Canvas-Recording/webpage-recording.html 查看详情
上第164-73篇一对一canvas视频录制文件上传周二-四
关键词：一对一canvas视频录制文件上传,修改录制视频的背景色,一对一稳定性研究一、一对一视频录制1.1改变录制文件背景色1）网址老师端：https://localhost:12854/demos/index.html原版录制：http://127.0.0.1:9001/Canvas-Recording1/recCanvas.html2）... 查看详情
铜第131篇融合一对一canvas视频录制到备份上简版做成及追加图片过程周四
关键词：一对一canvas视频录制,简版做成,追加图片过程一、一对一视频录制1.1往备份上布录制-----------------bug处理现在不知道，网页录制都依赖哪些文件，现在需要一个一个的去除。现在去除差不多了，如下：经过整理发现，仅... 查看详情
第190-191篇一对一录制按钮迁移合并成功及录制往生产上放
关键词：录制按钮迁移合并成功,录制往生产上放一、一对一视频录制上生产1.1录制按钮迁移1）在本地合并就成，已找到，用12854那个，如下：1 2）现在思路 ... 查看详情
javacv开发详解之27补充篇1：摄像头画面录制成多个mp4视频分片文件，支持树莓派嵌入式安卓linux和windows等平台摄像头画面录制视频分片文件
...手册）前言在上一章中《JavaCV开发详解之27：使用javacv把视频切割成多个视频分片文件，以mp4为例，把视频切割成MP4分片文件》，我们通过javacv拉取流媒体视频流的方式录制mp4切片文件。本章在上一章基础上增加摄像头录制mp4分... 查看详情
javacv开发详解之27补充篇1：摄像头画面录制成多个mp4视频分片文件，支持树莓派嵌入式安卓linux和windows等平台摄像头画面录制视频分片文件
...手册）前言在上一章中《JavaCV开发详解之27：使用javacv把视频切割成多个视频分片文件，以mp4为例，把视频切割成MP4分片文件》，我们通过javacv拉取流媒体视频流的方式录制mp4切片文件。本章在上一章基础上增加摄像头录制mp4分... 查看详情
android开发mediarecorder使用camera1配合录制视频(代码片段)
前言 MediaRecorder可以不依靠CameraAPI实现视频的录制,但是如果需要切换摄像头/设置对焦/选择分辨率等等就需要Camera来参与配合录制视频.这篇博客将介绍使用Camera1来实现视频录制.此篇博客不在重复一些细节和坑的介绍.如果你... 查看详情
一对一培训之视频免费分享-2017-12-11-第01阶段-规划
一对一培训之视频免费分享-2017-12-11-第01阶段-规划链接：https://pan.baidu.com/s/1MOMS76xYCgth6-Mcq-d35A密码：ku3vLync项目经验（1~43）http://blog.51cto.com/dynamic 以下属付费视频，无兴趣，切记向下看！！！ ****************************** 查看详情
youcans的opencv例程200篇123.形态算法之孔洞填充(代码片段)
...学习课』系列，持续更新中【youcans的OpenCV例程200篇】123.形态算法之孔洞填充3.形态学算法形态学处理的主要应用是提取图像中用来表示和描述形状的元素和成分，例如提取边界、连通分量、凸壳和区域骨架。3.2孔洞填充... 查看详情
一对一培训之视频免费分享-2017-12-09-第03阶段-准备-基础-架构-课件
一对一培训之视频免费分享-2017-12-09-第03阶段-准备-基础-架构-课件 链接：https://pan.baidu.com/s/1tfhFr6UbJxSe9xOgI-Se_A密码：spr6 Lync项目经验（1~43）http://blog.51cto.com/dynamic 以下属付费视频，无兴趣，切记向下看！！！ ... 查看详情
android音视频开发之opengl视频录制(代码片段)
...公众号：初一十五a解锁《Android十一大板块文档》音视频大合集，从初中高到面试应有尽有;让学习更贴近未来实战。已形成PDF版十一个模块内容如下：1.2022最新Andr 查看详情
javacv开发详解之27补充篇1：使用javacv把音视频切割成多个音频分片文件，以mp3为例，把视频切割成mp3分片文件
...册）前言上一篇文章中：JavaCV开发详解之27：使用javacv把视频切割成多个视频分片文件，以mp4为例，把视频切割成MP4分片文件，我们成功的把视频切割成一个个mp4视频切片文件，很多小伙伴们在群里又开始“磨刀霍霍”问博主，... 查看详情
javacv开发详解之27补充篇1：使用javacv把音视频切割成多个音频分片文件，以mp3为例，把视频切割成mp3分片文件
...册）前言上一篇文章中：JavaCV开发详解之27：使用javacv把视频切割成多个视频分片文件，以mp4为例，把视频切割成MP4分片文件，我们成功的把视频切割成一个个mp4视频切片文件，很多小伙伴们在群里又开始“磨刀霍霍”问博主，... 查看详情
：视频直播实现之推送音频篇
音频推送流程1.音视频参数设置2.开始推流3.音频视频采集4.进行编码(生产者)5.RTMP推流（消费者）/***音频编码器配置*/setAudioOptionsaudio_encode_handle=faacEncOpen(sampleRateInHz,numChannels,&nInputSamples,&nMaxOutputBytes);i 查看详情
：视频直播实现之推送视频篇
...264编码框架H264码流文件分为两层：(1)VCL(VideoCodingLayer)视频编码层：负责高效的视频内容表示，VCL数据即编码处理的输出，它表示被压缩编码后的视频数据序列。(2)NAL(NetworkAbstractionLayer)网络提取层：负责以网络... 查看详情
c#实现录制屏幕
以前写过两篇录制麦克风语音和摄像头视频的文章（实现语音视频录制、在服务器端录制语音视频），最近有朋友问，如果要实现屏幕录制这样的功能，该怎么做了？实际上原理是差不多的，如果了解了我前面两篇文章中介绍的... 查看详情
mysql数据篇之多表操作-----保姆级教程(代码片段)
...的关系一对多的建表原则多对多的关系多对多的建表原则一对一的例子一对一的建表原则多表案例分析多表查询多表查询分类1.连接查询交叉连接:crossjoin内连接：innerjoin（inner）可以省略外连接---outerjoin(outer可以省略)... 查看详情
如何访问当前正在录制的视频的长度
】如何访问当前正在录制的视频的长度【英文标题】：HowcanIaccessthelengthofthevideothatisCURRENTLYbeingrecorded【发布时间】：2018-12-2622:04:27【问题描述】：我有一个iOS相机应用程序，当用户开始按住一个按钮时，我想开始录制，并且在该... 查看详情