關鍵詞：錄製按鈕遷移合併成功,錄製往生產上放
一、一對一視頻錄製上生產
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 =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 =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字/篇