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

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

javascript html webrtc

Javascript 在HTML webapp中显示实时网络摄像头数据,javascript,html,webcam,webrtc,getusermedia,Javascript,Html,Webcam,Webrtc,Getusermedia,我想在我的web应用程序中实时显示网络摄像头中的数据。这是我的代码。使用这段代码，我可以看到来自我的网络摄像头的实时数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="stuff, to, help, search, engines, not" name="keywords"> <meta content="What this page is

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

<!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>


显示网络摄像头流
#容器{
保证金：0px自动；
宽度：500px；
身高：375px；
边框：10px#333实心；
}
#视频元素{
宽度：500px；
身高：375px；
背景色：#666；
}
var video=document.querySelector（“#videoElement”）；
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia | | navigator.oGetUserMedia；
if（navigator.getUserMedia）{
getUserMedia（{video:true}，handleVideo，videoError）；
}
功能handleVideo（流）{
video.src=window.URL.createObjectURL（流）；
}
功能视频错误（e）{
警报（“错误”）；
}

假设我有一个有4页的Web应用程序。我想在第三页的某个div中显示此网络摄像头数据。我如何才能做到这一点。我需要更改其中的任何内容吗？

video.src=window.URL.createObjectURL（流）

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

此外，Javascript访问元素应该在该页面内执行（看起来您已经在执行），但除此之外，只需为该文档元素设置video src，即可在该元素内播放该媒体流，该元素可以在该页面内的任何位置

编辑：

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

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

以下是一个入门指南。

您可以使用此库

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

你是说，在一个独特的页面上，你只想做你正在做的事情？将您的JS移动到该页面，并确保它获取了正确的html元素。我只在同一页面中编写JS。我希望从同一网络下的其他计算机访问此内容。啊，然后您将必须进行对等连接。我将修改我的答案