我尝试在 html5 应用程序中启动用户相机。在我的电脑上，这工作正常，但在 iPhone（chrome 和 safari）上测试此功能时，不会触发事件播放。
我创建了一个简约的 html 页面来测试这一点。
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="pageLoaded()"> </body>
<script >
async function startCamera() {
let stream = await navigator.mediaDevices.getUserMedia({ video: {facingMode: 'user'}, audio: false});
if(!stream) return;
let video = document.createElement("video");
video.srcObject = stream;
video.oncanplay = (ev) => {
console.log("video can play");
video.oncanplay = "";
}
video.onplaying = (ev) => {
console.log("video is playing");
}
video.play();
}
function pageLoaded() {
startCamera();
}
</script>
</html>
在移动设备上，我使用 chrome://inspect 查看日志。 显示“视频可以播放”，但从未显示“视频正在播放”。
在我的台式电脑上，这工作得很好。 不过我没有测试 firefox、edge 和 opera... 而且我没有 Android 设备来测试这个。 但当我查找规范时，它显示每个现代浏览器都支持“播放”事件。
有人知道我在这里缺少什么吗？是否需要额外提出用户权限请求？我需要等待另一个事件来链接事件吗？
经过另一次测试（感谢评论），这段代码可以工作。 诀窍似乎是单击视频元素来播放相机视频流。这是代码：
<!DOCTYPE html>
<script >
async function startCamera() {
let stream = await navigator.mediaDevices.getUserMedia({ video: {facingMode: 'user'}, audio: false});
if(!stream) return;
let video = document.createElement("video");
video.style.width = 400;
video.style.height = 400;
video.style.border = "1px solid red";
document.body.appendChild(video);
video.srcObject = stream;
video.oncanplay = (ev) => {
console.log("video can play");
video.oncanplay = "";
}
video.onplaying = (ev) => {
console.log("video is playing");
}
video.onclick = () => { video.play();}
//video.play();
}
function pageLoaded() {
startCamera();
}
</script>
如果用户不必进行点击，那就太好了，但我想现在我会这样使用它，直到我弄清楚如何解决这个问题。感谢帮助。
我做了一些进一步的测试。看来，您不必将视频元素添加到文档中。但在移动设备上，您无法自动启动视频，而必须用户“单击”某些内容才能主动启动视频。
这是一段代码来展示 ios 上的行为。
<!DOCTYPE html>
<script >
async function startCamera() {
let stream = await navigator.mediaDevices.getUserMedia({ video: {facingMode: 'user'}, audio: false});
if(!stream) return;
let video = document.createElement("video");
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);
btn.onclick = () => {video.play(); } //THIS WORKS
video.srcObject = stream;
video.oncanplay = (ev) => {
console.log("video can play");
video.oncanplay = "";
//video.play(); //THIS DOESN'T WORK
}
video.onplaying = (ev) => {
console.log("video is playing");
}
video.onclick = () => { video.play();} //THIS WORKS
//video.play(); THIS DOESN'T WORK
}
function pageLoaded() {
startCamera();
}
</script>
因此，“单击”视频元素就可以了（然后您必须添加它），或者“单击”某个按钮也可以达到目的。 不过有一件事。如果我不显示视频元素（未添加到文档或显示=无），我的手机上的相机屏幕将保持黑色。在网站上显示视频元素时，我正在看着相机。