首页 > 代码库 > 第190-191篇 一对一录制按钮迁移合并成功及录制往生产上放
第190-191篇 一对一录制按钮迁移合并成功及录制往生产上放
关键词：录制按钮迁移合并成功,录制往生产上放
一、一对一视频录制上生产
1.1 录制按钮迁移
1）在本地合并就成，已找到，用12854那个，如下：
1
2）现在思路
现在思路是index.html中引入录制白板的功能，它的一些需要参数，逐个获取如下：
首先获取canvas的尺寸如下：
这个思路不可行呀。
3）实现了，如下：
实现思路iframe获取父页面元素。
2
相关代码如下：
var recorder;
var _iframe =window.parent;
var _div=_iframe.document.getElementById(‘start_anwser‘);
_div.onclick =function() {
document.getElementById(‘start‘).disabled = true;
//-----------------------microphone+canvasrecording----------------------------begin------------//
navigator.mediaDevices.getUserMedia({
audio: true
}).then(function(microphone) {
var canvasStream = window.canvasElementToBeRecorded.captureStream();
//console.log(‘canvasStream0628: ‘,canvasStream);
microphone.getAudioTracks().forEach(function(audioTrack) {
canvasStream.addTrack(audioTrack);
});
// now you can record "canvasStream" which include"microphone" tracks as well
recorder = RecordRTC(canvasStream, {
type: ‘video‘
});
recorder.startRecording();
});
//-----------------------microphone+canvas recording----------------------------end------------//
setTimeout(function() {
document.getElementById(‘stop‘).disabled = false;
}, 1000);
};
注：有个感想是，做开发，要找出问题的症结，看能不能实现，有没有实现的先例，别乱搜，这个问题就是iframe读取父元素，搜其它的也没用。
4）怎么获取一个元素的属性？
能获取到了，如下：
var _iframe = window.parent;
var _div =_iframe.document.getElementById(‘start_anwser‘);
_div.onclick = function() {
if($(this).attr("t") == "start"){
console.log(‘ssssssssssssssssssssssssssssss‘,$(this).attr("t"));
//startRecordFun();
}else{
console.log(‘eeeeeeeeeeeeeeeeeeee‘,$(this).attr("t"));
}
}
5）iframe子页面获取父页面的方法不太好
主要是无法实现当开始计费变为结束答疑时，不能准确的获取其属性t=’start/end’，从而应用开始录制和停止录制。
现在采取的办法是：iframe父页面获取子页面的方法，如下：
参考网址：http://www.jb51.net/article/25629.htm
3
实现代码如下：-------------------index.html中
$("#start_anwser").click(function() {
//console.log("start_anwser");
if($(this).attr("t") == "start") {
canvasIframe.window.recorderStartQhz();
$(this).attr("t", "end");
$(this).children("p").children("img").attr("src","/static/img/close_c.png");
$(this).children("span").text("结束答疑");
startTutor();
} else if($(this).attr("t") == "end") {
canvasIframe.window.recorderStopQhz();
endTutor();
}
});
-------------------widget.html中:
functionrecorderStartQhz() {
var recorder;
document.getElementById(‘start-record-btn‘).disabled= true;
navigator.mediaDevices.getUserMedia({
audio: true
}).then(function(microphone) {
var canvasStream =window.canvasElementToBeRecorded.captureStream();
// console.log(‘window.canvasElementToBeRecorded:‘,window.canvasElementToBeRecorded);
//console.log(‘canvasStream0628: ‘,canvasStream);
microphone.getAudioTracks().forEach(function(audioTrack) {
canvasStream.addTrack(audioTrack);
});
// now you canrecord "canvasStream" which include "microphone" tracks aswell
recorder =RecordRTC(canvasStream, {
type: ‘video‘
});
recorder.startRecording();
});
setTimeout(function(){
document.getElementById(‘stop-record-btn‘).disabled = false;
}, 1000);
};
function recorderStopQhz(){
document.getElementById(‘stop-record-btn‘).disabled = true;
setTimeout(function() {
recorder.stopRecording(function() {
var timestamp =(new Date()).valueOf();
filename=‘17701328814‘+timestamp;
filen=‘qhz‘+timestamp;
console.log("this.getBlob()",this.getBlob());
this.save(filen);
//invokeSaveAsDialog(this.getBlob(), filename);
var blob =this.getBlob();
var video =document.createElement(‘video‘);
video.src =http://www.mamicode.com/URL.createObjectURL(blob);
console.log(‘video.src-->‘,video.src);
video.setAttribute(‘style‘, ‘height: 100%;color:white; position:absolute; top:0; left:0;z-index:9999;width:100%;‘);
document.body.appendChild(video);
video.controls= true;
video.play();
});
}, 100);
};
-----------------------------canvas-designer-widget.js中：
designer.appendTo =function(parentNode) {
designer.iframe =document.createElement(‘iframe‘);
designer.iframe.name = ‘canvasIframe‘;
designer.iframe.src =http://www.mamicode.com/designer.widgetHtmlURL + ‘?widgetJsURL=‘ + designer.widgetJsURL + ‘&tools=‘+ JSON.stringify(tools) + ‘&selectedIcon=‘ +selectedIcon+‘&recordflag=‘+designer.flag;
designer.iframe.style.width = ‘100%‘;
designer.iframe.style.height = ‘100%‘;
designer.iframe.style.border = 0;
console.log(‘iframe-qhz->: ‘,designer.iframe);
window.removeEventListener(‘message‘, onMessage);
window.addEventListener(‘message‘, onMessage, false);
parentNode.appendChild(designer.iframe);
};
1.2 往生产上合
1）文件夹比较如下：
4
2017年7月9-10日星期日至一
676字 两篇 378字/篇
第190-191篇 一对一录制按钮迁移合并成功及录制往生产上放