在HTML网络应用程序中显示实时网络摄像头数据



我想在我的网络应用程序中实时显示来自网络摄像头的数据。这是我的密码。使用这个代码,我可以看到我的实时数据,这是来自我的网络摄像头。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}
</style>
</head>
<body>
<div id="container">
    <video autoplay="true" id="videoElement">
    </video>
</div>
<script>
        var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
    alert("error");
}
</script>
</body>
</html>

假设我有一个4页的网络应用程序。我想在第三页的一个div中显示这个网络摄像头数据。我该怎么做。我需要更改其中的任何内容吗
video.src=窗口。URL.createObjectURL(流)

您所要做的就是确保视频源HTML元素位于要显示视频的div中。

此外,Javascript访问元素应该在该页面内执行(您似乎已经在执行了),但除此之外,只需为该文档元素设置视频src,就会在该元素内播放媒体流,并且该元素可以位于该页面内的任何位置。

编辑:

由于您希望其他计算机获取另一台计算机的流,因此必须让信号服务器在它们之间进行对等连接。如果它们都在同一个网络上,那么应该相当简单(不需要STUN或TURN ICE服务器来进行NAT穿越)。

如果它们不在同一网络上,则至少需要使用STUN服务器进行连接。

这里有几个教程可以帮助您入门。

您可以使用此库http://cbrandolino.github.io/camvas/

它是一个开源库,用于将网络摄像头内容流式传输到画布元素。在其网站上有一个演示。

相关内容

  • 没有找到相关文章

最新更新