html5 视频拍照

最新推荐文章于 2024-09-10 12:55:25 发布

qq_36028348

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量172

点赞数

原文链接：http://www.voidcn.com/article/p-bsczgiwb-nh.html

版权

这篇博客演示了如何使用HTML5的getUserMedia接口在浏览器中获取摄像头权限并播放视频流。代码示例展示了在Chrome或OperaNext等支持该接口的浏览器中，如何设置事件监听器、请求用户媒体设备，并将视频流显示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>websocket_TEST</title>  
 
    <script type="text/javascript">
 
  // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
// 设置事件监听器
window.addEventListener("DOMContentLoaded", function() {
    if (navigator.mediaDevices === undefined) {
        var div = document.createElement("div");
        div.innerHTML = 'mediaDevices not supported';
        document.body.appendChild(div);
    }

    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({
                audio: true,
                video: {
                    width: 1280,
                    height: 720
                }
            },
            function(stream) {
                var video = document.querySelector('video');
                video.srcObject = stream;
                video.onloadedmetadata = function(e) {
                    video.play();
                };
            },
            function(err) {
                alert("The following error occurred: " + err.name);
            }
        );
    } else {
        var div = document.createElement("div");
        div.innerHTML = 'getUserMedia not supported';
        document.body.appendChild(div);
        alert("getUserMedia not supported");
    }

}, false);
    </script>
</head>
     <body>
<div class="demo-wrapper">

    <h1>HTML5 获取摄像头和视频控制接口</h1>

    <p class="demo-intro">使用Opera Next 或 Chrome Canary，这个页面可以用来自拍。请自行添加自拍逻辑。</p>

    <!--
		Ideally these elements aren't created until it's confirmed that the 
		client supports video/camera, but for the sake of illustrating the 
		elements involved, they are created with markup (not JavaScript)
	-->
    <video id="video" width="640" height="480" autoplay="" playsinline muted></video>
    <button id="snap" class="sexyButton">Snap Photo</button>
    <canvas id="mycanvas" width="640" height="480"></canvas>

</div>
</body>
</html>