<html> <head> <script src="/libs/adapter.min.js"></script> <script src="/webrtcstreamer.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.6.1/socket.io.js"></script> <video id="video" src="example.mp4" controls></video> <canvas id="canvas"></canvas> <script> var webRtcServer = null; window.onload = function () { webRtcServer = new WebRtcStreamer("video1", "http://192.168.6.199:8000"); //这里填你自己部署的WebRtcStreamer服务地址 webRtcServer.connect("rtsp://admin:ztjg1234@183.67.25.102:8554/Streaming/Channels/2501", "", "rtptransport=tcp&timeout=60"); //这里填可以正常预览的rtsp地址,可以先使用vlc或其他软件测试一下地址的有效性 }; window.onbeforeunload = function () { webRtcServer.disconnect(); }; </script> </head> <body> <div style="width: 100%; height: 100%"> <video style="width: 1920px; height: 1080px" id="video1" autoplay="autoplay" muted playsinline></video> </div> </body> </html> <script> var socket = null; function initWebSocket() { socket = io.connect("ws://192.168.6.199:5001/echo", { timeout: 300000, }); socket.on("connect", () => { console.log("建立链接"); socket.emit("videocv", {data: "I'm connected!",sid:socket.id,url:'rtsp://admin:ztjg1234@183.67.25.102:8554/Streaming/Channels/2501'}); }); socket.on("disconnect", () => { console.log("连接断开"); }); socket.on("mydata", (msg) => { // 接受数据 console.log(msg); }); } initWebSocket(); </script>这是一段yolov5前端接收数据的代码,如何利用传出的数据画出识别框,写出相应代码
时间: 2024-01-03 22:25:09 浏览: 133
bootstrap.min.css
可以通过canvas绘图来画出识别框,具体代码如下:
```
// 获取canvas对象
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 监听接受到的数据
socket.on("mydata", (msg) => {
// 解析数据
var data = JSON.parse(msg);
// 绘制识别框
for (var i = 0; i < data.length; i++) {
var obj = data[i];
var x = obj.xmin * canvas.width;
var y = obj.ymin * canvas.height;
var w = (obj.xmax - obj.xmin) * canvas.width;
var h = (obj.ymax - obj.ymin) * canvas.height;
ctx.strokeRect(x, y, w, h);
}
});
```
这段代码会监听`mydata`事件,当接收到数据后,会解析数据并绘制识别框。其中,`xmin`、`ymin`、`xmax`、`ymax`为识别框的坐标信息,通过乘以canvas的宽高来得到具体的像素值。`ctx.strokeRect`函数用于绘制矩形框。
阅读全文