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

最新推荐文章于 2023-12-29 16:28:35 发布

genghao

最新推荐文章于 2023-12-29 16:28:35 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

文章标签： rtsp rtmp

本文链接：https://blog.youkuaiyun.com/genghao/article/details/133547530

本文介绍了如何将摄像头的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