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.

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

(若看不到驗證碼,請重新整理網頁。)