第86篇 webrtc一对一学生端研究（一）

关键词：老师新建白板时学生端图片同步, 老师切换白板时学生端图片同步

一、webrtc学生端

1.1 学生端图片同步-----老师新建白板时

 思路：昨天整了一天，终于想出思路了，如下：

 老师端点新建白板时，学生端同时也触发新建白板的按钮，同时保存一张；老师端保存的是老师端的页面，学生端保存的是学生端的页面，因为学生端的页面是老师端同步过去的，页面是相同的。

1）学生端新建一个按钮

   这个按钮和老师端一样，但只是在连接建立时有效。代码如下：

<buttonid="btn-getDataURL_st" style="width:220px;font-size:36px;">白板_st</button></span>

2）学生端的这个按钮调用的函数和老师端的一样，如下：

             $('#btn-getDataURL_st').click( function(){

     

       arr_base64_img_i = $("#picWrap").children().length;

       

       saveCanvas(globelId);

       

       designer.undo('all');

       createImg(arr_base64_img_i);

       globelId = arr_base64_img_i;

     });

3）当老师端单击新建白板按钮时，向学生端发个消息，如下：

        $("#btn-getDataURL1").click(function(){

                connection.send('gdata');

              

           })

4）学生端收到这个消息时，就执行按钮的单击事件，如下：

     if(event.data === 'plz-sync-points') {

                designer.sync();

                return;

           }

           if(event.data=='start'){

                document.getElementById('end_anwser').disabled = false;

                 startTimerStudent( );

                 return;

           }else if(event.data=='end'){

                document.getElementById('end_anwser').disabled = true;

                 closeWindow( );

                 return;

           }else if(event.data=='gdata'){//老师端新建白板时

                     $("#btn-getDataURL_st").click();

                 return;

            }

以上四步，就能实现老师端和学生端图像同步，效果如下：

接下来研究，当老师端不是一直新建白板，中间进行已保存图片切换时，怎么把更改后的图片同步到学生端。

1.2 学生端图片同步-----老师切换白板时

思路：这里面又涉及到一个单击事件，比方说上面截图中4张图片，当老师点击第二张进行编辑时，这就涉及到一个点击事件。如下：

     function onImgClick(){

       

 

          saveCanvasLast(globelId);

          designer.undo('all');

          globelId = this.id.substr(14);

          designer.addImgByUrl(this.src,true);

     

          $("[name =thumbnail]").removeClass("tea_base64_select");

          $(this).addClass("tea_base64_select");

     }

当上述点击事件发生时，学生端也要跟着响应，这个模似操作和1.1的不同，因为每张图片的id是动态生成的，不能通过固定id模似单击事件，我的做法是：把老师端图片代码复制一份，改名字，服务器发消息来响应。

1）代码复制完毕，运行时，出错

  现象：切换图片无反应

  原因是：之前截取id时，代码如下：

globelIdStudent = this.id.substr(14);

之前的变量为：arr_base64_img，正好为14个，而现在的变量为：student_arr_base64_img，所以应修改代码如下：

globelIdStudent = this.id.substr(22);

2）代码复制成功，如下：

注：前4个是老师新建的白板，后4个是学生新建的白板。并且彼此之间不产生影响！

但：在切换图像之前，要对当前页面进行保存，这导致无法处理模拟单击图片事件！困局如下：

注：这是一个环，不知道什么时候向服务器发消息，让其进行模似点击图片！

3）连接时测试时，可以如下，这样可以不用每次都输入房间号，按下图F5刷新即可！

老师端：https://www.xq.com:9001/?room_id=rrr

学生端：https://www.xq.com:9001/#rrr

4）通过发消息的方式，能把imgId传到学生端。方法如下：

  发送端：

接收端：

运行结果如下：

注：当报event.data.substr不是一个函数时，说明没接收到值，因为那时还没点新建白板按钮。

2016年11月1日星期二