笔记本电脑摄像头实现推流并在前端播放其 flv 流地址

闪现上空篮
1,131 阅读1分钟

第一步 下载ffmpeg并配置环境变量

下载地址

  • 下载完之后，添加系统环境变量，在系统变量中配置地址。

第二步 下载Nginx

下载地址

  • 这里是要转flv流播放, 直接下载集成nginx-http-flv-module的版本。 这些版本已经编译了nginx-http-flv-module，可直接使用。

修改 nginx.conf

  • 主要配置如下, rtmp 及开启http-flv推流必要的flv_live on;
rtmp {
    server {
        listen 1935;
        
        application live {
            live on;
        }
		
        application hls {
            live on;
            hls on;  
            hls_path temp/hls;  
            hls_fragment 8s;  
        }
    }
}

http {
    server {
        listen  8899;
        server_name  localhost;

        location /live {
            flv_live on;

            chunked_transfer_encoding on;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
    }
}

第三步 实现本地摄像头推流

  1. 双击nginx.exe启动后。
  2. 通过cmd拉起终端，通过ffmpeg实现本地摄像头推流

  • 本地摄像头名可能不一致可通过命令获取, 参考 rtsp推流文章

  • ffmpeg -f dshow -i video="Integrated Camera" -c:v libx264 -preset ultrafast -tune zerolatency -b:v 1000k -vf scale=1280:720 -r 30 -f flv rtmp://127.0.0.1/live/100

  • 可通过vlc判断是否成功播放下述地址， 第二个即是http-flv地址

  1. rtmp://127.0.0.1/live/100
  2. http://127.0.0.1:8899/live?port=1935&app=live&stream=100

第四步 代码验证

  • 引入flv.js, 通过其来播放http-flv地址。
  • 正常播放视频，推流成功。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLV.js Live Stream</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <style>
        video{
            width: 50vw;
        }
    </style>
</head>
<body>
    <video id="video" autoplay muted></video>
    <script>
        function createVideo(id, url){
            let videoElement = document.getElementById(id);
            let flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                url
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();

            flvPlayer.on(flvjs.Events.ERROR, function (errorType, errorDetail) {
                console.error('Error Type: ', errorType);
                console.error('Error Detail: ', errorDetail);
            });

            flvPlayer.on(flvjs.Events.METADATA_ARRIVED, function (metadata) {
                console.log('Metadata: ', metadata);
            });

            flvPlayer.on(flvjs.Events.STATISTICS_INFO, (e) => {
                // console.log("解码帧：", e.decodedFrames); // 已经解码的帧数
            });
        }
        if (flvjs.isSupported()) {
            // 端口配置与nginx中一致
            createVideo('video', 'http://127.0.0.1:8899/live?port=1935&app=live&stream=100');
        } else {
            console.error('FLV format is not supported.');
        }
    </script>
</body>
</html>
avatar
文章
阅读
粉丝