chrome调用本地摄像头

最新推荐文章于 2024-06-07 14:23:34 发布

jackletter

最新推荐文章于 2024-06-07 14:23:34 发布

阅读量1.1w

点赞数 3

分类专栏：网络协议大前端

本文链接：https://blog.csdn.net/u010476739/article/details/93851214

版权

大前端同时被 2 个专栏收录

77 篇文章 2 订阅

订阅专栏

网络协议

15 篇文章 0 订阅

订阅专栏

代码下载： https://download.csdn.net/download/u010476739/11260783
试验条件：
chrome: 版本 73.0.3683.86（正式版本）（32 位）
window7

测试的环境：

使用127.0.0.1/localhost均可以打开摄像头
浏览器里直接输入文件地址也行(如：file:///E:/gitee/smartprogram/code/wxapp/photo.html)
其他的地址，比如: http://192.168.1.120/test.html 或 http://www.test.com/test.html 均不可以，必须使用https才行。

前端代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-2.1.1.js"></script>
</head>

<body>
    <video id="video" width="500" height="300" autoplay></video>
    <button id="open">打开摄像头</button>
    <button id="snap">拍照</button>
    <button id="close">关闭摄像头</button>
    <canvas id="canvas" width="500" height="300"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var video = document.getElementById("video");
        $(document).ready(function () {
            $("#open").on("click", function () {
                openVideo(video);
            });
            $("#snap").on("click", function () {
                context.drawImage(video, 0, 0, 500, 300);
            });
            $("#close").on("click", function () {
                closeVideo(video);
            });
        });
        function openVideo(video) {
            videoObj = {
                "video": true
            };
            var errBack = function (error) {
                console.log("Video capture error: ", error.code);
            };
            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.srcObject = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            };
        }
        function closeVideo(video) {
            if (!video) return;
            let stream = video.srcObject
            console.log(stream);
            let tracks = stream.getTracks()
            tracks.forEach(track => {
                track.stop()
            })
            video.srcObject = null;
        }
    </script>
</body>

</html>

直接右键打开或放在web服务器上访问都可以
效果图：
在这里插入图片描述

jackletter

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
6
评论
chrome调用本地摄像头

代码下载：试验条件：chrome: 版本 73.0.3683.86（正式版本）（32 位）window7前端代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text...
复制链接

扫一扫