第70篇一对多之addImgByUrl优化及学生端实时传输白板到老师端及头像下面添加姓名

关键词：私聊时自动切换到共享白板, 头像下面添加姓名, 学生端实时传输白板到老师端, addImgByUrl优化

一、加载控制语音视频代码

1.1 测试平台

1）本地服务器运行平台

老师端：https://localhost:9101/demos/index.html?roomid=888&t=600

学生一：

https://localhost:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888

学生二：                   

https://localhost:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888

学生三：

https://localhost:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888

2）备用服务器运行平台

老师端：https://123.57.206.36:9101/demos/index.html?roomid=888&t=600

学生一：

https://123.57.206.36:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888

学生二：                   

https://123.57.206.36:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888

学生三：

https://123.57.206.36:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888

1.2私聊时自动切换到共享白板

已实现，代码如下：-------------student.html

    if(event.data.uid == connection.localMediaStreamId ){//单个通话

               connection.renegotiate(connection.sessionid);

                //单独辅导作业时，要辅导的学生切换到共享白板

                toSharedWB();

               

                return;

           }

注：只是在单独通话时，把那个指定学生切换到共享白板即可。

1.3头像下面添加姓名

1）修改接口文件----------classroom.php

a)修改学生端跳转链接

$tTurorUrl = ST_More_URL .'?token='.$token.'#'.$classRes['room_num'];

$tTurorUrl =

ST_More_URL .'?token='.$token.'#'.$classRes['room_num'].'stuNameMoblie='.$user['full_name']?$user['full_name']:$user['mobile'];

上述写法通不过，改为如下：

$tTurorUrl =

ST_More_URL .'?token='.$token.'&stuNameMoblie='.$user['full_name'].'?'.$user['full_name'].':'.$user['mobile'].'#'.$classRes['room_num'];

经测试不行，最终改为如下：

if(!empty($user['full_name'])){

$tTurorUrl =

ST_More_URL.'?token='.$token.'&stuNameMoblie='.$user['full_name'].'#'.$classRes['room_num'];

 }else{

$tTurorUrl =

ST_More_URL .'?token='.$token.'&stuNameMoblie='.$user['mobile'].'#'.$classRes['room_num'];

 }

注:在学生端的跳转地址上加上个手机号，默认的是学生的全名，全名没有的话，显示手机号，接口所在的文件夹为：/app/web/api/v1/application/controllers/classroom

b)学生端获取学生的手机号或全名------student.html

1.4 学生端实时传输白板到老师端

  1）描述

     现在有一个需求是：老师端需要实时获取学生端的私有白板，包括写完的（整张）和没写完的（半张），用定时器实现了，如下：

2）老师点击图片，上传到白板，但不能立即同步到学生端，需要在白板上写一笔才能同步到学生端

  修改addImgByUrl函数，代码如下：--------------widget.min.js

   function addImgByUrl(url,restore){

       var image = new Image();

       image.onload = function() {

           var index = imageHandler.images.length;

                          varx = restore?0:80;

                          vary = restore?0:20;

                          varimgW = restore?image.width:400;

                          varingH = restore?image.height:400*(image.height/image.width);

                          imageHandler.lastImageURL= image.src, imageHandler.lastImageIndex = index,imageHandler.images.push(image),drawHelper.image(tempContext,[imageHandler.lastImageURL, x, y, imgW, ingH, imageHandler.lastImageIndex]),

                          points[points.length] =

 ["image", [imageHandler.lastImageURL,x, y, imgW, ingH,imageHandler.lastImageIndex],drawHelper.getOptions()],is.isImage = true,anchorStack.push(points.length),restore?find("pencil-icon").click():find("drag-last-path").click()

       };

       image.crossOrigin = 'anonymous';

       image.src = url;

}

上面的红字部分修改为：

    function addImgByUrl(url,restore){

        var image = new Image();

        image.onload = function() {

            var index =imageHandler.images.length;

                          var x = restore?0:80;

                          var y = restore?0:20;

                          var imgW =restore?image.width:400;

                          var ingH =restore?image.height:400*(image.height/image.width);

                          imageHandler.lastImageURL= image.src, imageHandler.lastImageIndex = index,imageHandler.images.push(image),drawHelper.image(tempContext, [imageHandler.lastImageURL,x, y, imgW, ingH, imageHandler.lastImageIndex]),

                          points[points.length] =

 ["image",[imageHandler.lastImageURL, x, y, imgW, ingH,imageHandler.lastImageIndex],drawHelper.getOptions()],is.isImage = true,anchorStack.push(points.length),find("drag-last-path").click(),restore&& dragHelper.confirm()

        };

        image.crossOrigin = 'anonymous';

        image.src = url;

    }

2017年3月11日星期六