TensorFlow
web yolo串流檢測
這邊有攝影機版的串流檢測可以玩https://nihui.github.io/ncnn-webassembly-yolov5/
他主要來源來自ncnn-webassembly-yolov5 他方便的是你不用另外安裝有的沒的，把他當一般網頁JS丟到你伺服器去就可以跑了，github寫得很複雜..，因為他是走WebAssembly模式，所以yolo運算都是在使用者端，伺服器根本不浩效能，也因為在使用者端運算，所以你的yolo權重檔使用者會下載一分到她裝置去，所以使用者就算網路斷了也是可以繼續辨識就是。
不過我想把它改成串流板的，基本上所需檔案跟上面攝影機版的都一樣
你會需要下列檔案，這些檔案上面網址都可以抓的到
- wasmFeatureDetect.js
- yolov5-simd.data
- yolov5-simd.js
- yolov5-simd.wasm
之後我們要改串流板的程式碼改成下面這樣即可
<html lang="en">
<!-- ncnn webassembly yolov5 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>ncnn webassembly yolov5</title>
<style>
video {
/* position: absolute; */
/* visibility: hidden; */
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<h1>門口yolo 範例</h1>
<div>
<canvas id="canvas" width="640"></canvas>
</div>
<img id="video" src="http://127.0.0.1/weby/s.php">
</div>
<script src="wasmFeatureDetect.js"></script>
<script type='text/javascript'>
var Module = {};
var has_simd;
var has_threads;
var wasmModuleLoaded = false;
var wasmModuleLoadedCallbacks = [];
Module.onRuntimeInitialized = function() {
wasmModuleLoaded = true;
for (var i = 0; i < wasmModuleLoadedCallbacks.length; i++) {
wasmModuleLoadedCallbacks[i]();
}
}
wasmFeatureDetect.simd().then(simdSupported => {
has_simd = simdSupported;
wasmFeatureDetect.threads().then(threadsSupported => {
has_threads = threadsSupported;
if (has_simd)
{
if (has_threads)
{
yolov5_module_name = 'yolov5-simd-threads';
}
else
{
yolov5_module_name = 'yolov5-simd';
}
}
else
{
if (has_threads)
{
yolov5_module_name = 'yolov5-threads';
}
else
{
yolov5_module_name = 'yolov5-basic';
}
}
console.log('load ' + yolov5_module_name);
var yolov5wasm = yolov5_module_name + '.wasm';
var yolov5js = yolov5_module_name + '.js';
fetch(yolov5wasm)
.then(response => response.arrayBuffer())
.then(buffer => {
Module.wasmBinary = buffer;
var script = document.createElement('script');
script.src = yolov5js;
script.onload = function() {
console.log('Emscripten boilerplate loaded.');
}
document.body.appendChild(script);
});
});
});
var shouldFaceUser = true;
var stream = null;
var w = 640;
var h = 480;
var dst = null;
var resultarray = null;
var resultbuffer = null;
//開始
var isStreaming = false;
video = document.getElementById('video');
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
if (!isStreaming) {
// videoWidth isn't always set correctly in all browsers
if (video.videoWidth > 0) h = video.videoHeight / (video.videoWidth / w);
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
isStreaming = true;
}
//Setup image memory
var id = ctx.getImageData(0, 0, canvas.width, canvas.height);
var d = id.data;
if (wasmModuleLoaded) {
mallocAndCallSFilter();
} else {
wasmModuleLoadedCallbacks.push(mallocAndCallSFilter);
}
function mallocAndCallSFilter() {
if (dst != null)
{
_free(dst);
dst = null;
}
dst = _malloc(d.length);
//console.log("What " + d.length);
sFilter();
}
///999
function ncnn_yolov5() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
HEAPU8.set(data, dst);
_yolov5_ncnn(dst, canvas.width, canvas.height);
var result = HEAPU8.subarray(dst, dst + data.length);
imageData.data.set(result);
ctx.putImageData(imageData, 0, 0);
}
//Request Animation Frame function
var sFilter = function() {
if (video.paused || video.ended) return;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(video, 0, 0, w, h);
//
//
ncnn_yolov5();
window.requestAnimationFrame(sFilter);
}
</script>
</body>
</html>
裡面會看到有一行http://127.0.0.1/weby/s.php 這就是串流的來源，你可以放一些mjpeg的串流來源在這邊即可
Be the First to comment.
About Author
DAVIDOU
一個不務正業，甚麼科技產品都玩的網路宅宅。 If you want to find me,that's easy! I will always on the Internet. so just find me, follow me. I will show you everything fun.
我的社群網路
