摄像头无插件在浏览器中播放

本文介绍了如何将摄像头的RTSP流通过Nginx和ffmpeg转换为RTMP流,供网页直播使用,包括软件配置、前端代码示例和流地址设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.资源文件中有文章中使用到的程序。

二. 目前摄像头都支持RTSP流推送,但浏览器(google)支持RTMP流。

三. 配置步骤如下

1. 需要软件 
(1)nginx-http-flv
(2)ffmpeg-5.1.2-essentials_build

ffmpeg -thread_queue_size 100000 -i rtsp://admin:srkj12345@192.168.0.64:554/h264/ch1/main/av_stream -vcodec libx264 -preset:v medium -tune:v zerolatency -profile:v main -acodec copy -f flv -s 420*260 -an rtmp://127.0.0.1:1935/live/ch1


2. index.html 前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flv.js test</title>
    <link rel="stylesheet" href="dplayer.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
</head>
<body>
    <video muted id="videoElement1" width="420" height="260"></video>
<script>
	var videoElement1 = document.getElementById('videoElement1');
	var flvPlayer = flvjs.createPlayer({
		type: 'flv',
		isLive: true,
		url: 'http://192.168.0.10:8080/live?port=1935&app=live&stream=ch1'
	});
	flvPlayer.attachMediaElement(videoElement1);
	flvPlayer.load();
	flvPlayer.play();

</script>
</body>
</html>


3. nginx.conf nginx配置

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

# 添加RTMP服务
rtmp {

    server {
        listen 1935;
        application live {  
            live on;
        }
	}

}

http {

    server {
        listen       8080;
        server_name	 192.168.0.10;
		
		location /live {
			flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
			add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
			add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
			add_header Access-Control-Allow-Headers X-Requested-With;
			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
			add_header 'Cache-Control' 'no-cache';
        }
	}
}


4. rtsp地址: 摄像头 用户名 密码
rtsp://admin:abc123456@192.168.0.64:554/h264/ch1/main/av_stream


5. http服务器地址
http://127.0.0.1:8080/


6.视频推流
ffmpeg -re -i 1.mp4 -f flv rtmp://localhost:1935/live/test


7.本地摄像头推流
ffmpeg -thread_queue_size 100000 -i rtsp://admin:srkj12345@192.168.0.64:554/h264/ch1/main/av_stream -vcodec libx264 -preset:v medium -tune:v zerolatency -profile:v main -acodec copy -f flv -s 420*260 -an rtmp://127.0.0.1:1935/live/ch1


8.桌面推流
ffmpeg -f gdigrab -i desktop -vcodec libx264 -s 1280x720 -r 30 -b 1m -f flv rtmp://127.0.0.1:1935/live/ch2

9.拉流
ffplay rtmp://localhost:1935/live/test

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值