20211109

3 years ago · 38fdc57c18
parent c8236e4db9
commit 38fdc57c18
1 changed files with 78 additions and 0 deletions
--- a/code/dpro/templates/vedio.html
+++ b/code/dpro/templates/vedio.html
@ -0,0 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Vedio</title>
    <style>
        body{
            background-color:#98b7c4;
        }
        video{
            width: 70%;
            height: 50%;
            margin: 50px auto;
            background-color: aquamarine;
            display: block;
        }
        h3{
            margin-left:50px auto;
        }
    </style>
 </head>
 <body>
 <div>
 <h3><label id="time" style="color: #000; "></label></h3>
 <video id="video"></video>
 </div>
 <script>
    var video = document.getElementById('video');
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia({video : {width: 1000, height: 1000}}).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia({video : {width: 1000, height: 1000}},success, error)
    } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia({video : {width: 1000, height: 1000}}, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia({video : {width: 1000, height: 1000}}, success, error);
    }
        function success(stream) {
        //兼容webkit核心浏览器
        // let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);
        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }
    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }
    function mytime(){
    var a = new Date();
    var b = a.toLocaleTimeString();
    var c = a.toLocaleDateString();
    document.getElementById("time").innerHTML = c+"&nbsp"+b;
    }
    setInterval(function() {mytime()},1000);
 </script>
 </body>
 </html>