第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 =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字/篇