标签：调用 -- H5 video 500 var 摄像头 MediaStream

调用用户设备

调用摄像头：在移动端时回给用户做选择，是选择相册还是打开摄像头；在PC 端会直接打开摄像头。

调用麦克风：在移动端和PC端都是直接打开麦克风。

GetUserMedia()

Navigator.mediaDevices.getUserMedia(constraints,successCallback,errorCallback);

Constraints 调用设备类型

{

Video ：true,  //调用摄像头

Audio:true     //调用麦克风

}

示例：

 <input type="button" value="视频" onclick="getMedia()" />
    <video src="" id="video" width="500px" height="500px"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button onclick="takePhone()" id="but">拍照</button>

<script>
        function getMedia() {
            var constraints = {
                video: {
                    width: 500,
                    height: 500
                },
                audio: true
            };

            //获取摄像头区域
            var video = document.getElementById('video');


            //   该方法返回Promise对象
            //   这个Promise对象返回成功后的会调函数带一个MediaStream对象作为其参数
            //   then()时Promise的方法
            //   then()方法是异步执行，当then()前的所有的方法执行完后再执行then()内部的程序
            //   避免数据没有获取到

            var promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function(MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        }

        // 拍照
        function takePhone() {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 500, 500);
        }
    </script>

标签：调用,--,H5,video,500,var,摄像头,MediaStream
来源： https://blog.csdn.net/weixin_43285360/article/details/118754895

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。