Question

我想在我的网络应用中显示来自我的网络摄像头的数据。这是我的代码。使用此代码，我能够看到来自我的网络摄像头的实时数据。

<!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页的webapp。我想在我的第三页的一个div中显示这个网络摄像头数据。我怎么能这样做。我需要改变这个吗？
video.src = window.URL.createObjectURL（stream）;

Answer 1

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

此外，Javascript访问元素应该在该页面内执行（看起来你已经在做了）但除此之外，简单地为该文档元素设置视频src将在该元素内播放该媒体流，该元素可以是该页面内的任何地方。

编辑：

由于您希望其他计算机抓取另一台计算机的流，您必须让信令服务器在它们之间进行对等连接。如果它们都在同一个网络上，它应该相当简单（不需要STUN或TURN ICE服务器进行NAT遍历）。

如果他们不在同一个网络上，您至少需要使用STUN服务器进行连接。

以下是couple tutorials，可帮助您入门。

Answer 2

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

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

在HTML webapp中显示实时网络摄像头数据

2 个答案: