Posts

show active canvas on camera

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Show toggle </ title >     < style >         .img-canvas-container {             position : relative ;             width : 500px ;             height : 500px ;         }         .img-canvas-container img , .img-canvas-container canvas {             position : absolute ;             top : 0 ;             left : 0 ;         }         canvas {             border : 3px solid #333 ;         ...

change rules check

import ast class VideoStream():     def __init__(self):         self.rules= {}         self._OldRules = None         self._NewRules= None          @property     def NewRules(self):         return self._NewRules              @NewRules.setter     def NewRules(self, newData):         self._NewRules = newData         if not self._OldRules:             self._OldRules = self._NewRules             self.processData(newData)                      else:             for ids in newData.keys():                 if ids in self._OldRules.keys():                     s...

show canvas on image when button is clicked

  < div class = "info" >     < p id = "points-info" > No points yet </ p > </ div > < div class = "output" >     < img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width = "500" height = "500" >     < canvas id = "canvas" width = "500" height = "500" ></ canvas >     < p id = "coordinates" ></ p > </ div > < button id = "show-canvas-btn" > Show Canvas </ button > < style > canvas {     width : 500px ;     height : 500px ;     display : none ;     border : 3px solid #333 ;     background-size : cover ;     cursor : crosshair ; } </ style > < script > var canvas = document . getElementById ( 'canvas' ); var ctx = canvas . getContext (...

first try:show canvas selected area

  < div class = "info" >     < p class = "points-info" > No points yet </ p >     < input type = "text" placeholder = "Image URL" > </ div > < div class = "output" >         < canvas id = "canvas" width = "500" height = "500" style = " border: 1px solid black;" ></ canvas > < p id = "coordinates" ></ p > </ div > < style > canvas {     width : 500px ;     height : 500px ;     display : inline-block ;     border : 3px solid #333 ;     background-size : cover ;     cursor : crosshair ; } .zoom {     width : 100px ;     height : 100px ;     border : 3px solid #333 ;     background-size : fill ;     border-radius : 50px ;     cursor : crosshair ; } .magnify {     width : 100px ;     height : 100px ;     backgrou...

live camera web app flsak

index.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Camera Stream App </ title > </ head > < body >     < h1 > Camera Stream App </ h1 >     < form action = "{{ url_for('add_camera') }}" method = "post" >         < label for = "rtsp_link" > RTSP Link: </ label >         < input type = "text" id = "rtsp_link" name = "rtsp_link" required >         < button type = "submit" > Add Camera </ button >     </ form >     < div >         {% for camera_id, camera_info in camera_streams.items() %}     ...

last gpt4 live camera

 import React, { useEffect, useRef, useState } from 'react'; import { View, StyleSheet, Dimensions, Image } from 'react-native'; import VLCPlayer from 'react-native-vlc-player'; import * as tf from '@tensorflow/tfjs'; import { fetch } from '@tensorflow/tfjs-react-native'; import { decodeJpeg } from '@tensorflow/tfjs-react-native'; const ObjectDetection = () => {   const vlcPlayerRef = useRef(null);   const modelRef = useRef(null);   const streamingRef = useRef(false);   const [overlayImage, setOverlayImage] = useState(null);   useEffect(() => {     const loadModel = async () => {       try {         await tf.ready();         modelRef.current = await tf.loadGraphModel(           fetch(             'https://tfhub.dev/tensorflow/ssd_mobilenet_v2/2/default/1',             { method: 'GET' }     ...

new with online tf model

import React, { useEffect, useRef } from 'react'; import { View, StyleSheet, Dimensions, Image } from 'react-native'; import VLCPlayer from 'react-native-vlc-player'; import * as tf from '@tensorflow/tfjs'; import { fetch } from '@tensorflow/tfjs-react-native'; const ObjectDetection = () => {   const vlcPlayerRef = useRef(null);   const modelRef = useRef(null);   const streamingRef = useRef(false);   useEffect(() => {     const loadModel = async () => {       try {         await tf.ready();         modelRef.current = await tf.loadGraphModel(           fetch(             'https://tfhub.dev/tensorflow/ssd_mobilenet_v2/2/default/1',             { method: 'GET' }           )         );         streamingRef.current = true;       } catch ...