{"id":36269,"date":"2025-12-12T01:41:38","date_gmt":"2025-12-11T22:41:38","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36269"},"modified":"2025-12-12T01:41:38","modified_gmt":"2025-12-11T22:41:38","slug":"opencv-jse-baslangic","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/","title":{"rendered":"OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7"},"content":{"rendered":"<p><body><\/p>\n<p>Bilgisayar g\u00f6r\u00fc\u015f\u00fc (Computer Vision), makinelerin dijital g\u00f6r\u00fcnt\u00fc ve videolardan anlaml\u0131 bilgiler \u00e7\u0131kararak d\u00fcnyay\u0131 &#8220;g\u00f6rmesini&#8221; ve yorumlamas\u0131n\u0131 sa\u011flayan bir yapay zeka alan\u0131d\u0131r. G\u00fcn\u00fcm\u00fczde otonom ara\u00e7lardan y\u00fcz tan\u0131maya, t\u0131bbi g\u00f6r\u00fcnt\u00fclemeden art\u0131r\u0131lm\u0131\u015f ger\u00e7ekli\u011fe kadar pek \u00e7ok alanda kar\u015f\u0131m\u0131za \u00e7\u0131kan bilgisayar g\u00f6r\u00fc\u015f\u00fc, web tabanl\u0131 uygulamalar i\u00e7in de giderek daha \u00f6nemli hale gelmektedir.<\/p>\n<p>JavaScript ekosistemi, web taray\u0131c\u0131lar\u0131n\u0131n g\u00fcc\u00fc ve yayg\u0131nl\u0131\u011f\u0131 sayesinde bilgisayar g\u00f6r\u00fc\u015f\u00fc yeteneklerini do\u011frudan istemci taraf\u0131na ta\u015f\u0131ma konusunda b\u00fcy\u00fck bir potansiyel sunar. \u0130\u015fte bu noktada <strong>OpenCV.js<\/strong> devreye girer. OpenCV (Open Source Computer Vision Library), bilgisayar g\u00f6r\u00fc\u015f\u00fc alan\u0131nda en pop\u00fcler ve kapsaml\u0131 k\u00fct\u00fcphanelerden biridir. C++ ile yaz\u0131lm\u0131\u015f bu g\u00fc\u00e7l\u00fc k\u00fct\u00fcphanenin WebAssembly (WASM) teknolojisi sayesinde JavaScript ortam\u0131na ta\u015f\u0131nm\u0131\u015f hali olan OpenCV.js, web geli\u015ftiricilerinin taray\u0131c\u0131da karma\u015f\u0131k g\u00f6r\u00fcnt\u00fc i\u015fleme ve analiz g\u00f6revlerini ger\u00e7ekle\u015ftirmesine olanak tan\u0131r.<\/p>\n<p>Bu rehberde, OpenCV.js kullanarak JavaScript ile bilgisayar g\u00f6r\u00fc\u015f\u00fcne nas\u0131l ba\u015flayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Temel kurulumdan g\u00f6r\u00fcnt\u00fc y\u00fcklemeye, gri tonlamaya \u00e7evirmeden kenar tespitine kadar bir\u00e7ok konuyu pratik kod \u00f6rnekleriyle ele alacak, ayr\u0131ca ger\u00e7ek zamanl\u0131 uygulamalar ve performans ipu\u00e7lar\u0131 hakk\u0131nda da bilgiler edineceksiniz.<\/p>\n<h2>OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7<\/h2>\n<p>OpenCV.js ile \u00e7al\u0131\u015fmaya ba\u015flamak olduk\u00e7a basittir. Temel olarak bir HTML sayfas\u0131, OpenCV.js k\u00fct\u00fcphanesini y\u00fckleyen bir <code><script><\/code> etiketi ve kendi JavaScript kodunuzu i\u00e7eren ba\u015fka bir <code><script><\/code> etiketi yeterlidir.<\/p>\n<h3>Temel HTML ve JavaScript Yap\u0131s\u0131<\/h3>\n<p>\u0130lk olarak, <code>index.html<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m. Bu dosya, g\u00f6r\u00fcnt\u00fclerimizi g\u00f6sterece\u011fimiz bir <code><img><\/code> etiketi, i\u015flenmi\u015f g\u00f6r\u00fcnt\u00fcleri g\u00f6sterece\u011fimiz bir <code><canvas><\/code> etiketi ve JavaScript kodumuz i\u00e7in gerekli script referanslar\u0131n\u0131 i\u00e7erecek.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>OpenCV.js ile Bilgisayar G\u00f6r\u00fc\u015f\u00fc<\/title>\n    <style>\n        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; }\n        img, canvas { max-width: 600px; margin: 10px; border: 1px solid #ccc; }\n    <\/style>\n<\/head>\n<body>\n    <h2>OpenCV.js ile G\u00f6r\u00fcnt\u00fc \u0130\u015fleme<\/h2>\n\n    <p>Orijinal G\u00f6r\u00fcnt\u00fc:<\/p>\n    <img decoding=\"async\" id=\"imageSrc\" alt=\"Y\u00fcklenecek G\u00f6r\u00fcnt\u00fc\" src=\"https:\/\/picsum.photos\/600\/400\">\n\n    <p>\u0130\u015flenmi\u015f G\u00f6r\u00fcnt\u00fc:<\/p>\n    <canvas id=\"imageCanvas\"><\/canvas>\n\n    <!-- OpenCV.js k\u00fct\u00fcphanesini y\u00fckleyin -->\n    <script async src=\"https:\/\/docs.opencv.org\/4.x\/opencv.js\" onload=\"onOpenCvReady()\"><\/script>\n\n    <!-- Kendi JavaScript kodunuz -->\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<p>Yukar\u0131daki HTML dosyas\u0131nda dikkat etmeniz gereken birka\u00e7 \u00f6nemli nokta var:<\/p>\n<ul>\n<li><code><img id=\"imageSrc\"><\/code>: \u0130\u015flemek istedi\u011fimiz orijinal g\u00f6r\u00fcnt\u00fcy\u00fc g\u00f6sterecek. <code>src<\/code> \u00f6zelli\u011fine istedi\u011finiz bir g\u00f6rselin URL'sini verebilirsiniz.<\/li>\n<li><code><canvas id=\"imageCanvas\"><\/code>: \u0130\u015flenmi\u015f g\u00f6r\u00fcnt\u00fcy\u00fc g\u00f6sterece\u011fimiz yer.<\/li>\n<li><code><script async src=\"https:\/\/docs.opencv.org\/4.x\/opencv.js\" onload=\"onOpenCvReady()\"><\/code>: Bu sat\u0131r, OpenCV.js k\u00fct\u00fcphanesini CDN \u00fczerinden asenkron olarak y\u00fckler. <code>async<\/code> \u00f6zelli\u011fi sayfan\u0131n di\u011fer i\u00e7eriklerinin y\u00fcklenmesini engellemez. <code>onload=\"onOpenCvReady()\"<\/code> ise k\u00fct\u00fcphane tamamen y\u00fcklendi\u011finde ve kullan\u0131ma haz\u0131r oldu\u011funda <code>onOpenCvReady<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131r. Bu, OpenCV.js ile \u00e7al\u0131\u015fmaya ba\u015flamak i\u00e7in kritik bir ad\u0131md\u0131r.<\/li>\n<li><code><script src=\"script.js\"><\/code>: Kendi JavaScript kodunuzu i\u00e7eren dosya. Bu dosya, <code>onOpenCvReady<\/code> fonksiyonunu ve g\u00f6r\u00fcnt\u00fc i\u015fleme mant\u0131\u011f\u0131n\u0131 i\u00e7erecek.<\/li>\n<\/ul>\n<p>\u015eimdi <code>script.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m ve OpenCV.js'in y\u00fcklenmesini bekleyen temel yap\u0131y\u0131 ekleyelim:<\/p>\n<pre><code class=\"language-javascript\">\/\/ OpenCV.js y\u00fcklendi\u011finde bu fonksiyon \u00e7a\u011fr\u0131lacak\nfunction onOpenCvReady() {\n    \/\/ cv objesi (OpenCV k\u00fct\u00fcphanesi) art\u0131k kullan\u0131ma haz\u0131r\n    if (typeof cv !== 'undefined' && cv.onRuntimeInitialized) {\n        console.log(\"OpenCV.js ba\u015far\u0131yla y\u00fcklendi ve kullan\u0131ma haz\u0131r!\");\n        \/\/ Burada g\u00f6r\u00fcnt\u00fc i\u015fleme i\u015flemlerini ba\u015flatabiliriz.\n        \/\/ \u00d6rne\u011fin, bir fonksiyon \u00e7a\u011f\u0131rabiliriz:\n        processImage();\n    } else {\n        console.error(\"OpenCV.js y\u00fcklenirken bir hata olu\u015ftu veya initialize edilemedi.\");\n    }\n}\n\n\/\/ G\u00f6r\u00fcnt\u00fc i\u015fleme fonksiyonumuz (\u015fimdilik bo\u015f)\nfunction processImage() {\n    console.log(\"G\u00f6r\u00fcnt\u00fc i\u015fleme fonksiyonu \u00e7a\u011fr\u0131ld\u0131.\");\n    \/\/ G\u00f6r\u00fcnt\u00fcy\u00fc y\u00fckleme ve i\u015fleme ad\u0131mlar\u0131 buraya gelecek.\n}\n\n\/\/ E\u011fer OpenCV.js zaten y\u00fcklenmi\u015fse (\u00f6rne\u011fin daha \u00f6nce \u00e7a\u011fr\u0131lm\u0131\u015fsa), direkt \u00e7a\u011f\u0131r.\n\/\/ Bu, baz\u0131 taray\u0131c\u0131larda veya y\u00fckleme mekanizmalar\u0131nda olu\u015fabilecek bir durumu ele al\u0131r.\nif (typeof cv !== 'undefined' && cv.onRuntimeInitialized) {\n    onOpenCvReady();\n}\n<\/code><\/pre>\n<p>Bu yap\u0131y\u0131 kurduktan sonra <code>index.html<\/code> dosyas\u0131n\u0131 taray\u0131c\u0131n\u0131zda a\u00e7t\u0131\u011f\u0131n\u0131zda, konsolda \"OpenCV.js ba\u015far\u0131yla y\u00fcklendi ve kullan\u0131ma haz\u0131r!\" mesaj\u0131n\u0131 g\u00f6rmelisiniz. Bu, OpenCV.js'in d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131n bir i\u015faretidir.<\/p>\n<h2>Temel G\u00f6r\u00fcnt\u00fc \u0130\u015fleme Operasyonlar\u0131<\/h2>\n<p>OpenCV.js y\u00fcklendikten sonra, art\u0131k temel g\u00f6r\u00fcnt\u00fc i\u015fleme operasyonlar\u0131na ba\u015flayabiliriz. OpenCV.js'teki t\u00fcm g\u00f6r\u00fcnt\u00fc i\u015fleme fonksiyonlar\u0131, g\u00f6r\u00fcnt\u00fcleri <code>cv.Mat<\/code> (Matrix) ad\u0131 verilen \u00f6zel bir veri yap\u0131s\u0131 olarak bekler ve d\u00f6nd\u00fcr\u00fcr. Bu, g\u00f6r\u00fcnt\u00fc piksellerini temsil eden \u00e7ok boyutlu bir dizidir.<\/p>\n<h3>G\u00f6r\u00fcnt\u00fc Y\u00fckleme ve G\u00f6sterme<\/h3>\n<p>Bir HTML <code><img><\/code> etiketindeki g\u00f6r\u00fcnt\u00fcy\u00fc al\u0131p bir <code>cv.Mat<\/code> objesine d\u00f6n\u00fc\u015ft\u00fcrmek ve ard\u0131ndan i\u015flenmi\u015f <code>cv.Mat<\/code> objesini bir <code><canvas><\/code>'a geri \u00e7izmek, s\u0131k\u00e7a yap\u0131lan iki temel i\u015flemdir.<\/p>\n<pre><code class=\"language-javascript\">function processImage() {\n    const imgElement = document.getElementById('imageSrc');\n    const canvasElement = document.getElementById('imageCanvas');\n\n    \/\/ 1. Orijinal g\u00f6r\u00fcnt\u00fcy\u00fc bir Mat objesine d\u00f6n\u00fc\u015ft\u00fcr\n    \/\/ cv.imread fonksiyonu, bir HTML eleman\u0131n\u0131 (img, video, canvas) al\u0131p Mat'a \u00e7evirir.\n    let src = cv.imread(imgElement);\n\n    \/\/ Canvas boyutunu orijinal g\u00f6r\u00fcnt\u00fc boyutuna ayarla\n    canvasElement.width = src.cols;\n    canvasElement.height = src.rows;\n\n    \/\/ 2. Mat objesini canvas'a geri \u00e7iz (i\u015flenmemi\u015f haliyle)\n    \/\/ cv.imshow fonksiyonu, bir Mat objesini HTML canvas'\u0131na \u00e7izer.\n    cv.imshow(canvasElement, src);\n\n    \/\/ Bellek y\u00f6netimi: \u0130\u015fimiz biten Mat objelerini silmeliyiz.\n    \/\/ Aksi takdirde bellek s\u0131z\u0131nt\u0131lar\u0131 ya\u015fanabilir.\n    src.delete();\n\n    console.log(\"G\u00f6r\u00fcnt\u00fc ba\u015far\u0131yla y\u00fcklendi ve g\u00f6sterildi.\");\n}\n<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131, <code>imageSrc<\/code> ID'sine sahip <code><img><\/code> etiketindeki g\u00f6r\u00fcnt\u00fcy\u00fc okur, <code>cv.Mat<\/code> objesine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, ard\u0131ndan bu <code>Mat<\/code> objesini <code>imageCanvas<\/code> ID'sine sahip <code><canvas><\/code>'a \u00e7izer. Son olarak, kullan\u0131lan <code>src<\/code> <code>Mat<\/code> objesini <code>delete()<\/code> metodu ile bellekten silmek \u00f6nemlidir. Bu, WebAssembly belle\u011finde gereksiz yer kaplamay\u0131 \u00f6nler.<\/p>\n<h3>Gri Tonlamaya \u00c7evirme<\/h3>\n<p>Bir\u00e7ok g\u00f6r\u00fcnt\u00fc i\u015fleme algoritmas\u0131, renkli g\u00f6r\u00fcnt\u00fcler yerine gri tonlamal\u0131 g\u00f6r\u00fcnt\u00fcler \u00fczerinde daha iyi veya daha h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r. Gri tonlamaya \u00e7evirme, g\u00f6r\u00fcnt\u00fcn\u00fcn karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azaltan temel bir i\u015flemdir.<\/p>\n<pre><code class=\"language-javascript\">function processImage() {\n    const imgElement = document.getElementById('imageSrc');\n    const canvasElement = document.getElementById('imageCanvas');\n\n    let src = cv.imread(imgElement);\n    let dst = new cv.Mat(); \/\/ Yeni bir hedef Mat objesi olu\u015ftur\n\n    \/\/ Canvas boyutunu orijinal g\u00f6r\u00fcnt\u00fc boyutuna ayarla\n    canvasElement.width = src.cols;\n    canvasElement.height = src.rows;\n\n    \/\/ G\u00f6r\u00fcnt\u00fcy\u00fc gri tonlamaya \u00e7evir\n    \/\/ cv.cvtColor(kaynak_mat, hedef_mat, d\u00f6n\u00fc\u015ft\u00fcrme_kodu)\n    \/\/ cv.COLOR_RGBA2GRAY: RGBA (k\u0131rm\u0131z\u0131, ye\u015fil, mavi, alfa) format\u0131ndan gri tonlamaya \u00e7evir.\n    \/\/ HTML canvas'\u0131ndan gelen g\u00f6r\u00fcnt\u00fcler genellikle RGBA format\u0131ndad\u0131r.\n    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);\n\n    \/\/ \u0130\u015flenmi\u015f g\u00f6r\u00fcnt\u00fcy\u00fc canvas'a \u00e7iz\n    cv.imshow(canvasElement, dst);\n\n    \/\/ Bellek y\u00f6netimi: \u0130\u015fimiz biten Mat objelerini sil\n    src.delete();\n    dst.delete();\n\n    console.log(\"G\u00f6r\u00fcnt\u00fc gri tonlamaya \u00e7evrildi ve g\u00f6sterildi.\");\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>cv.cvtColor<\/code> fonksiyonunu kullanarak <code>src<\/code> Mat'\u0131n\u0131 <code>dst<\/code> Mat'\u0131na gri tonlamal\u0131 olarak d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz. <code>cv.COLOR_RGBA2GRAY<\/code> sabitini kullanarak d\u00f6n\u00fc\u015ft\u00fcrme t\u00fcr\u00fcn\u00fc belirtiyoruz.<\/p>\n<h3>Kenar Tespiti (Canny)<\/h3>\n<p>Kenar tespiti, g\u00f6r\u00fcnt\u00fcdeki nesnelerin s\u0131n\u0131rlar\u0131n\u0131 bulmak i\u00e7in kullan\u0131lan \u00f6nemli bir i\u015flemdir. Canny kenar tespiti algoritmas\u0131, g\u00fcr\u00fclt\u00fcy\u00fc azalt\u0131rken g\u00fc\u00e7l\u00fc kenarlar\u0131 bulmada olduk\u00e7a etkilidir.<\/p>\n<pre><code class=\"language-javascript\">function processImage() {\n    const imgElement = document.getElementById('imageSrc');\n    const canvasElement = document.getElementById('imageCanvas');\n\n    let src = cv.imread(imgElement);\n    let gray = new cv.Mat(); \/\/ Gri tonlamal\u0131 g\u00f6r\u00fcnt\u00fc i\u00e7in\n    let edges = new cv.Mat(); \/\/ Kenarlar i\u00e7in\n\n    canvasElement.width = src.cols;\n    canvasElement.height = src.rows;\n\n    \/\/ 1. G\u00f6r\u00fcnt\u00fcy\u00fc gri tonlamaya \u00e7evir\n    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);\n\n    \/\/ 2. Canny kenar tespiti uygula\n    \/\/ cv.Canny(kaynak_mat, hedef_mat, d\u00fc\u015f\u00fck_e\u015fik, y\u00fcksek_e\u015fik, a\u00e7\u0131kl\u0131k_boyutu, L2_gradyan)\n    \/\/ D\u00fc\u015f\u00fck ve y\u00fcksek e\u015fikler, hangi gradyan de\u011ferlerinin kenar olarak kabul edilece\u011fini belirler.\n    \/\/ A\u00e7\u0131kl\u0131k boyutu (aperture size) Sobel operat\u00f6r\u00fc i\u00e7in kullan\u0131l\u0131r (genellikle 3).\n    \/\/ L2 gradyan: Gradyan b\u00fcy\u00fckl\u00fc\u011f\u00fcn\u00fc hesaplamak i\u00e7in L2 normunu kullan\u0131p kullanmayaca\u011f\u0131m\u0131z\u0131 belirler (varsay\u0131lan false, yani L1).\n    cv.Canny(gray, edges, 50, 100, 3, false);\n\n    \/\/ \u0130\u015flenmi\u015f kenarlar\u0131 canvas'a \u00e7iz\n    cv.imshow(canvasElement, edges);\n\n    \/\/ Bellek y\u00f6netimi\n    src.delete();\n    gray.delete();\n    edges.delete();\n\n    console.log(\"Canny kenar tespiti uyguland\u0131 ve g\u00f6sterildi.\");\n}\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, \u00f6nce g\u00f6r\u00fcnt\u00fcy\u00fc gri tonlamaya \u00e7eviriyoruz (<code>gray<\/code> Mat'\u0131na). Ard\u0131ndan, <code>cv.Canny<\/code> fonksiyonunu kullanarak kenar tespiti yap\u0131yoruz ve sonu\u00e7lar\u0131 <code>edges<\/code> Mat'\u0131na kaydediyoruz. E\u015fik de\u011ferleri (<code>50<\/code>, <code>100<\/code>), Canny algoritmas\u0131n\u0131n kenarlar\u0131 nas\u0131l filtreleyece\u011fini kontrol eder.<\/p>\n<h2>Daha \u0130leri Konular ve Uygulamalar<\/h2>\n<p>Temel i\u015flemlerin \u00f6tesine ge\u00e7erek, OpenCV.js'in ger\u00e7ek potansiyelini ortaya \u00e7\u0131karacak baz\u0131 daha geli\u015fmi\u015f konulara ve pratik uygulamalara de\u011finelim.<\/p>\n<h3>Web Kameras\u0131 ile Ger\u00e7ek Zamanl\u0131 \u0130\u015fleme<\/h3>\n<p>OpenCV.js'in en etkileyici kullan\u0131m alanlar\u0131ndan biri, web kameras\u0131 arac\u0131l\u0131\u011f\u0131yla ger\u00e7ek zamanl\u0131 video ak\u0131\u015flar\u0131n\u0131 i\u015flemektir. Bu, y\u00fcz tespiti, hareket takibi veya art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik uygulamalar\u0131 i\u00e7in temel olu\u015fturur.<\/p>\n<p>Ger\u00e7ek zamanl\u0131 i\u015fleme ad\u0131mlar\u0131 genellikle \u015funlar\u0131 i\u00e7erir:<\/p>\n<ol>\n<li>Web kameras\u0131na eri\u015fim izni almak (<code>navigator.mediaDevices.getUserMedia<\/code>).<\/li>\n<li>Video ak\u0131\u015f\u0131n\u0131 bir <code><video><\/code> eleman\u0131na ba\u011flamak.<\/li>\n<li>Her video karesini belirli aral\u0131klarla veya <code>requestAnimationFrame<\/code> kullanarak yakalamak.<\/li>\n<li>Yakalanan her kareyi <code>cv.imread<\/code> ile bir <code>cv.Mat<\/code> objesine d\u00f6n\u00fc\u015ft\u00fcrmek.<\/li>\n<li><code>cv.Mat<\/code> \u00fczerinde istenen g\u00f6r\u00fcnt\u00fc i\u015fleme operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftirmek.<\/li>\n<li>\u0130\u015flenmi\u015f <code>cv.Mat<\/code> objesini bir <code><canvas><\/code>'a <code>cv.imshow<\/code> ile \u00e7izmek.<\/li>\n<li>Kullan\u0131lan <code>cv.Mat<\/code> objelerini <code>delete()<\/code> ile serbest b\u0131rakmak.<\/li>\n<\/ol>\n<p>Basit bir video i\u015fleme d\u00f6ng\u00fcs\u00fc \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n<pre><code class=\"language-javascript\">let video = document.getElementById('videoInput'); \/\/ HTML'de <video id=\"videoInput\"> olmal\u0131\nlet cap = new cv.VideoCapture(video); \/\/ VideoCapture objesi olu\u015ftur\n\n\/\/ Her kareyi i\u015flemek i\u00e7in d\u00f6ng\u00fc\nfunction processVideo() {\n    let begin = Date.now();\n    let src = new cv.Mat(video.videoHeight, video.videoWidth, cv.CV_8UC4); \/\/ Kaynak Mat\n    let dst = new cv.Mat(); \/\/ Hedef Mat\n\n    try {\n        cap.read(src); \/\/ Video karesini oku\n\n        \/\/ Burada istedi\u011finiz g\u00f6r\u00fcnt\u00fc i\u015fleme operasyonlar\u0131n\u0131 yap\u0131n\n        \/\/ \u00d6rne\u011fin: Gri tonlamaya \u00e7evir\n        cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);\n\n        cv.imshow('canvasOutput', dst); \/\/ \u0130\u015flenmi\u015f kareyi canvas'a \u00e7iz\n\n    } catch (err) {\n        console.error(\"Video i\u015fleme hatas\u0131: \" + err);\n    } finally {\n        src.delete();\n        dst.delete();\n    }\n\n    let delay = 1000\/30 - (Date.now() - begin); \/\/ Yakla\u015f\u0131k 30 FPS i\u00e7in gecikme hesapla\n    setTimeout(processVideo, delay); \/\/ Bir sonraki kareyi i\u015fle\n}\n\n\/\/ Web kameras\u0131na eri\u015fim ve video ak\u0131\u015f\u0131n\u0131 ba\u015flatma\nnavigator.mediaDevices.getUserMedia({ video: true, audio: false })\n    .then(function(stream) {\n        video.srcObject = stream;\n        video.onloadedmetadata = function(e) {\n            video.play();\n            \/\/ Video oynatmaya ba\u015flad\u0131ktan sonra i\u015fleme d\u00f6ng\u00fcs\u00fcn\u00fc ba\u015flat\n            processVideo();\n        };\n    })\n    .catch(function(err) {\n        console.error(\"Web kameras\u0131na eri\u015filemedi: \" + err);\n    });\n<\/code><\/pre>\n<p>Bu yap\u0131, taray\u0131c\u0131da do\u011frudan web kameras\u0131 g\u00f6r\u00fcnt\u00fcs\u00fc \u00fczerinde ger\u00e7ek zamanl\u0131 olarak bilgisayar g\u00f6r\u00fc\u015f\u00fc algoritmalar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.<\/p>\n<h3>Nesne Tespiti ve Makine \u00d6\u011frenimi Modelleri<\/h3>\n<p>OpenCV.js, sadece temel i\u015flemlerle s\u0131n\u0131rl\u0131 de\u011fildir. Y\u00fcz tespiti i\u00e7in Haar Cascade s\u0131n\u0131fland\u0131r\u0131c\u0131lar\u0131 gibi daha geli\u015fmi\u015f algoritmalar\u0131 veya hatta \u00f6nceden e\u011fitilmi\u015f derin \u00f6\u011frenme (DNN) modellerini kullanma yetene\u011fine de sahiptir.<\/p>\n<ul>\n<li><strong>Haar Cascade S\u0131n\u0131fland\u0131r\u0131c\u0131lar\u0131:<\/strong> Y\u00fcz, g\u00f6z gibi belirli nesnelerin tespiti i\u00e7in kullan\u0131lan XML dosyalar\u0131d\u0131r. OpenCV.js, bu dosyalar\u0131 y\u00fckleyip <code>cv.CascadeClassifier<\/code> s\u0131n\u0131f\u0131 ile kullanman\u0131za imkan tan\u0131r.<\/li>\n<li><strong>Derin \u00d6\u011frenme Modelleri:<\/strong> <code>cv.dnn<\/code> mod\u00fcl\u00fc sayesinde, ONNX, TensorFlow veya Caffe gibi formatlarda \u00f6nceden e\u011fitilmi\u015f derin \u00f6\u011frenme modellerini y\u00fckleyebilir ve nesne s\u0131n\u0131fland\u0131rma, nesne tespiti veya segmentasyon gibi g\u00f6revler i\u00e7in kullanabilirsiniz. Bu, daha karma\u015f\u0131k ve do\u011fru sonu\u00e7lar elde etmenizi sa\u011flar, ancak performans ve model boyutu gibi fakt\u00f6rleri dikkate almay\u0131 gerektirir.<\/li>\n<\/ul>\n<h3>Performans \u0130pu\u00e7lar\u0131<\/h3>\n<p>Web taray\u0131c\u0131s\u0131nda bilgisayar g\u00f6r\u00fc\u015f\u00fc uygulamalar\u0131 geli\u015ftirirken performans\u0131 optimize etmek kritik \u00f6neme sahiptir:<\/p>\n<ul>\n<li><strong>Bellek Y\u00f6netimi (<code>.delete()<\/code>):<\/strong> OpenCV.js'in en \u00f6nemli performans ipucu, her <code>cv.Mat<\/code> objesi ile i\u015finiz bitti\u011finde <code>mat.delete()<\/code> metodunu \u00e7a\u011f\u0131rmakt\u0131r. WebAssembly belle\u011fi, JavaScript'in \u00e7\u00f6p toplay\u0131c\u0131s\u0131 taraf\u0131ndan otomatik olarak y\u00f6netilmez. Unutulan <code>Mat<\/code> objeleri ciddi bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir.<\/li>\n<li><strong>Mat Objesi Yeniden Kullan\u0131m\u0131:<\/strong> Her kare veya i\u015flem i\u00e7in yeni <code>cv.Mat<\/code> objeleri olu\u015fturmak yerine, m\u00fcmk\u00fcn oldu\u011funca <code>Mat<\/code> objelerini yeniden kullan\u0131n. \u00d6rne\u011fin, bir video i\u015fleme d\u00f6ng\u00fcs\u00fcnde <code>src<\/code> ve <code>dst<\/code> Mat'lar\u0131n\u0131 d\u00f6ng\u00fc d\u0131\u015f\u0131nda bir kez olu\u015fturup, her karede i\u00e7lerini doldurmak daha verimlidir.<\/li>\n<li><strong>G\u00f6r\u00fcnt\u00fc Boyutunu K\u00fc\u00e7\u00fcltme:<\/strong> \u00d6zellikle ger\u00e7ek zamanl\u0131 uygulamalarda, orijinal y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6r\u00fcnt\u00fcleri i\u015flemek yerine, \u00f6nce g\u00f6r\u00fcnt\u00fcleri k\u00fc\u00e7\u00fcltmek (\u00f6rne\u011fin <code>cv.resize<\/code> ile) i\u015flem s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir.<\/li>\n<li><strong>Asenkron \u0130\u015fleme:<\/strong> Uzun s\u00fcren i\u015flemleri Web Workers kullanarak ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ay\u0131rmak, taray\u0131c\u0131n\u0131n donmas\u0131n\u0131 \u00f6nleyerek kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131 kalmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Gereksiz \u0130\u015flemlerden Ka\u00e7\u0131nma:<\/strong> Yaln\u0131zca ger\u00e7ekten ihtiyac\u0131n\u0131z olan i\u015flemleri yap\u0131n. \u00d6rne\u011fin, gri tonlamal\u0131 bir g\u00f6r\u00fcnt\u00fc \u00fczerinde \u00e7al\u0131\u015f\u0131yorsan\u0131z, g\u00f6r\u00fcnt\u00fcy\u00fc tekrar tekrar gri tonlamaya \u00e7evirmeyin.<\/li>\n<\/ul>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>Bu rehberde, OpenCV.js ile JavaScript ortam\u0131nda bilgisayar g\u00f6r\u00fc\u015f\u00fcne giri\u015f yapt\u0131k. Temel kurulumdan g\u00f6r\u00fcnt\u00fc y\u00fcklemeye, gri tonlamaya \u00e7evirmeden kenar tespitine kadar bir\u00e7ok temel i\u015flemi pratik kod \u00f6rnekleriyle ele ald\u0131k. Ayr\u0131ca, web kameras\u0131 ile ger\u00e7ek zamanl\u0131 i\u015fleme ve performans ipu\u00e7lar\u0131 gibi daha ileri konulara da de\u011findik.<\/p>\n<p>OpenCV.js, web geli\u015ftiricilerine taray\u0131c\u0131da do\u011frudan g\u00fc\u00e7l\u00fc bilgisayar g\u00f6r\u00fc\u015f\u00fc yetenekleri sunarak, etkile\u015fimli ve dinamik web uygulamalar\u0131 olu\u015fturma konusunda yeni kap\u0131lar a\u00e7maktad\u0131r. Y\u00fcz filtreleri, art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik deneyimleri, belge taray\u0131c\u0131lar\u0131 veya eri\u015filebilirlik ara\u00e7lar\u0131 gibi bir\u00e7ok projeyi hayata ge\u00e7irebilirsiniz. K\u00fct\u00fcphanenin geni\u015f fonksiyon setini ke\u015ffetmekten ve kendi yarat\u0131c\u0131 projelerinizi geli\u015ftirmekten \u00e7ekinmeyin!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>S: OpenCV.js'in boyutu nedir ve performans\u0131 nas\u0131l etkiler?<\/strong><br \/>\nC: OpenCV.js k\u00fct\u00fcphanesi (WebAssembly mod\u00fcl\u00fc dahil) olduk\u00e7a b\u00fcy\u00fckt\u00fcr (birka\u00e7 MB). Bu nedenle, y\u00fcklenmesi biraz zaman alabilir. <code>async<\/code> ve <code>defer<\/code> anahtar kelimelerini kullanarak veya k\u00fct\u00fcphaneyi bir Web Worker i\u00e7inde y\u00fckleyerek ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n engellenmesini \u00f6nlemek \u00f6nemlidir. Performans, taray\u0131c\u0131n\u0131n WebAssembly deste\u011fine ve kullan\u0131c\u0131n\u0131n donan\u0131m\u0131na ba\u011fl\u0131d\u0131r. Modern taray\u0131c\u0131larda ve cihazlarda genellikle iyi performans sergiler, ancak karma\u015f\u0131k algoritmalar i\u00e7in optimizasyonlar gerekebilir.<\/p>\n<p><strong>S: OpenCV.js t\u00fcm taray\u0131c\u0131larda \u00e7al\u0131\u015f\u0131r m\u0131?<\/strong><br \/>\nC: OpenCV.js, WebAssembly'i destekleyen t\u00fcm modern taray\u0131c\u0131larda (Chrome, Firefox, Safari, Edge vb.) \u00e7al\u0131\u015f\u0131r. Eski taray\u0131c\u0131larda veya belirli mobil taray\u0131c\u0131 s\u00fcr\u00fcmlerinde uyumluluk sorunlar\u0131 ya\u015fanabilir.<\/p>\n<p><strong>S: Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 nas\u0131l \u00f6nleyebilirim?<\/strong><br \/>\nC: Her <code>cv.Mat<\/code> objesi ile i\u015finiz bitti\u011finde mutlaka <code>mat.delete()<\/code> metodunu \u00e7a\u011f\u0131r\u0131n. Bu, WebAssembly belle\u011finde ayr\u0131lan alan\u0131 serbest b\u0131rak\u0131r. \u00d6zellikle d\u00f6ng\u00fclerde veya ger\u00e7ek zamanl\u0131 i\u015flemlerde bu ad\u0131m\u0131 atlamamak kritik \u00f6neme sahiptir.<\/p>\n<p><strong>S: OpenCV.js ile hangi t\u00fcr projeleri geli\u015ftirebilirim?<\/strong><br \/>\nC: Y\u00fcz tan\u0131ma\/tespit, nesne takibi, art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik filtreleri, g\u00f6rsel efektler, QR kod okuyucular, belge tarama ve d\u00fczenleme, hareket tespiti, oyunlar ve etkile\u015fimli deneyimler gibi bir\u00e7ok projeyi geli\u015ftirebilirsiniz.<\/p>\n<p><strong>S: Daha fazla kaynak ve dok\u00fcmantasyon nerede bulabilirim?<\/strong><br \/>\nC: OpenCV.js'in resmi dok\u00fcmantasyonu (docs.opencv.org), k\u00fct\u00fcphanenin t\u00fcm fonksiyonlar\u0131 ve kullan\u0131m \u00f6rnekleri hakk\u0131nda kapsaml\u0131 bilgi sunar. Ayr\u0131ca, GitHub deposu ve \u00e7e\u015fitli online e\u011fitim platformlar\u0131 da faydal\u0131 kaynaklard\u0131r.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Bilgisayar g\u00f6r\u00fc\u015f\u00fc (Computer Vision), makinelerin dijital g\u00f6r\u00fcnt\u00fc ve videolardan anlaml\u0131 bilgiler \u00e7\u0131kararak d\u00fcnyay\u0131 &#8220;g\u00f6rmesini&#8221; ve yorum","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-36269","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>OpenCV.js&#039;e Ba\u015flang\u0131\u00e7 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OpenCV.js&#039;e Ba\u015flang\u0131\u00e7\" \/>\n<meta property=\"og:description\" content=\"Bilgisayar g\u00f6r\u00fc\u015f\u00fc (Computer Vision), makinelerin dijital g\u00f6r\u00fcnt\u00fc ve videolardan anlaml\u0131 bilgiler \u00e7\u0131kararak d\u00fcnyay\u0131 &quot;g\u00f6rmesini&quot; ve yorum\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-11T22:41:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/picsum.photos\/600\/400\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7\",\"datePublished\":\"2025-12-11T22:41:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\"},\"wordCount\":1837,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/picsum.photos\/600\/400\",\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\",\"name\":\"OpenCV.js'e Ba\u015flang\u0131\u00e7 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/picsum.photos\/600\/400\",\"datePublished\":\"2025-12-11T22:41:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage\",\"url\":\"https:\/\/picsum.photos\/600\/400\",\"contentUrl\":\"https:\/\/picsum.photos\/600\/400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"OpenCV.js'e Ba\u015flang\u0131\u00e7 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/","og_locale":"tr_TR","og_type":"article","og_title":"OpenCV.js'e Ba\u015flang\u0131\u00e7","og_description":"Bilgisayar g\u00f6r\u00fc\u015f\u00fc (Computer Vision), makinelerin dijital g\u00f6r\u00fcnt\u00fc ve videolardan anlaml\u0131 bilgiler \u00e7\u0131kararak d\u00fcnyay\u0131 \"g\u00f6rmesini\" ve yorum","og_url":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-11T22:41:38+00:00","og_image":[{"url":"https:\/\/picsum.photos\/600\/400","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7","datePublished":"2025-12-11T22:41:38+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/"},"wordCount":1837,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage"},"thumbnailUrl":"https:\/\/picsum.photos\/600\/400","inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/","url":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/","name":"OpenCV.js'e Ba\u015flang\u0131\u00e7 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage"},"thumbnailUrl":"https:\/\/picsum.photos\/600\/400","datePublished":"2025-12-11T22:41:38+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#primaryimage","url":"https:\/\/picsum.photos\/600\/400","contentUrl":"https:\/\/picsum.photos\/600\/400"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/opencv-jse-baslangic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"OpenCV.js&#8217;e Ba\u015flang\u0131\u00e7"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=36269"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36269\/revisions"}],"predecessor-version":[{"id":36270,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36269\/revisions\/36270"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}