Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2023-05-11T16:25:04+02:00Les derniers messages parus sur le forum de Zeste de Savoir.Filtre de détection des contours sur une vidéo, message #2503932023-05-11T16:25:04+02:00tsuruba/@tsurubahttps://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250393<p>Double post // Un edit est pas pertinent cette fois.</p>
<p>Je me plongé dans la doc de openCV.js (chose que je voulais éviter car je la trouvait peu pratique) ce qui m’a mené à écrire une fonction très courte qui fonctionne sur une image :</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span></div><pre><code class="hljs language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">detectContour</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">//Conversion d'une image en détection des contours</span>
<span class="hljs-comment">//Obtention de la matrice à partir de <img></span>
<span class="hljs-keyword">let</span> matriceCouleur= cv.imread(<span class="hljs-string">"imageSource"</span>); <span class="hljs-comment">// id d'une <img> dans html</span>
<span class="hljs-keyword">let</span> matriceGris = <span class="hljs-keyword">new</span> cv.Mat();
<span class="hljs-keyword">let</span> matriceEdge = <span class="hljs-keyword">new</span> cv.Mat();
cv.cvtColor(matriceCouleur, matriceGris, cv.COLOR_RGBA2GRAY);
cv.imshow(<span class="hljs-string">"canvasGris"</span>, matriceGris);
cv.Canny(matriceGris, matriceEdge, <span class="hljs-number">50</span>, <span class="hljs-number">100</span>, <span class="hljs-number">3</span>, <span class="hljs-literal">false</span>);
cv.imshow(<span class="hljs-string">"canvasEdge"</span>, matriceEdge);
}
</code></pre></div>
<p>Je n’ai pas gardé la page dans la doc qui m’a permis d’arriver ici. <img src="/static/smileys/svg/triste.svg" alt=":(" class="smiley"> Mais ça répond à mes 2 problèmes : C’est beaucoup plus lisible, et ça fonctionne.</p>
<p>Maintenant, il ne me reste plus qu’à adapter à la vidéo. <a href="https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html">La doc me donne encore ce qu’il faut :</a> </p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span></div><pre><code class="hljs language-js"><span class="hljs-keyword">let</span> video = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'videoInput'</span>);
<span class="hljs-keyword">let</span> src = <span class="hljs-keyword">new</span> cv.Mat(video.height, video.width, cv.CV_8UC4);
<span class="hljs-keyword">let</span> dst = <span class="hljs-keyword">new</span> cv.Mat(video.height, video.width, cv.CV_8UC4);
<span class="hljs-keyword">let</span> cap = <span class="hljs-keyword">new</span> cv.VideoCapture(video);
<span class="hljs-keyword">const</span> FPS = <span class="hljs-number">60</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">processVideo</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">if</span> (!streaming) {
<span class="hljs-comment">// clean and stop.</span>
src.delete();
dst.delete();
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">let</span> begin = <span class="hljs-built_in">Date</span>.now();
<span class="hljs-comment">// start processing.</span>
cap.read(src);
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
cv.Canny(dst, dst, <span class="hljs-number">50</span>, <span class="hljs-number">100</span>, <span class="hljs-number">3</span>, <span class="hljs-literal">false</span>);
cv.imshow(<span class="hljs-string">'canvasOutput'</span>, dst);
<span class="hljs-comment">// schedule the next one.</span>
<span class="hljs-keyword">let</span> delay = <span class="hljs-number">1000</span>/FPS - (<span class="hljs-built_in">Date</span>.now() - begin);
<span class="hljs-built_in">setTimeout</span>(processVideo, delay);
} <span class="hljs-keyword">catch</span> (err) {
utils.printError(err);
}
};
<span class="hljs-comment">// schedule the first one.</span>
<span class="hljs-built_in">setTimeout</span>(processVideo, <span class="hljs-number">0</span>);
</code></pre></div>
<p>Ce qui fonctionne très bien dans le bac à sable de ladite page. Seulement, ça fonctionne avec le live de la caméra, et je veux travailler avec une vidéo qui est déjà enregistrée par la caméra et finie, donc j’ai essayé d’adapter un peu la chose :</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span><span data-count="35"></span><span data-count="36"></span><span data-count="37"></span><span data-count="38"></span><span data-count="39"></span><span data-count="40"></span></div><pre><code class="hljs language-js"><span class="hljs-comment">/* Variables globales */</span>
<span class="hljs-comment">//...</span>
<span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, demarrerApp); <span class="hljs-comment">//On attend que tout soit chargé</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">demarrerApp</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// Fonction qui fait fonctionner la page, après avoir chargé tout html</span>
initialise_variables(); <span class="hljs-comment">// Initialisation des variables globales</span>
cameraShow(); <span class="hljs-comment">// Lancement de la webcam</span>
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initialise_variables</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">//...</span>
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cameraShow</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-comment">//...</span>
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">startRecording</span>(<span class="hljs-params"></span>) // <span class="hljs-title">Bouton</span> "<span class="hljs-title">d</span>é<span class="hljs-title">marrer</span> <span class="hljs-title">l</span>'<span class="hljs-title">enregistrement</span>"
</span>{
<span class="hljs-comment">//...</span>
}
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stopRecording</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// Bouton "arrêter l'enregistrement"</span>
<span class="hljs-comment">//...</span>
matSrc = <span class="hljs-keyword">new</span> cv.Mat(traitement.videoHeight, traitement.videoWidth, cv.CV_8UC4);
matDst = <span class="hljs-keyword">new</span> cv.Mat(traitement.videoHeight, traitement.videoWidth, cv.CV_8UC1);
captur = cv.VideoCapture(traitement); <span class="hljs-comment">//On capture la vidéo à traiter avec cette fonction, on passe en paramètre la vidéo voulue</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> captur); <span class="hljs-comment">// réponse : undefined</span>
detectContourVideo();
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">detectContourVideo</span>(<span class="hljs-params"></span>)</span>{
captur.read(matSrc); <span class="hljs-comment">// Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'read')</span>
<span class="hljs-comment">//...</span>
}
</code></pre></div>
<p>Je ne met pas l’intégralité du code : je sais que le reste fonctionne, donc pas la peine d’encombrer le topic.
J’ai ce problème très embêtant avec la première ligne de <code>detectContourVideo</code>, l’erreur est en commentaire. Effectivement, <code>capature</code> est de type <code>undefined</code>, ce qui ne doit apparemment être le cas. Si j’ai bien compris la doc, c’est censé être type <code>object</code> n’est-ce pas ? Qu’est-ce qui peut faire défaut ?</p>
<p>Mettre un await dans la ligne <code>captur = await cv.VideoCapture(traitement); </code> ne produit aucun changement de comportement. Mais j’ai pas l’impression que <code>VideoCapture</code> retourne une promesse, donc prévisible.</p>
<p>Faire une boucle avec une promesse justement pour attendre que <code>typeof captur == object</code> mène à une boucle infinie. Donc j’en déduit que le type de <code>captur</code> ne changera pas avec le temps.</p>
<p>Essayer avec une vidéo qui ne vient pas de la caméra mais qui est directement chargée dans la page en même temps que le reste ne change pas le problème.</p>
<p>Quant à l’initialisation de <code>captur</code> avec la variable <code>traitement</code>, c’est dans tout ce que je n’ai pas mis : traitement désigne une <code><video></code> html, qui est correctement identifiée par son ID, et qui a bien la vidéo enregistrée chargée, puisqu’elle se joue sans problème.</p>Filtre de détection des contours sur une vidéo, message #2503892023-05-11T10:41:43+02:00tsuruba/@tsurubahttps://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250389<p>Je viens d’essayé, avec <code>type = cv.CV_64FC4</code> (j’ai supposé que le 4 final faisait référence aux 4 canaux de couleur), mais je reste sur la même erreur.
Je suis en train de me demander si le problème ne vient pas de <code>cv.Canny</code> ? Est-ce que cette fonction ne renvoie pas justement une matrice remplie de 1 et de 0 (blanc et noir) au lieu d’une image ? Dans ce cas ça serait à moi de faire un traitement derrière…</p>Filtre de détection des contours sur une vidéo, message #2503862023-05-10T16:05:57+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250386<p>L’erreur se situe plutôt dans la constitution de <code>cvOutput.data</code>, qui n’a pas la bonne taille. Tu es sûr qu’il ne manque pas des données ?</p>
<p>Tu as essayé de passer <code>rows</code>, <code>cols</code> et <code>type</code> en paramètres lorsque tu fais <code>const cvOutput = new cv.Mat();</code> (cf. <a href="https://docs.opencv.org/3.4/d3/d63/classcv_1_1Mat.html#a2ec3402f7d165ca34c7fd6e8498a62ca">doc OpenCV</a>) pour t’assurer que tes deux calques sont au même format ?</p>Filtre de détection des contours sur une vidéo, message #2503822023-05-10T10:10:37+02:00tsuruba/@tsurubahttps://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250382<p>Hii !</p>
<p>On est bien d’accord, une division par 4 à l’endroit où il attend la dimension de l’image, c’est bizarre. C’est pour ça que je dis que ma fonction est douteuse, car comme tu dis sois j’affiche une ligne sur 4, soit j’affiche seulement le premier quart, soit… pas moyen de le savoir. de plus j’avais jamais entendu parler d’un format d’image à une seule couche uniquement pour les trucs en noirs et blanc, mais c’est ce qui m’a corrigé l’erreur. <img src="/static/smileys/svg/triste.svg" alt=":(" class="smiley"></p>
<p>Donc c’est au niveau de ces lignes que j’avais l’erreur précisément (57 - 63) précisément :</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span></div><pre><code class="hljs language-js"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"canvas de sortie : %o * %o"</span>, cvOutput.rows, cvOutput.cols);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%o bytes"</span>, cvOutput.data.length);
<span class="hljs-keyword">const</span> outputImageData = <span class="hljs-keyword">new</span> ImageData(
<span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8ClampedArray</span>(cvOutput.data),
cvOutput.cols,
cvOutput.rows
);
</code></pre></div>
<p>J’ai retiré le <code>/4</code>, l’erreur est "Uncaught (in promise) DOMException: Failed to construct 'ImageData’: The input data length is not equal to (4 <em> width </em> height)."
C’est pour ça qu’il y a les 2 <code>console.log</code> pour comparer les dimensions de <code>cvOutput</code> (hauteur et largeur) et le nombre de bytes : Il se trouve que j’ai <code>cvOutput.data.length = vOutput.rows*cvOutput.cols</code> sans le *4, d’où ma division sur <code>cvOutput.rows / 4</code>, comme ça la multiplication et la division se neutralisent.</p>Filtre de détection des contours sur une vidéo, message #2503722023-05-09T17:38:41+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250372<p>Hello, </p>
<p>Je suis pas expert mais diviser par 4 me paraît dangereux quand l’API <a href="https://developer.mozilla.org/fr/docs/Web/API/ImageData"><code>ImageData</code></a> attend les dimensions de l’image à traiter et non un nombre de couleurs. De plus ta division est faite sur la hauteur : tu n’afficherais donc qu’une ligne sur 4 ?</p>
<p>Tu exposes peut-être uniquement du noir et blanc, mais l’affichage se fait bien en RGB, de même que le traitement : blanc étant du <code>RGB</code> (255, 255, 255), noir aussi (0, 0, 0). Le <code>A</code> de <code>RGBA</code> étant la couche alpha (transparence).</p>
<p>Quelle était l’erreur avant l’ajout de cette division ?</p>Filtre de détection des contours sur une vidéo, message #2503682023-05-09T15:01:31+02:00tsuruba/@tsurubahttps://zestedesavoir.com/forums/sujet/16957/filtre-de-detection-des-contours-sur-une-video/?page=1#p250368<p>bonjour !
J’essaie d’enregistrer une vidéo depuis ma webcam et de lui appliquer un filtre de détection des contours avec openCV.js. L’enregistrement fonctionne bien, il est fait avec WebRTC, il me donne une vidéo stockée dans un blob, et je peux l’afficher sans problème.
Voici le code de ma fonction de filtrage :</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span><span data-count="35"></span><span data-count="36"></span><span data-count="37"></span><span data-count="38"></span><span data-count="39"></span><span data-count="40"></span><span data-count="41"></span><span data-count="42"></span><span data-count="43"></span><span data-count="44"></span><span data-count="45"></span><span data-count="46"></span><span data-count="47"></span><span data-count="48"></span><span data-count="49"></span><span data-count="50"></span><span data-count="51"></span><span data-count="52"></span><span data-count="53"></span><span data-count="54"></span><span data-count="55"></span><span data-count="56"></span><span data-count="57"></span><span data-count="58"></span><span data-count="59"></span><span data-count="60"></span><span data-count="61"></span><span data-count="62"></span><span data-count="63"></span><span data-count="64"></span><span data-count="65"></span><span data-count="66"></span><span data-count="67"></span><span data-count="68"></span><span data-count="69"></span><span data-count="70"></span><span data-count="71"></span><span data-count="72"></span><span data-count="73"></span><span data-count="74"></span><span data-count="75"></span><span data-count="76"></span><span data-count="77"></span><span data-count="78"></span><span data-count="79"></span><span data-count="80"></span><span data-count="81"></span><span data-count="82"></span></div><pre><code class="hljs language-js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">detectContours</span>(<span class="hljs-params">inputBlob</span>) </span>{
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"a"</span>);
<span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(URL.createObjectURL(inputBlob));
<span class="hljs-keyword">const</span> blob = <span class="hljs-keyword">await</span> response.blob();
<span class="hljs-keyword">const</span> inputVideo = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"video"</span>);
inputVideo.src = URL.createObjectURL(blob);
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
inputVideo.addEventListener(<span class="hljs-string">"loadedmetadata"</span>, <span class="hljs-function">() =></span> {
resolve();
});
inputVideo.load();
});
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"type de inputVideo : %o"</span>, <span class="hljs-keyword">typeof</span> inputVideo);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"vidéo d'entrée : %o * %o"</span>, inputVideo.height, inputVideo.width);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"b"</span>);
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
inputVideo.addEventListener(<span class="hljs-string">"canplaythrough"</span>, <span class="hljs-function">() =></span> {
resolve();
});
inputVideo.load();
});
<span class="hljs-keyword">await</span> inputVideo.play();
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"c"</span>);
<span class="hljs-keyword">const</span> outputCanvas = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"canvas"</span>);
outputCanvas.width = inputVideo.videoWidth;
outputCanvas.height = inputVideo.videoHeight;
<span class="hljs-keyword">const</span> outputCtx = outputCanvas.getContext(<span class="hljs-string">"2d"</span>);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"d"</span>);
outputCtx.drawImage(
inputVideo,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
outputCanvas.width,
outputCanvas.height
);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"e"</span>);
<span class="hljs-keyword">const</span> cvInput = cv.imread(outputCanvas);
<span class="hljs-keyword">const</span> cvOutput = <span class="hljs-keyword">new</span> cv.Mat();
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"f"</span>);
cv.Canny(cvInput, cvOutput, <span class="hljs-number">100</span>, <span class="hljs-number">200</span>);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"g"</span>);
<span class="hljs-built_in">console</span>.log(
<span class="hljs-string">"vidéo d'entrée : %o * %o"</span>,
inputVideo.videoHeight,
inputVideo.videoWidth
);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"canvas de sortie : %o * %o"</span>, cvOutput.rows, cvOutput.cols);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"%o bytes"</span>, cvOutput.data.length);
<span class="hljs-keyword">const</span> outputImageData = <span class="hljs-keyword">new</span> ImageData(
<span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8ClampedArray</span>(cvOutput.data),
cvOutput.cols,
cvOutput.rows / <span class="hljs-number">4</span>
);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"h"</span>);
<span class="hljs-keyword">const</span> outputCanvas2 = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"canvas"</span>);
outputCanvas2.width = outputImageData.width;
outputCanvas2.height = outputImageData.height;
<span class="hljs-keyword">const</span> outputCtx2 = outputCanvas2.getContext(<span class="hljs-string">"2d"</span>);
outputCtx2.putImageData(outputImageData, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"i"</span>);
<span class="hljs-keyword">const</span> outputBlob = <span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span>
outputCanvas2.toBlob(resolve, <span class="hljs-string">"image/png"</span>)
);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"j"</span>);
URLvideoEdge = URL.createObjectURL(outputBlob);
blobVideoEdge = outputBlob;
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"k"</span>);
}
</code></pre></div>
<p>Voici le code de ma fonction appelée quand j’appuie sur mon bouton pour arrêter d’enregistrer : </p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span></div><pre><code class="hljs language-js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stopRecording</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"1"</span>);
<span class="hljs-comment">//Recording the video</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> track <span class="hljs-keyword">of</span> stream.getTracks()) {
track.stop(); <span class="hljs-comment">//when this event is triggered, function called display the video without any issue </span>
}
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"2"</span>);
<span class="hljs-comment">// verifying blobVideoCouleur actually is an object</span>
<span class="hljs-keyword">while</span> (<span class="hljs-keyword">typeof</span> blobVideoCouleur !== <span class="hljs-string">"object"</span>) {
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">resolve</span> =></span> <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">100</span>)); <span class="hljs-comment">// Pause 100ms</span>
}
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"3"</span>);
<span class="hljs-comment">//Applying edge detection filter</span>
<span class="hljs-keyword">await</span> detectContours(blobVideoCouleur);
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"4"</span>);
<span class="hljs-comment">//Displaying filtered video </span>
playBack.src = URLvideoEdge;
playBack.autoplay = <span class="hljs-literal">true</span>;
<span class="hljs-built_in">console</span>.trace(<span class="hljs-string">"5"</span>);
}
</code></pre></div>
<p><code>playBack</code> est une variable globale définie comme l’élément html <code><vidéo></code> où je joue la vidéo enregistrée. Ca fonctionne très bien pour la vidéo "normale". Voici le code qui la définie, cette fonction est appelée quand j’appuie sur mon bouton d’arrêt d’enregistrement :</p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span></div><pre><code class="hljs language-js"> recorder.onstop = <span class="hljs-function">() =></span> { <span class="hljs-comment">// Event triggered when I stop the recorder </span>
<span class="hljs-keyword">const</span> blob = <span class="hljs-keyword">new</span> Blob(chunks, { <span class="hljs-comment">//</span>
<span class="hljs-attr">type</span>: <span class="hljs-string">'video/webm'</span> <span class="hljs-comment">// Et il le fait en webm</span>
})
chunks = [];
URLvideoCouleur = URL.createObjectURL(blob);
playBack = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"playBack"</span>);
playBack.src = URLvideoCouleur;
playBack.controls = <span class="hljs-literal">true</span>;
blobVideoCouleur = blob;
}
</code></pre></div>
<p>J’ai eu pas mal de soucis avec cette fonction, c’est pourquoi il y a plein de <code>console.trace</code> un peu partout, pour suivre l’exécution étape par étape. Ca m’a mené à corriger un dernier bug. La "solution" que j’ai trouvée était une division par 4 dans cette section de la fonction <code>detectContours</code> : </p>
<div class="hljs-code-div hljs-code-js"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span></div><pre><code class="hljs language-js"> <span class="hljs-keyword">const</span> outputImageData = <span class="hljs-keyword">new</span> ImageData(
<span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8ClampedArray</span>(cvOutput.data),
cvOutput.cols,
cvOutput.rows / <span class="hljs-number">4</span>
);
</code></pre></div>
<p>J’ai fait ça car apparemment ImageData a besoin que la taille totale des données soit largeur_frame*hauteur_frame*4, à cause des 4 couleurs (RGBA), mais moi j’ai une seule couche, en noir et blanc, après la détection des contours, donc je divise par 4 pour qu’il arrête de râler…
A partir de là, j’ai plus aucune erreur dans la console, ou interruption ou autre, pour me guider, mais malheureusement le comportement n’est pas celui attendu. <code>playBack</code> ne joue pas ma vidéo filtrée à la place de la vidéo "normale". Il me donne juste un carré noir avec les contrôles du player, mais inutiles car la vidéo a une durée de 0s.
<img src="/media/galleries/17687/3c6b8d46-f8d0-48de-a2aa-ac2b25e64bb0.png" alt="Screenshot_7.png"><img alt="ce qui s'affiche au lieu de ma vidéo filtrée"></p>
<p>J’ai plus la console pour avance je disais, et j’ai plus d’idée farfelue comme la division par 4. Avez-vous une suggestion de ce qui peut clocher ? Aussi, pour moi cette division par 4 est un signe que ma fonction detectContours est plus que douteuse, et en la regardant ça m’a l’air d’une grosse usine à gaz. Il n’y a pas une méthode plus simple pour appliquer un filtre de détection des contours en js ? Merci par avance !</p>[Production de vidéos] Berry's Pictures, message #2021512019-04-21T11:53:41+02:00Max J.R. Charles/@Max%20J.R.%20Charleshttps://zestedesavoir.com/forums/sujet/12376/production-de-videos-berrys-pictures/?page=1#p202151<p>Bonjour à tous !</p>
<p>Je suis Max, j’ai 22 ans et je suis aujourd’hui à Paris en tant que coordinateur technique dans une société de production. Je tiens un blog sous le pseudonyme Max J.R. Charles. Je vous partage aujourd’hui un "article" visant à vous faire découvrir un collectif et pourquoi pas rencontrer d’autres futurs membres !</p>
<h4 id="en-savoir-plus-sur-le-projet">En savoir plus sur le projet<a aria-hidden="true" href="#en-savoir-plus-sur-le-projet"><span class="icon icon-link"></span></a></h4>
<h5 id="quest-ce-que-berrys-pictures">Qu’est-ce que Berry’s Pictures ?<a aria-hidden="true" href="#quest-ce-que-berrys-pictures"><span class="icon icon-link"></span></a></h5>
<p>Berry’s Pictures est un collectif de passionnés de vidéo, de musique et d’écriture. Nous ne sommes pas tous issus d’écoles de cinémas, mais nous avons tous un intérêt commun : le cinéma de genre. Nous sommes aussi intéressés par la science-fiction que par le fantastique, par le polar et le thriller que par le drame. Nous réalisons des vidéos depuis 2015.</p>
<p>###L’origine de Berry’s Pictures</p>
<p>J’ai découvert mon amour et ma passion pour le cinéma très tôt. Cette passion m’a alors logiquement influencée sur mon choix de mes études post-bac. Je me suis installé à Blois et j’ai alors découvert que d’autres vivaient ce 7ème comme moi. Avec la même passion, la même vision, la même approche. On a commencé à faire des choses ensembles. On a commencé à produire sous le nom de Berry’s Pictures: des courts-métrages, des sketchs, des captations… On essayait des choses, sans véritable ambition, avec des vidéos réussites, d’autres ratées. Mais par ce projet, je voyais que quelque chose d’intéressant naissait.</p>
<p>Lorsque je me suis installé dans la ville de Nevers, je me suis rapproché de deux amis, peut-être amateurs mais qui n’ont rien à envier aux professionnels. Eux aussi de leur côté réalisaient des vidéos. Lorsque je me suis installé sur Paris il y a un an, je me suis rapproché d’une amie compositrice, d’un ami du lycée qui commençait sa carrière d’acteur à la télévision…</p>
<p>J’ai alors réalisé que depuis tout petit, d’autres autour de moi avaient cette envie partagée de raconter des histoires. Si on se réunissait tous, on avait finalement chacun nos spécialités, d’un côté la technique pure, de l’autre l’écriture. On pouvait créer notre studio de production. On s’est retrouvé, on a de nouveau tenté. Nous avons ainsi créé Berry’s Pictures ensemble : comme quelque chose de plus sérieux.</p>
<p>###Objectif</p>
<p>Nous avons traversé des hauts et des bas, certains ont rejoint le collectif le temps d’un projet, le projet a changé aussi sa vision des choses à plusieurs reprises.</p>
<p>Aujourd’hui, nous avons des lacunes dans certains domaines :</p>
<ul>
<li>Dans l’écriture,</li>
<li>La prise du son,</li>
<li>Les effets spéciaux,</li>
<li>Les décors,</li>
<li>Le jeu des acteurs,</li>
<li>Le maquillage,</li>
<li>Les costume,</li>
<li>La photographie</li>
</ul>
<p>La plupart des membres se sont installés sur Paris. D’autres se situent un peu partout dans la France (et aussi au Canada). Nous nous rassemblons régulièrement lors des productions.</p>
<p>Nous voulons rencontrer des nouveaux visages pour :</p>
<ul>
<li>Combler nos lacunes,</li>
<li>Professionnaliser le collectif tout en conservant notre indépendance, le côté produire en bricolant,</li>
<li>Être plus rigoureux lors de la préparation, être plus efficace lors du tournage,</li>
<li>Raconter des histoires impactant mieux le spectateur.</li>
</ul>
<p>Nous aimerions par cette même occasion concrétiser notre projet de longue date :</p>
<ul>
<li>A savoir devenir une association loi 1901,</li>
<li>Afin de financer aussi bien le matériel, nos déplacements que les différents frais engendrés par les tournages.</li>
</ul>
<p>La création de cette association dépend de nos futures rencontres ainsi que de la qualité de nos futures réalisations.</p>
<p>##Le projet et son originalité</p>
<p>Nous sommes aujourd’hui 4 membres principaux et nous travaillons avec une chef opératrice, une compositrice et deux auteurs. Nous travaillons sur des courts-métrages, des clips et des captations :</p>
<ul>
<li>Dont un polar,</li>
<li>Une série audio,</li>
<li>Deux courts-métrages de science-fiction,</li>
<li>Un sketch</li>
<li>Un court-métrage pour le concours "Tous égaux"</li>
</ul>
<p>Le matériel (intéressant) à notre disposition actuellement :</p>
<ul>
<li>Panasonic GH4,</li>
<li>Des objectifs Canon 50mm et Canon 11–16mm</li>
<li>Stabilisateur Ronin DJI S,</li>
<li>Des panneaux LED</li>
</ul>
<p>Voici des projets déjà réalisés :</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=doftivb6VzI">Sketch "Sushi Bomb"</a></li>
<li><a href="https://www.youtube.com/watch?v=tTFi4i7BC-o">Sketch "Tout pour le magot"</a></li>
<li><a href="https://www.youtube.com/watch?v=Ph1Iwphc1WU">Captation "Le bal des sorciers 2018"</a></li>
<li><a href="https://www.youtube.com/watch?v=bURmtlZ0JO0">Clip pour Bruno Pitch</a></li>
</ul>
<p>Nous avons également un logiciel fait maison qui permet de gérer nos productions, nos agendas et nos contacts.</p>
<p>##Recrutement</p>
<p>Nous recherchons tout passionné par au moins l’un des points suivant :</p>
<ul>
<li>Le cinéma,</li>
<li>L’animation,</li>
<li>L’écriture,</li>
<li>Le dessin,</li>
<li>La captation,</li>
<li>Les effets spéciaux,</li>
<li>La photographie</li>
<li>Le monde de l’audiovisuel</li>
</ul>
<p>Nous recherchons :</p>
<ul>
<li>Des photographes plateau,</li>
<li>Des costumiers/costumières,</li>
<li>Des maquilleurs/maquilleuses,</li>
<li>Des opérateurs/opératrices VFX,</li>
<li>Des opérateurs caméra secondaires (making-of),</li>
<li>Des dessinateurs pour la réalisation des storyboards,</li>
<li>Des assistants producteurs,</li>
</ul>
<p>Des points requis :</p>
<ul>
<li>Avoir du temps libre à consacrer pour le projet,</li>
<li>Habiter en région Parisienne ou pouvoir se déplacer sur Paris,</li>
<li>Être à l’écoute et s’avoir se faire écouter,</li>
<li>Vouloir nous suivre dans ce projet sur le long terme,</li>
<li>Vouloir participer bénévolement au projet</li>
</ul>
<p>Si ce projet vous inspire et que vous aimeriez apporter votre pierre à l’édifice, vous pouvez nous contacter :</p>
<ul>
<li><a href="https://twitter.com/berryspictures">Soit par Twitter ici</a></li>
<li><a href="https://www.facebook.com/berryspictures/">Soit par Facebook ici</a></li>
<li>Soit par mail à contact@berrys.pictures</li>
</ul>
<p>Si vous avez un portfolio, une chaîne Youtube ou tout autre élément pouvant montrer vos créations, n’hésitez-pas !</p>
<p>Merci d’avoir pris du temps pour me lire !</p>
<p>Maxime et le collectif !</p>Créer une vidéo en python , message #1453262017-03-22T16:33:49+01:00missed.ytb/@missed.ytbhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145326<p>Alors mon problème maintenant c’est que j’ai cette ligne de code:
<code>subprocess.call(['ffmpeg -y -i ' + str(i) + '.jpg -i ' + str(i) + '.mp3 -acodec copy -vcodec mjpeg ' + str(i) +'.avi'])</code>
(la commande ffmpeg fonctionne quand je ne la lance pas depuis python)
Et python me retourne:
<code>FileNotFoundError: [WinError 2] Le fichier spécifié est introuvable</code></p>
<p>Edit: commande trouvée: subprocess.Popen(’ffmpeg -y -f concat -i merge.txt -c copy result.avi’, shell=True,stdout=subprocess.PIPE,stderr=subprocess.PIPE)</p>Créer une vidéo en python , message #1452122017-03-21T20:00:30+01:00missed.ytb/@missed.ytbhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145212<p>Ah oui pas bête j’y avais pas pensé merci beaucoup!</p>
<p>EDIT: parfait, maintenant j’ai un autre probleme, j’ai essayé subprocess pour lancer les commandes ffmpeg mais rien ne bouge, je précise que ces même commandes fonctionnent bien en console cmd.</p>Créer une vidéo en python , message #1452102017-03-21T19:58:16+01:00AmarOk/@AmarOkhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145210<p>Ouai je donnais qu’un exemple. Mais sinon un truc possible c’est de faire ça pour tous tes fichiers puis de concaténer les vidéos <img alt=";)" src="/static/smileys/clin.png"></p>Créer une vidéo en python , message #1452092017-03-21T19:52:58+01:00missed.ytb/@missed.ytbhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145209<p>Salut!
Merci de ta réponse, en effet c’est un outil très puissant, cependant le code que tu m’as envoyé ne combine que la 1ere image et la première bande son.
Je vais faire des recherches de mon coté</p>Créer une vidéo en python , message #1452022017-03-21T19:12:59+01:00AmarOk/@AmarOkhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145202<p>En soit, ce que tu veux, c’est écrire un fichier vidéo.</p>
<p>Soit tu écris le fichier avec un script. Soit tu utilises un truc qui existe et qui fais le taf. <code>ffmpeg</code> fais parfaitement ce que tu décrit. Un truc genre
<code>ffmpeg -loop 1 -shortest -y -i 0.png -i 1.mp3 -acodec copy -vcodec mjpeg result.avi</code>
doit faire ce que tu veux (image + son = vidéo).</p>
<p>Bien sur, ffmpeg te permet d’écrire plein de format, de concaténer des vidéos, etc. Bref utilise <code>ffmpeg</code> <img alt=":)" src="/static/smileys/smile.png"></p>Créer une vidéo en python , message #1451302017-03-21T00:04:20+01:00jojoo88/@jojoo88https://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145130<p><sup>:ange:<del>-> <code>cpp
[![Image utilisateur]()]()</code> -></del></sup></p>Créer une vidéo en python , message #1451042017-03-20T21:02:10+01:00missed.ytb/@missed.ytbhttps://zestedesavoir.com/forums/sujet/8248/creer-une-video-en-python/?page=1#p145104<p>Salut à tous!</p>
<p>Voila j’aimerais savoir comment creer une vidéo en python, d’apres mes recherches, openCV ferait l’affaire mais mon script doit tourner sous python 3.5.</p>
<p>J’ai vu qu’il existait une commande sous linux qui fait ceci mais j’ai besoin de faire quelque chose de précis:</p>
<p>Combiner une image, fixe dans un premier temps avec un son et ainsi passer au son suivant après la fin du premier donc en somme:</p>
<p>-Combiner 0.mp3 avec 0.png pour une durée égale à celle de 0.mp3</p>
<p>-A la suite de la video, combiner 1.mp3 avec 1.png</p>
<p>-ect</p>
<p>Merci de m’éclairer sur ce sujet <img alt=":)" src="/static/smileys/smile.png"></p>Intégrations des videos youtube venant d'une play list, message #106232014-07-23T10:13:48+02:00Javier/@Javierhttps://zestedesavoir.com/forums/sujet/786/integrations-des-videos-youtube-venant-dune-play-list/?page=1#p10623<p>Pas forcément que depuis une playlist d'ailleurs, n'importe quelle vidéo qui possède plus d'un <em>query parameter</em>.Notamment le fameux paramètre <code>feature=</code> que j'ai jamais trop trop compris d'où il venait.</p>
<p>Pas du tout bloquant mais ça peut être gênant à terme. Peut-être se baser sur <a href="http://stackoverflow.com/questions/2597080/regex-to-parse-youtube-yid?rq=1">ce genre de regex</a></p>Intégrations des videos youtube venant d'une play list, message #106062014-07-23T08:16:59+02:00Eskimon/@Eskimonhttps://zestedesavoir.com/forums/sujet/786/integrations-des-videos-youtube-venant-dune-play-list/?page=1#p10606<p>Faudrait que Doc Kje passe par la, c'est lui qui s'est occupe du parseur markdown</p>Intégrations des videos youtube venant d'une play list, message #106022014-07-23T02:47:10+02:00Saroupille/@Saroupillehttps://zestedesavoir.com/forums/sujet/786/integrations-des-videos-youtube-venant-dune-play-list/?page=1#p10602<p>Bonsoir,</p>
<p>Quand on copie/colle le lien d'un video provenant d'une playlist, le zmarkdown semble ne pas vouloir parser le lien.</p>
<p>Par exemple pour la video suivante :</p>
<figure><iframe allowfullscreen="true" frameborder="0" height="315" src="https://www.youtube.com/embed/FEFETKhhq8w" width="560"></iframe>
<figcaption><p>Exemple de video</p></figcaption></figure><p>Si on prend la playlist suivante, la video ne s'affiche plus.</p>
<p>!(https://www.youtube.com/watch?v=FEFETKhhq8w&index=1&list=PLxj9UAX4Em-Lz5btngxMVZxf_B44GETVz)
Video : Exemple ou ça bogue</p>
<p>Je n'ai pas vu ce bogue reporté.</p>
<p>Merci d'avance,</p>
<p>Bonne soirée <img alt=";)" src="/static/smileys/clin.png"></p>