HTML打开电脑摄像头

最新推荐文章于 2024-05-14 10:41:24 发布

I3E4zm

最新推荐文章于 2024-05-14 10:41:24 发布

阅读量934

点赞数 1

本文链接：https://blog.csdn.net/weixin_41976972/article/details/108908273

版权

这篇博客探讨了如何利用HTML5的MediaDevices接口和JavaScript来获取并激活用户的电脑摄像头，实现网页上的实时视频预览功能。通过创建一个video元素和调用navigator.mediaDevices.getUserMedia接口，可以轻松实现这一功能，为网页应用带来更丰富的交互体验。

摘要由CSDN通过智能技术生成


<!--video用于显示媒体设备的视频流，自动播放-->   

<video  id="video" autoplay style="width: 480px;height: 320px"></video>

<!--拍照按钮-->

<div>

    <button id="capture">拍照</button>

</div>

<!--描绘video截图-->

<canvas id="canvas" width="480" height="320"></canvas>

<script>  

    var video = document.getElementById('video');

    var canvas = document.getElementById('canvas');

    var capture = document.getElementById('capture');

    var context = canvas.getContext('2d');



    //成功回调函数

    function success(stream){

        //兼容webkit核心浏览器

        var CompatibleURL = window.URL || window.webkitURL;

        //将视频流转化为video的源

        video.srcObject = stream;

        video.play();//播放视频

    }

    function error(error) {

        console.log('访问用户媒体失败ÿ