jQuery移动端调用摄像头拍照插件WebcamJS

所属分类:媒体-图像

 39122  315  查看评论 (17)
分享到微信朋友圈
X
jQuery移动端调用摄像头拍照插件WebcamJS ie兼容12

注:意请在手机上预览,PC无效果

使用方法

首先, 包括 Webcam.js JavaScript 

<script type="text/javascript" src="../webcam.min.js"></script>

html

<div id="results">您拍摄的图像将显示在此处..。</div>

配置一些设置并连接相机

<script language="JavaScript">
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    Webcam.attach('#my_camera');
</script>

用于处理拍摄快照并在本地显示的代码

<script language="JavaScript">
    function take_snapshot() {
        // take snapshot and get image data
        Webcam.snap(function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML =
                '<h2>Here is your image:</h2>' +
                '<img src="' + data_uri + '"/>';
        });
    }
</script>
相关插件-图像

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 31397  334

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 29354  306

canvas图片+文字合成

canvas图片+文字合成,实现照片合成效果,界面有点丑但是功能OK的。
  图像
 46185  362

jQuery图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 43799  341

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    lieryi 0
    2023/7/21 18:14:24
    安卓系统手机不能调用摄像头? 回复
    歌者 0
    2021/10/12 17:03:08
    演示里的js是怎么写的
    回复
    LOVE小皇帝LBJ 0
    2021/5/28 9:46:37
    只有iphone才能使用? 回复
    じ☆①仟零①液... 0
    2021/3/31 17:35:11
    感谢楼主提供!
    如何做扫码解析啦?
    还有视频怎么弄才全屏自适应的?
        西瓜0
        2021/3/31 20:41:29

        扫码解析请参考

        https://www.jq22.com/jquery-info23556
    回复
    Zhang01 0
    2020/12/3 13:50:38
    请问这个方法怎么调用后摄像头???
        - -!0
        2021/11/20 3:25:24
        我也想知道
        じ☆①仟零①液...0
        2022/7/17 21:43:23
        解决了没有?我也想知道。
        じ☆①仟零①液...1
        2022/7/18 8:36:38

        我实现了,分享给大家。

        $(function () {
            Webcam.set({
                width: 320,
                height: 320,
                image_format: 'png',
                jpeg_quality: 300,
        constraints:{
        facingMode: 'environment'
        }
            });
            Webcam.attach('#camera');
            window.setInterval("scan()", 5000);
        });
        じ☆①仟零①液...1
        2022/7/18 8:38:01

        就加这句:

        constraints:{
            facingMode: 'environment'
        }
        じ☆①仟零①液...0
        2022/7/18 9:12:58
        有个问题,我用来做扫一扫,不能自动聚焦,识别起来费力。
    回复
    苏格拉底 0
    2019/7/5 10:32:01
    谷歌浏览器http下打不开摄像头,必须https,localhost可以 回复
    柯豆豆 0
    2019/6/26 18:32:52
    这个 不同手机 图片宽高 这个怎么定义 我看只能写死
        不会游泳の鱼0
        2020/5/17 10:48:55
        写一个响应式啊
    回复
    mike8625 0
    2019/5/27 9:45:55
    根本无效,微信和手机自带的浏览器都不行,现在手机上基本没有能打开摄像头的方法,除非你是用input调用相机,想在自己页面上调用摄像头,99%的浏览器是做不到的.就记得以前uc浏览器可以,不知道现在还行不行
        西瓜0
        2019/5/27 10:37:32

        iphone下微信,chrome浏览器测试,可以打开照相机拍照并获取照片。不知道你用的什么手机测试的?

    回复
    陪伴是最长情的告白 0
    2019/5/27 9:06:38
    有点意思哈………………………… 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复