mimus-assa / APIAIS

Application Program Interface for Artificial Intelligence Systems
0 stars 1 forks source link

how does using js for the webcam capture will benefit us? #32

Open mimus-assa opened 3 years ago

mimus-assa commented 3 years ago

there are some rumor on the topic but the main one is that we can use the web cam from the webclient in order to make predictions, wich cant be done by now, now we just use some ip cameras or some com/usb video capture display

mimus-assa commented 3 years ago

it is posible w/ the use of websockets and asyncronous stuff, this should be done in the template and work as a javascript, then we can use the web camera images here is an example

<div><div><div style="opacity: 0.7;" class="nyroModalBg"></div><div style="position: fixed; width: 730px; height: 415px; top: -122.5px; left: 364px; overflow: auto;" class="nyroModalCont"><div class="nyroModalLink">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">

<style>
    .nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile{
        max-width: 700px;
        min-height: 250px;
        min-width: 700px;
        padding: 10px 5px;
        position: relative;
        width: 700px;
    }
</style>
<meta http-equiv="Pragma" content="no-cache">
<div class="contenido" style="margin:10px; width:680px">
    <div class="titulo">MEDICO</div>
    <div class="interior" style="width:660px;">

        <div class="resultado">

            <table class="grilla" border="2">
                <tbody><tr>
                    <th style="width: 50%;" align="center"> CAMARA </th>
                    <th> FOTO </th>
                </tr>
                <tr>
                    <td>
                            <!--<img src="http://c4ti:s0p0rt3@10.90.111.190/axis-cgi/mjpg/video.cgi?resolution=320x240" id="videoFoto">-->
                                                    <img src="http://10.90.4.17/axis-cgi/mjpg/video.cgi?resolution=320x240" id="videoFoto">
                                            </td>
                    <td>
                        <img src="img/silueta.jpg" id="fotoMedicoPreview" width="320" height="240"><input type="hidden" id="hiddenimg" name="hiddenimg">
                        <input type="text" id="ip" name="ip" style="height: 1px; width: 1px; opacity: 0;" value="10.90.4.17">
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input type="button" value="Tomar Foto" id="btn_TomarFoto">
                    </td>
                    <td>
                        <!--<input type="button" value="Guardar Foto" id="btn_GuardarFoto" name="btn_GuardarFoto" disabled="disabled">-->
                    </td>
                </tr>
            </tbody></table>

        </div>
    </div>
</div>
</div><script>
    //var inte= setInterval(actualizar,45);

    $("#btn_TomarFoto").click(function() {
        //
        foto = $("#ip").val();
        $.post("catalogos/ct_selectores.php", {opSel: 15, ip: foto}, function(data) {
            $("#hiddenimg").val(data);
            $("#fotoMedicoPreview").removeAttr("src");
            $("#fotoMedicoPreview").attr("src", "arbitros/fotos_medico/tmp/" + data);
            $("#btn_GuardarFoto").removeAttr("disabled");
        });

    });
    $("#btn_GuardarFoto").click(function() {
        var pathImg = $("#hiddenimg").val();
        //$.post("catalogos/ct_selectores.php",{opSel: 16, imgMed: pathImg},function(data){

        //              parent.$("#fotoMedicoImg").removeAttr("src");
        //              parent.$("#fotoMedicoImg").attr("src","arbitros/fotos_medico/"+pathImg);
        //              nmDestroy();        

        parent.$("#fotoMedicoImg").removeAttr("src");
        parent.$("#fotoMedicoImg").attr("src", "arbitros/fotos_medico/tmp/" + pathImg);
        parent.$("#foto").attr("value", pathImg);
        parent.$("#fotoMedicoImg").attr("width", 180);
        parent.$("#fotobarandilla").removeAttr("src");
        parent.$("#fotobarandilla").attr("src", "arbitros/fotos_medico/tmp/" + pathImg);
        parent.$.nmTop().close();

        //});
    });

    /*function actualizar(){
     $("#videoFoto").removeAttr("src");
     $("#videoFoto").attr("src","http://c4ti:s0p0rt3@10.90.111.190/mjpg/video.mjpg?resolution=320x240")
     }*/
</script></div><a href="#" class="nyroModalClose nyroModalCloseButton nmReposition" title="close" style="position: fixed; top: -106.5px; left: 1124px;">Close</a><div style="display: none;" class="nyroModalCont nyroModalHidden"></div><div style="display: none;" class="nyroModalCont nyroModalLoad"></div></div></div>