Capturing picture from user's camera with broswer

[wang0618]

This demo requires Pillow package installed.

import io
from base64 import b64decode

from PIL import Image

from pywebio.output import *
from pywebio.session import eval_js, run_js

capture_picture_js = """(() => {
    if(canvas===null) return;
    if(player.srcObject.getVideoTracks()[0].readyState!=='live') return;
    let context = canvas.getContext('2d');
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL('image/png');
})()
"""

request_camera_js = """
new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
          player.srcObject = stream;
          canvas = document.createElement('canvas');
          canvas.height = stream.getVideoTracks()[0].getSettings().height;
          canvas.width = stream.getVideoTracks()[0].getSettings().width;
          resolve();
    }).catch((e)=>{resolve(''+e);});
});
"""


def main():
    # Warning: Direct access to the camera is a powerful feature. 
    # It requires consent from the user. If you deploy your app in network, 
    # your site MUST be on a secure origin (HTTPS).

    support = eval_js("'mediaDevices' in navigator")
    if not support:
        toast("Can't open camera, please make sure this app is on HTTPS", color='error')
        return

    # Show the camera stream on a video widget
    put_html("""
    <video id="player" autoplay></video>
    <script>
      player = document.getElementById('player');
      canvas = null;
    </script>
    """)

    camera_error = eval_js(request_camera_js)
    if camera_error:
        toast('Camera opening error: %s' % camera_error, color='error')
        return

    def capture_picture():
        data_url = eval_js(capture_picture_js)
        if not data_url:
            return
        _, encoded = data_url.split(",", 1)
        content = b64decode(encoded)
        # content is image in bytes
        return content

    def show_thumbnail():
        img_data = capture_picture()
        if not img_data:
            toast('Fail to capture picture', color='error')
            return
        # put_image(img_data)

        img = Image.open(io.BytesIO(img_data))
        img.thumbnail((100, 100))
        put_image(img)

    def stop_camera():
        run_js("player.srcObject.getVideoTracks().forEach(track => track.stop());")

    put_buttons(['Capture a thumbnail', 'Stop camera'], onclick=[show_thumbnail, stop_camera])


if __name__ == '__main__':
    import pywebio

    pywebio.start_server(main, port=8080, debug=True)

[wang0618]

Also note: Direct access to the camera is a powerful feature. If you deploy your app in network, your app MUST be on HTTPS.