本地摄像头视频流在html中打开

1.准备ffmpeg 和(rtsp-simple-server + srs搭建流媒体服务器)视频服务器.

2.解压视频流服务器修改配置文件mediamtx.yml ,hlsAlwaysRemux: yes

3.双击运行服务器。

4,安装ffmpeg ,添加到环境变量。

5.查询本机设备列表

ffmpeg -list_devices true -f dshow -i dummy

6.查看当前摄像头的详细参数

ffmpeg -list_options true -f dshow -i video="Integrated Camera"

7.预览本机摄像头画面

ffplay -f dshow -i video="Integrated Camera"

8.将本地电脑摄像头打开将视频流传到rtmp服务器

bash 复制代码
ffmpeg -f dshow -i audio="麦克风阵列 (Synaptics Audio)" -f dshow -i video="Integrated Camera"  -vcodec libx264 -preset veryfast -maxrate 1000k -bufsize 2000k -vf "format=yuv420p" -g 50 -f flv rtmp://10.204.51.49:1935/love/stream

9.将rtmp视频流转成hls格式视频流,文件放nginx服务下

bash 复制代码
ffmpeg -i rtmp://10.204.51.49:1935/love/stream -vcodec copy -acodec copy  -f hls -hls_flags delete_segments -segment_list_size 10 -hls_list_size 5 video.m3u8

10.创建一个html页面方法在nginx服务下

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS 播放本地视频流</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="video" controls></video>
    <script>
        if (Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource('./video.m3u8'); // 替换为你的HLS流地址
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = './video.m3u8'; // Safari支持HLS原生播放
            video.addEventListener('loadedmetadata', function() {
                video.play();
            });
        }
    </script>
</body>
</html>
相关推荐
weixin-a1530030831610 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头37 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
Touper.42 分钟前
SpringBoot -- 自动配置原理
java·spring boot·后端
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
一只鹿鹿鹿1 小时前
信息化项目验收,软件工程评审和检查表单
大数据·人工智能·后端·智慧城市·软件工程
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
专注VB编程开发20年2 小时前
开机自动后台运行,在Windows服务中托管ASP.NET Core
windows·后端·asp.net
程序员岳焱2 小时前
Java 与 MySQL 性能优化:MySQL全文检索查询优化实践
后端·mysql·性能优化