webcam html5+PHP 实现网站调用摄像头拍照，存储照片和照片预览功能

1HTML

 <div>
                    <div id="camera" style="float: left">

                    </div>
                    <div style="float: left;margin-left: 60px;">
                        <div>
                            <a class="button" onclick="return take_snapshot()"><span>点击拍照</span></a>
                        </div>
                        <div>
                            <img src="" style="width: 110px; height: 160px;border:1px solid #000000" id="pic"
                                 name="pic"/>
                        </div>

                    </div>
                </div>

2JS

 webcam.set_api_url('{{url('stu/action')}}');
                    webcam.set_quality(90); // JPEG quality (1 - 100)
                    webcam.set_shutter_sound(true); // play shutter click sound
                    $('#camera').html(webcam.get_html(240, 320, 300, 420));

webcam.set_hook('onComplete', 'my_completion_handler');

                    function take_snapshot() {
                        var card_id = $("#card_id").val();
                        var sname = $('#sname').val();
                        if (card_id == null || card_id == '' || sname == null || sname == '') {
                            alertMsg.warn('请先完善身份信息');
                        } else {
                            document.all['base64'].src = "";
                            // take snapshot and upload to server
                            webcam.snap();
                        }
                    }

                    function my_completion_handler(msg) {

                        // extract URL out of PHP output
                        if (msg.match(/(http\:\/\/\S+)/)) {
                            var image_url = msg.split('*');
                            // show JPEG image in page
                            var pic = image_url[image_url.length - 1];

                            alertMsg.correct('拍照成功');
                            $("#pic").attr("src", 'data:image/jpeg;base64,' + pic);
                            $("#base64").val(pic);
                            var card_id = $('#card_id').val();
                            var sname = $('#sname').val();
                            $("#photopath").val(card_id + sname + '.png');
                            // reset camera for another shot
                            webcam.reset();
                        }
                        else alertMsg.error("拍照失败");
                    }

3PHP

public function  action()
    {
        $filename = date('YmdHis') . '.png';
        $result = file_put_contents(storage_path() . '/photo/' . $filename, file_get_contents('php://input'));
        if (!$result) {
            print "ERROR: Failed to write data to $filename, check permissions\n";
            exit();
        }
        $path = storage_path() . '/photo/' . $filename;
        $base64_img = $this->base64EncodeImage($path);
        unlink($path);
        $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '*' . $base64_img;
        Log::info($url);
        print "$url\n";

    }

最后实现了拍照存储预览，功能实现的基本源码https://download.csdn.net/download/qq_29099209/10563094，如需以上功能则根据上述代码修改即可