如何使用 HTML 在网站中显示摄像头输入

Question

我决定创建一个像 TokBox 这样的网站。但是我运行变成了一个问题where。当我使用 WebRTC 时，我没有得到摄像头的输出，有人可以帮助我吗？另外，如果您需要更多信息，我正在使用 Safari，它允许我使用相机，但我看不到输出。

<!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) {
    // do something
}
</script>
</body>
</html>

Answer 1

嗯，您可以先为错误添加一个 console.log。

Safari 对自动播放视频有点挑剔，this sample 添加了 playsinline 属性。您还需要使用 srcObject 而不是 URL.createObjectURL 并承诺 API.

的现代版本

如何使用 HTML 在网站中显示摄像头输入

How to show the camera input in a website using HTML

html

embed

safari

ios