WEBRTC DEMO1：通过浏览器显示摄像头视频_webrtc显示摄像头

作者：AllinToyou | 2024-05-05 13:08:49

踩

webrtc显示摄像头

通过浏览器显示摄像头视频DEMO说明

我们通过一个简单的HTML+JavaScript网页来使用getUserMeida() API，通过这个网页访问本地摄像头并显示本地视频到网页之中。

getUserMedia.html：


<!DOCTYPE html>  
<html>  
<head>  
  
<title>getUserMedia very simple demo</title>  
   
</head>  
<body>  
<div id="mainDiv">  
  
  <h1><code>getUserMedia()</code> very simple demo</h1>  
    
  <p>With this example, we simply call <code>getUserMedia()</code> and display the received stream inside an HTML5 <video> element</p>  
    
  <p>View page source to access both HTML and javascript code...</p>  
  
  <video autoplay></video>  
  
  <script src="js/getUserMedia.js"></script>  
  
</div>  
</body>  
</html>

getUserMedia.js：


navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;  
  
var constraints = {audio: false, video: true};  
var video = document.querySelector("video");  
  
function successCallback(stream) {  
  window.stream = stream; // make the returned stream available to console...  
  if (window.URL) {  
    video.src = window.URL.createObjectURL(stream);  
  } else {  
    video.src = stream;  
  }  
  video.play();  
}  
  
function errorCallback(error){  
  console.log("navigator.getUserMedia error: ", error);  
}  
  
navigator.getUserMedia(constraints, successCallback, errorCallback);

使用firefox浏览器（版本号：58.0.2；时间：2018.02）打开getUserMedia.html：

点击“允许“打开摄像头：

完整原代码下载地址：https://download.csdn.net/download/paolochristian/10280794

2. 遗留问题

（1）发现存在摄像头视频卡顿问题，后面分析原因及给出解决方法。

转载博文：http://blog.csdn.net/yamingwu/article/details/44628145

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/539005