PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > 编程杂谈 > 正文

    如何用百度媒体云视频服务实现(安卓,ios)移动端播放摄像头

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:公司给北京精彩乐现科技有限公司做一个企业网站,里面有个在线看看功能,就是在移动端或pc端调用客户端的摄像头,pc调用很简单,今天分享一...
    公司给北京精彩乐现科技有限公司做一个企业网站,里面有个在线看看功能,就是在移动端或pc端调用客户端的摄像头,pc调用很简单,今天分享一下移动端的代码。
    1. <script>   
    2.     var liveUrl = 'https://pcs.baidu.com/rest/2.0/pcs/device?method=liveplay&shareid={$shareid}&uk={$uk}&type=hls';  
    3.     var poster = "http://pcs.baidu.com/rest/2.0/pcs/device?method=thumbnailurl&shareid={$shareid}&uk={$uk}";  
    4.       
    5.     var _width = $(window).width();  
    6.     var _height = parseInt(_width*9/16);  
    7.     var _top_margin = parseInt(($(window).height() - _height)/3);  
    8.     $(".player").css({"width":_width,"height":_height,"margin-top":_top_margin});  
    9.     loadVideo();  
    10.     function loadVideo(){  
    11.         $.ajax({  
    12.             url:liveUrl,  
    13.             dataType:'jsonp',  
    14.             jsonpCallback:'jsonpCallback',  
    15.             success:function(data){  
    16.               
    17.                 var raw_id = /id\s=\s"[a-zA-Z\d]+"/.exec(data.div);  
    18.                 var raw_src = /src\s=\s"[.:\/_a-zA-Z=\?\&\d]+"/.exec(data.div);  
    19.                 if(raw_src[0].toLowerCase().indexOf('m3u8')==-1){  
    20.                     loadVideo();  
    21.                     return false;  
    22.                 }  
    23.                 var id = raw_id[0].slice(6,-1);  
    24.                 var src = raw_src[0].slice(7,-1);  
    25.               
    26.                 $("video").prop({"id":id,"src":src,"poster":poster});  
    27.                 init_player(_width,_height,id);  
    28.                 /*$("video")[0].play();
    29.                 var playTimer = setInterval(function(){  
    30.                     $("video")[0].paused?$("video")[0].play():clearInterval(playTimer);  
    31.                 },50)*/ 
    32.                 $(".device-name,.header span").text(data.description);  
    33.             }  
    34.         })  
    35.     }  
    36.     function init_player(width,height,ele) {  
    37.         if(typeof(width) == "number" && typeof(height) == "number") {  
    38.             $("#"+ele).css({"width":width,"height":height});  
    39.         }  
    40.     }  
    41.     $(function(){  
    42.         var count = 0;  
    43.         /*检查是否在百度app中 www.bcty365.com*/ 
    44.         if (isBdBox()) {  
    45.             if (isIphone()) {  
    46.                 $(function () {  
    47.                     checkBLightApp();  
    48.                 });  
    49.             }  
    50.         }else{  
    51.             $(".header").show();  
    52.             $(".header-title-icon").css('top',function(){  
    53.                         return parseInt(($(".header p").height()-46)/2);  
    54.                     }()).click(function(){  
    55.                 window.history.back();  
    56.             })  
    57.         }  
    58.         function isBdBox() {  
    59.             /* 判断userAgent是否包含baiduboxapp www.bcty365.com*/ 
    60.             return navigator.userAgent.search(/baiduboxapp/) != -1;  
    61.         }  
    62.         function checkBLightApp() {  
    63.             count++;  
    64.             if (!hideTitlebar() && count < 80) {  
    65.                 setTimeout(checkBLightApp, 40);  
    66.             }  
    67.         }  
    68.         function hideTitlebar() {  
    69.             if ((typeof BLightApp !== 'undefined')) {  
    70.                 $(".header").hide();  
    71.                 return true;  
    72.             }  
    73.             return false;  
    74.         }  
    75.         function isIphone() {  
    76.             return navigator.userAgent.search(/iPhone/) != -1;  
    77.         }  
    78.     });  
    79.    
    80.    
    81.       
    82. </script> 

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-74-1761-1.html
    相关热词搜索: