HTML5权威指南 12.WebRTC通信

最新推荐文章于 2024-10-29 18:42:40 发布

转载最新推荐文章于 2024-10-29 18:42:40 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wingzw/p/7448810.html

本文介绍了一种检测浏览器是否支持getUserMedia API的方法，并通过示例展示了如何使用navigator.mediaDevices.getUserMedia来捕获和显示用户的音频及视频流，同时提供了截图功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>