mapbox-gl帧播放监控
Posted lilei2blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mapbox-gl帧播放监控相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src=‘dist/mapbox-gl-dev.js‘></script> <link href=‘dist/mapbox-gl.css‘ rel=‘stylesheet‘ /> <script src="js/Detector.js"></script> <script src="js/stats.min.js"></script> <!-- <script src=‘https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js‘></script> <link href=‘https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css‘ rel=‘stylesheet‘ /> --> <title>Document</title> <style> html, body { width: 100%; height: 100%; } html, body { margin: 0; padding: 0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> #features { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; overflow: auto; background: rgba(255, 255, 255, 0.8); } #map canvas { cursor: crosshair; } </style> <div id=‘map‘></div> <div id="container"></div> <script> var container = document.getElementById( ‘container‘ ); var stats = new Stats(); container.appendChild( stats.domElement ); var style = { "version": 8, "name": "Empty", //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": {}, "layers": [ { "id": "background", "type": "background", "paint": { "background-color": "rgba(0,0,0,1)" } } ] } //mapboxgl.accessToken = ‘pk.eyJ1IjoibGlsZWlqb3JkYW4iLCJhIjoiY2luc2Z1a2UxMTEybnUya2pheDdwZjhxOSJ9._ENu7hjywKHQZMcj9S24vA‘; var map = new mapboxgl.Map({ container: ‘map‘, // container id style: style, center: [102.62968,37.91256], zoom: 13.8, pitch: 60, maxZoom:17, minZoom:3, }); map.on(‘load‘,function(){ map.addSource(‘poi‘,{ "type": "vector", "tiles": ["http://localhost:8001/c1/{z}/{x}/{y}"] }) map.addLayer({ "id": "mapillary", "type": "circle", "source": ‘poi‘, "source-layer": "gps", "filter": ["==","tim",0], ‘paint‘: { "circle-color": "#00ff00", "circle-radius": 3 } }); var m = 0 render() function render(){ m += 1 if (m >= 20) m = 0 map.removeLayer(‘mapillary‘) map.addLayer({ "id": "mapillary", "type": "circle", "source": ‘poi‘, "source-layer": "gps", "filter": ["==","tim",m], ‘paint‘: { "circle-color": "#00ff00", "circle-radius": 3 } }); stats.update(); } map.on(‘move‘,function(){ stats.update(); }) function animate(){ map.setFilter(‘mapillary‘,["==","tim",m]); m += 1 if (m >= 20) m = 0 stats.update(); requestAnimationFrame(animate) } animate(); }) </script> </body> </html>
Detector.js:
/** * @author alteredq / http://alteredqualia.com/ * @author mr.doob / http://mrdoob.com/ */ var Detector = { canvas: !! window.CanvasRenderingContext2D, webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( ‘canvas‘ ).getContext( ‘experimental-webgl‘ ); } catch( e ) { return false; } } )(), workers: !! window.Worker, fileapi: window.File && window.FileReader && window.FileList && window.Blob, getWebGLErrorMessage: function () { var element = document.createElement( ‘div‘ ); element.id = ‘webgl-error-message‘; element.style.fontFamily = ‘monospace‘; element.style.fontSize = ‘13px‘; element.style.fontWeight = ‘normal‘; element.style.textAlign = ‘center‘; element.style.background = ‘#fff‘; element.style.color = ‘#000‘; element.style.padding = ‘1.5em‘; element.style.width = ‘400px‘; element.style.margin = ‘5em auto 0‘; if ( ! this.webgl ) { element.innerHTML = window.WebGLRenderingContext ? [ ‘Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />‘, ‘Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.‘ ].join( ‘ ‘ ) : [ ‘Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>‘, ‘Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.‘ ].join( ‘ ‘ ); } return element; }, addGetWebGLMessage: function ( parameters ) { var parent, id, element; parameters = parameters || {}; parent = parameters.parent !== undefined ? parameters.parent : document.body; id = parameters.id !== undefined ? parameters.id : ‘oldie‘; element = Detector.getWebGLErrorMessage(); element.id = id; parent.appendChild( element ); } };
stats.min.js:
// stats.js - http://github.com/mrdoob/stats.js var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};
以上是关于mapbox-gl帧播放监控的主要内容，如果未能解决你的问题，请参考以下文章
视频播放压缩的相关知识点：I帧P帧B帧RTMP协议RTSP协议GB28181协议等学习记录
Qt编写的项目作品8-RTSP播放器+视频监控(vlc版本)