在 Next.js 中无法通过 直接加载本地 JS 文件执行 DOM 操作（如访问摄像头），因其服务端渲染（SSR）机制会忽略客户端脚本，且 document 在服务端不可用；必须改用 React 组件 + "use client" 指令 + useEffect 和 useRef 实现安全、可靠的客户端媒体访问。
在 next.js 中无法通过 `<script src="...">` 直接加载本地 js 文件执行 dom 操作（如访问摄像头），因其服务端渲染（ssr）机制会忽略客户端脚本，且 `document` 在服务端不可用；必须改用 react 组件 + `"use client"` 指令 + `useeffect` 和 `useref` 实现安全、可靠的客户端媒体访问。</script>
Next.js 默认采用服务端渲染（SSR）或服务端生成（SSG），这意味着页面初始 HTML 是在 Node.js 环境中构建的——而 document、navigator.mediaDevices 等浏览器专属 API 在服务端根本不存在。因此，像 <script src="myscript.js"></script> 这样的写法不仅不会生效（JS 文件甚至不会被注入到客户端 DOM 中），更会导致静默失败：控制台无日志、无报错、无视频流。
✅ 正确做法是：将摄像头逻辑封装为一个 Client Component（客户端组件），显式声明 "use client"，并利用 React 的生命周期与引用机制安全操作 DOM。
以下是一个可直接运行的完整实现：
1. 创建客户端摄像头组件（app/components/MyWebcam.js）
"use client";
import { useEffect, useRef } from 'react';
export default function MyWebcam() {
const videoRef = useRef(null);
useEffect(() => {
const startCamera = async () => {
try {
// 请求用户授权访问摄像头
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
if (videoRef.current) {
videoRef.current.srcObject = stream;
}
} catch (err) {
console.error("无法访问摄像头：", err.name || err.message);
// 建议添加 UI 提示，例如显示错误信息或降级按钮
}
};
startCamera();
// 清理函数：组件卸载时停止媒体流，防止内存泄漏
return () => {
if (videoRef.current?.srcObject) {
const tracks = videoRef.current.srcObject.getTracks();
tracks.forEach(track => track.stop());
}
};
}, []);
return (
<div classname="flex flex-col items-center gap-4 p-4">
<video ref="{videoRef}" autoplay muted width="600" height="600" classname="border rounded-lg shadow-md"></video><a href="#" onclick="{(e)"> {
e.preventDefault();
// 后续可在此添加截图逻辑（如 canvas.toDataURL）
console.log("准备拍照...");
}}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Take Picture
</a>
</div>
);
}
⚠️ 注意事项：
"use client"必须作为文件首行纯文本注释，不可加空格或换行，否则 Next.js 不识别；useEffect确保代码仅在客户端执行，且只运行一次（空依赖数组[]）；- 使用
useRef获取元素引用，避免document.getElementById（不推荐且易出错）；- 添加
muted属性是关键：Chrome/Firefox 要求自动播放视频必须静音，否则会静默阻止；- 清理函数中主动停止媒体轨道，避免后台持续采集造成性能与隐私问题。
2. 在页面中引入组件（app/live/page.js）
app
