iframe-proxy | Sunbelt Computer Software

163 lines (144 loc) · 6.13 KB
* jQuery AS3 Webcam
* Copyright (c) 2012, Sergey Shilko (sergey.shilko@gmail.com)
* @author Sergey Shilko
* @see https://github.com/sshilko/jQuery-AS3-Webcam
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title> Example of usage: jQuery AS3 Webcam </title>
        <!--<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>-->
        <script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
    	<script type="text/javascript" src="jquery.webcam.as3.js"></script>
        <style type="text/css">
            .webcam-container {padding:0;margin:0}
            .size640x480 { width:640px; height:480px;}
            .webcam-container object {border:1px solid #000;}
            .webcam-error {color:red;padding-top:10px;}
        </style>
    </head>
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="webcam-container size640x480">
                    <div id="webcam" class="size640x480"></div>
                </td>
            </tr>
            <tr>
                <td class="webcam-text">
                        <select id="popup-webcam-cams"></select>
                    </div>
                        id="popup-webcam-take-photo"
                        type="button"
                        disabled="disabled"
                        value="Take a photo"
                        style="display:none" />
                    <p class="webcam-error"></p>
                </td>
            </tr>
        </table>
        <br/>
        <div id="result"></div>
        <br/>
        <h4>The result above should look similar to this:</h2>
        <img src="the-source.jpeg" align="left" border="1" />
        <script type="text/javascript">
        $(document).ready(function() {
            $("#webcam").webcam({
                swffile: "sAS3Cam.swf?v="+Math.random(),
                previewWidth: 640,
                previewHeight: 480,
                resolutionWidth: 640,
                resolutionHeight: 480,
                 * Determine if we need to stretch or scale the captured stream
                 * @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#scaleMode
                 * @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html
                StageScaleMode: 'noScale', //
                 * Aligns video output on stage
                 * @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageAlign.html
                 * @see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#align
                 * Empty value defaults to "centered" option
                StageAlign: 'TL', 
                noCameraFound: function () {
                    this.debug('error', 'Web camera is not available');
                swfApiFail: function(e) {
                    this.debug('error', 'Internal camera plugin error');
                cameraDisabled: function () {
                    this.debug('error', 'Please allow access to your camera');
                debug: function(type, string) {
                    if (type == 'error') {
                        $(".webcam-error").html(string);
                    } else {
                        $(".webcam-error").html('');
                cameraEnabled:  function () {
                    this.debug('notice', 'Camera enabled');
                    var cameraApi = this;
                    if (cameraApi.isCameraEnabled) {
                        return;
                    } else {
                        cameraApi.isCameraEnabled = true;
                    var cams = cameraApi.getCameraList();
                    for(var i in cams) {
                        $("#popup-webcam-cams").append("<option value='"+i+"'>" + cams[i] + "</option>");
                    setTimeout(function() {
                        $("#popup-webcam-take-photo").removeAttr('disabled');
                        $("#popup-webcam-take-photo").show();
                        cameraApi.setCamera('0');
                    $("#popup-webcam-cams").change(function() {
                        var success = cameraApi.setCamera($(this).val());
                        if (!success) {
                            cameraApi.debug('error', 'Unable to select camera');
                            cameraApi.debug('notice', 'Camera changed');
                    $('#popup-webcam-take-photo').click(function() {
                        var result = cameraApi.save();
                        if (result && result.length) {
                            var actualShotResolution = cameraApi.getResolution();
                            var img = new Image();
                            img.src = 'data:image/jpeg;base64,' + result;
                            $("#result").append(img);
                            alert('base64encoded jpeg (' + actualShotResolution[0] + 'x' + actualShotResolution[1] + '): ' + result.length + 'chars');
                            /* resume camera capture */
                            cameraApi.setCamera($("#popup-webcam-cams").val());
                            cameraApi.debug('error', 'Broken camera');
                    var reload = function() {
                        $('#popup-webcam-take-photo').show();
                    $('#popup-webcam-save').click(function() {
                            reload();
        });
        </script>
    </body>
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

example.html

Latest commit

History

example.html

File metadata and controls
