如何使用webrtc 一

这是系列一

1、webrtc 调用摄像头 1.1、api

使用API : getusermedia navigator.mediaDevices.getUserMedia(Constraints) Constraints 是限制流参数，比如画面宽高。

1.2、加入adapter-laster.js

为了保证摄像头在浏览器中兼容API而使用

3、使用限制宽高 在webrtc中也可以使用16：9 的样式来限制宽高，很简单，如下使用

const Constraints = {
            video: {width: {exact: 640}, height: {exact:360}}
        };

上面本来是640 480的画面我们截取了640 360

结果如下： 4 、截图 使用canvas的api

context.drawImage(video, 0, 0, 375, 180);

接着我们使用定时器定时取固定区域的图片，得到的结果如上图所示。

 window.setInterval(function(){
        context.drawImage(video, 0, 0, 375, 180);
    },40);

意思为每隔40毫秒画一幅

2、show me the code

html 代码如下

DOCTYPE html>


    
        
    html5 调用本地摄像头
    
        html,body{
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        video{
            width: 640px;
            height: 360px;
        }
        canvas{
            width: 640px;
            height: 360px;    
            position: absolute;
            left: 0px;
            top: 360px;
            z-index: 100;
        }
    


    
    
    
        const Constraints = {
            video: true,
        };
        var video = document.getElementById("video");
        var context = canvas.getContext("2d");
        var errocb = function (code) {
            alert(code);
        };
        function handleError(error) {
            console.log(`navigator.getUserMedia error: ${error.toString()}.`);
        }

        function gotLocalMediaStream(mediaStream) {
             video.srcObject = mediaStream;
            console.log('Received local stream.');
        }


        navigator.mediaDevices.getUserMedia(Constraints)
        .then(gotLocalMediaStream).catch(handleError);
        
    

    window.setInterval(function(){
        context.drawImage(video, 0, 0, 375, 180);
    },40);