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

最新推荐文章于 2022-07-21 10:50:20 发布

paolochristian

最新推荐文章于 2022-07-21 10:50:20 发布

阅读量3k

点赞数

分类专栏： WEBRTC 文章标签： webrtc

WEBRTC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过浏览器显示摄像头视频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：