<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" 控件></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或者其他软件测试一下地址的有效 }; 窗户。onbeforeunload = function () { webRtcServer.disconnect(); }; </script> </head> <body> <div style="width: 100%; height: 100%"> <video style="width: 1920px; height: 1080px" id="video1" autoplay="autoplay"静音 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: "我已连接!",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 16:24:57 浏览: 163
你可以在收到数据后,将数据解析为 JSON 格式,然后遍历数据中的每个对象,计算出对应的密码框位置和大小,最后使用 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);
}
});
```
上述代码中,我们使用 `JSON.parse()` 方法将接收到的数据解析为 JSON 格式,然后遍历数据中的每个对象,计算出对应的密码框位置和大小。最后,使用 `ctx.strokeRect()` 方法在 Canvas 上绘制矩形框。
阅读全文