Replies: 4 comments 4 replies
-
|
Do I understand correctly, that you want to capture an image of the user's webcam and send it to Python? |
Beta Was this translation helpful? Give feedback.
-
|
I found this page. However, javascript/html is not my language. https://stackoverflow.com/questions/12024770/access-camera-from-a-browser |
Beta Was this translation helpful? Give feedback.
-
|
Yako the Developer demostrated on How To Access Webcam In HTML Using JavaScript. The simple and short code works on my laptop, but asks twice for authoration for accessing webcam. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>camera</title>
<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>
<style>
a {
padding: 10px;
background-color: orange;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<video id="webCam" autoplay playsinlne width="800" height="600"></video>
<canvas id="canvas"></canvas>
<a download onClick="takeAPciture()">SNAP</a>
<a download onClick="stopCam()">STOP</a>
<script>
const webCamElement = document.getElementById( "webCam");
const canvasElement = document.getElementById("canvas");
const webcam = new Webcam(webCamElement, "user", canvasElement);
webcam.start();
function takeAPciture(){
let pic = webcam.snap();
document.querySelector("a").href = pic;
}
function stopCam(){
webcam.stop();
}
</script>
</body>
</html>then I try to use the code in HTML to embed a live camera view in my NiceGUI application. However the code does not render any camera view. In fact, it does not ask for permission to use camera at all. So how to fix my buggy code? Thanks from nicegui import ui, Client
@ui.page('/')
async def fn(client):
ui.label('hello')
await client.connected()
ui.add_body_html('<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>')
ui.element("video").props(' id="webCam" autoplay playsinlne width="800" height="600" ')
ui.element("canvas").props(' id="canvas" ')
webCamElement = ui.run_javascript('document.getElementById( "webCam");')
canvasElement = ui.run_javascript('document.getElementById("canvas");')
webcam = ui.run_javascript(f'new Webcam({webCamElement}, "user", {canvasElement});')
ui.run_javascript(f'{webcam}.start();')
ui.run() |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @retsyo! That's an interesting approach. Let me share some thoughts about your code:
Here is what I came up with: def handle_picture(e: events.GenericEventArguments):
image.set_source(e.args)
ui.download(e.args, 'image.png')
video = ui.element('video').classes('w-[400px]')
canvas = ui.element('canvas')
canvas.visible = False
image = ui.image().classes('w-[400px]').on('picture', handle_picture)
ui.add_body_html(f'''
<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>
<script type="text/javascript">
addEventListener("DOMContentLoaded", (event) => {{
window.webcam = new Webcam(getElement({video.id}), 'user', getElement({canvas.id}));
window.webcam.start()
}});
</script>
''')
ui.button('snap', on_click=lambda: ui.run_javascript(f'getElement({image.id}).$emit("picture", window.webcam.snap())'))
|
Beta Was this translation helpful? Give feedback.
-
|
Hi NiceGuis, Following up on the Webcam-topic, I found some really strange behaviour in my code and I hope you can somehow help me with that one. I have the following code, which alloes me to select a webcam and take a picture of it: from nicegui import app, ui, events
import numpy as np
@ui.page(path='/', dark=True)
async def page() -> None:
app.add_static_files('/js', 'js')
session_id = np.random.randint(1,10000)
cache = {}
cache[session_id] = {'session_id': session_id}
ui.add_head_html(f'''<script type="text/javascript" src="/js/webcam-easy.js"></script>''')
ui.add_head_html('''
<script>
async function changeCamera(deviceId) {
try {
console.log('Calling changeCamera')
await window.webcam.info(); // Update Camera Information
await window.webcam.stop(); // Stop current stream
window.webcam.selectCameraByDeviceId(deviceId); // Select Camera
await window.webcam.start(true, deviceId); // Start new stream
} catch (error) {
console.error(error);
}
}
</script>
''')
def handle_image(e: events.GenericEventArguments) -> None:
image.set_source(e.args)
image.content = ''
video_card.visible = False
image_card.visible = True
def mouse_handler(e: events.MouseEventArguments) -> None:
color = 'SkyBlue' if e.type == 'mousedown' else 'SteelBlue'
image.content += f'<circle cx="{e.image_x}" cy="{e.image_y}" r="15" fill="none" stroke="{color}" stroke-width="4" />'
def take_picture() -> None: # Take the Photo
ui.run_javascript(f'getElement({image.id}).$emit("picture", window.webcam.snap())')
async def change_camera() -> None:
device_id = [c['deviceId'] for c in cache[session_id]['cameras'] if c['label'] == video_source.value][0]
response = await ui.run_javascript(f'''
return await new Promise((resolve, reject) => {{
changeCamera('{device_id}')
.then(result => resolve(result))
.catch(error => reject(error));
}});
''', timeout=10.0)
async def get_cameras() -> None:
response = await ui.run_javascript(f'''
return new Promise(async (resolve, reject) => {{
try {{
let cameras = window.webcam.info()
console.log('Available cameras: ', cameras)
resolve(cameras); // Resolve with the list of camera options
}} catch (error) {{
reject(error); // Reject on error
}}
}});
''', timeout=10.0)
for i,r in enumerate(response):
if len(r['label']) == 0:
r['label'] = f'Camera {i+1}'
cache[session_id]['cameras'] = response
cameras = [r['label'] for r in response]
video_source.options = cameras
video_source.value = cameras[0]
video_source.update()
app.on_connect(get_cameras)
with ui.card() as video_card:
video = ui.element('video').classes('w-fit sm:w-[400px]')
canvas = ui.element('canvas')
canvas.visible = False
with ui.row():
video_source = ui.select(options= [],
# value=,
on_change=change_camera
)
ui.button('Take Photo', on_click=take_picture).tailwind.align_self('end')
ui.run_javascript(f'''
window.webcam = new Webcam(getElement({video.id}), 'environment', getElement({canvas.id}));
console.log('Webcam Infos', window.webcam.info())
window.webcam.start();
''', timeout=10.0)
with ui.card() as image_card:
image_card.visible = False
image = ui.interactive_image(on_mouse=mouse_handler, events=['mousedown', 'mouseup'], cross=True).classes('w-fit sm:w-[400px]').on('picture', handle_image)
ui.label('Please click on the product on the image!')
ui.run(title='RetAIl Purchase Navigator',
favicon='🚀',
storage_secret='secret'
# port=443,
# ssl_certfile="<path_to_certfile>",
# ssl_keyfile="<path_to_keyfile>",
)I basically use the https://unpkg.com/webcam-easy/dist/webcam-easy.min.js Library, but added a method to select the camera based on the deviceId, which looks like this: /* Select Camera based on device ID */
selectCameraByDeviceId(deviceId) {
if(deviceId == null){
this._selectedDeviceId = '';
}
const camera = this._webcamList.find(webcam => webcam.deviceId === deviceId);
if (camera) {
this._selectedDeviceId = camera.deviceId;
console.log('Device ID:', this._selectedDeviceId);
} else {
throw new Error("Camera with device ID: " + deviceId + " not found");
}
}Now, here's the thing: When I open two instances of the page (e.g. on computer and mobile), when I open the mobile page, the options in the dropdown on the computer are overwritten by ones from the mobile. I am really running out of explanations here and appreaciate your help. Many thanks |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @falkoschindler, your code works. But the bad news is the script I mentioned above can use webcam on windows( no matter I use edge, firefox or chrome) only. It does not support
I have not tested in Linux yet. It seems too hard to make webcam work in different client webbrowser :( |
Beta Was this translation helpful? Give feedback.
-
|
After some investigation and experiment, here comes the conclusion on client side:
Yes, I don't know how to transfer client's image in CAM to sever automatically yet. But I think more JavaScript code should be used. |
Beta Was this translation helpful? Give feedback.
-
|
There also seem to be quite a few vue solutions which might be possible to adapt similar to our custom vue component example:
Or pure javaScript like this minimal proof-of-concept: @ui.page('/')
async def page():
v = ui.element('video')
await ui.context.client.connected()
ui.run_javascript('''
function compressToJpeg(canvas, quality) {
return new Promise((resolve) => {
canvas.toBlob((blob) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
}, 'image/jpeg', quality);
});
}
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
const video = getElement(''' + str(v.id) + ''');
video.srcObject = stream;
video.play();
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
video.addEventListener('play', () => {
setInterval(async () => {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const jpeg = await compressToJpeg(canvas, 0.5);
emitEvent('frame', jpeg);
}, 1000);
});
})
.catch(err => console.error('Error accessing the camera:', err));
''')
ui.on('frame', lambda f: print('frame', f.args[:100], flush=True)) # data received in python |
Beta Was this translation helpful? Give feedback.
-
Question
Everyone can see the image captured by camera on PC/laptop which runs
nicegui-main\examples\opencv_webcam\main.pyBut what if
well, this is maybe a very complex situation, because the user can use windows/linux/Mac OSx/Android/iOS.
thanks
Beta Was this translation helpful? Give feedback.
All reactions