HTML5权威指南 12.WebRTC通信

1         function hasGetUserMedia(){
2             return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.webkitGetUserMedia);
3         }
4 
5         if(hasGetUserMedia()){
6             alert("支持");
7         }else{
8             alert("不支持");
9         }

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8 
 9     </style>
10 </head>
11 
12 <body>
13     <video id="myVideo" width="400" height="300" autoplay></video>
14     <script>
15         navigator.mediaDevices.getUserMedia({ audio: true, video: true })
16             .then(function (stream) {
17                 var video = document.querySelector('video');
18                 // Older browsers may not have srcObject
19                 if ("srcObject" in video) {
20                     video.srcObject = stream;
21                 } else {
22                     // Avoid using this in new browsers, as it is going away.
23                     video.src = window.URL.createObjectURL(stream);
24                 }
25                 video.onloadedmetadata = function (e) {
26                     video.play();
27                 };
28             })
29             .catch(function (err) {
30                 console.log(err.name + ": " + err.message);
31             });
32     </script>
33 
34 </body>
35 
36 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8 
 9     </style>
10 </head>
11 
12 <body>
13     <video id="myVideo" width="400" height="300" autoplay></video>
14     <img src="" id="img"/>
15     <canvas width="400" height="300" hidden id="canvas">
16     <script>
17         var video = document.getElementById('video');
18         navigator.mediaDevices.getUserMedia({ audio: true, video: true })
19             .then(function (stream) {
20                 
21                 // Older browsers may not have srcObject
22                 if ("srcObject" in video) {
23                     video.srcObject = stream;
24                 } else {
25                     // Avoid using this in new browsers, as it is going away.
26                     video.src = window.URL.createObjectURL(stream);
27                 }
28                 localMedioStream=stream;
29                 video.onloadedmetadata = function (e) {
30                     video.play();
31                 };
32             })
33             .catch(function (err) {
34                 console.log(err.name + ": " + err.message);
35             });
36         var video = document.getElementById('myVideo');
37         video.addEventListener("click",snapshot,false);
38         var canvas =document.getElementById("canvas");
39         var ctx=canvas.getContext("2d");
40         var localMedioStream=null;
41 
42         function snapshot(){
43             if(localMedioStream){
44                 ctx.drawImage(video,0,0,400,300);
45                 document.getElementById("img").src=canvas.toDataURL("image/png");
46             }
47         }
48         
49     </script>
50 
51 </body>
52 
53 </html>

相关阅读:
图片的下方与父元素有间隙兼容性解决方案
 vscode 实用插件
 给网页title前面上图标
 网站换肤
 基于面向对象编程的设计模式
 点击获取验证码进行60秒倒计时
 JVM--内存模型与线程
 JVM学习--jvm监控和故障处理工具
 JVM--GC学习
 JVM--Java类加载机制
原文地址：https://www.cnblogs.com/wingzw/p/7448810.html