<div id="container_{{ widget.name }}" class="form-group">
    <label for="{{ widget.name }}">{{ widget.attrs.label }}</label>
    
    <input type="{{ widget.type }}" name="{{ widget.name }}" id="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}>   
</div>

<div id="camera_{{ widget.name }}" class="webcam_camera">
    <video id="video_{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}></video>
    <div id="camera_icon_container_{{ widget.name }}" class="webcam_camera_icon_container">
        <svg id="camera_icon_{{ widget.name }}" class="webcam_camera_icon" fill="orangered" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
            <g>
                <circle cx="255.811" cy="285.309" r="75.217"/>
                <path d="M477,137H352.718L349,108c0-16.568-13.432-30-30-30H191c-16.568,0-30,13.432-30,30l-3.718,29H34
                    c-11.046,0-20,8.454-20,19.5v258c0,11.046,8.954,20.5,20,20.5h443c11.046,0,20-9.454,20-20.5v-258C497,145.454,488.046,137,477,137
                    z M255.595,408.562c-67.928,0-122.994-55.066-122.994-122.993c0-67.928,55.066-122.994,122.994-122.994
                    c67.928,0,122.994,55.066,122.994,122.994C378.589,353.495,323.523,408.562,255.595,408.562z M474,190H369v-31h105V190z"/>
            </g>
        </svg>
    </div>    
</div>

<canvas id="canvas_{{ widget.name }}" style="display: none"></canvas>

<div id="output_{{ widget.name }}" class="webcam_output">
    <img id="picture_preview_{{ widget.name }}">
</div>

<div style="clear: both;"><br></div>

<script>
document.addEventListener('DOMContentLoaded', function(event) {
    new Webcam("{{ widget.name }}", "{{ widget.value }}");
});
</script>