RTMP视频流转WebRTC浏览器播放

管理员
管理员 2023-11-7
若希望做低延迟直播(3-5秒),可用HTTP-FLV,播放器用flv.js,H5/MSE播放HTTP-FLV
若对延迟不敏感(5-10秒),跨平台比较好,可用HLS,播放器用hls.js,H5/MSE播放HLS
若希望超低延迟(1秒内),只需要支持主流的浏览器,可用WebRTC,播放器用RTC播放器

最后选择了WebRTC,视频流转换思路如下:

使用python-opencv-ffmpeg进行收流,再推给SRS流服务器,最后浏览器H5使用JSwebrtc播放webrtc流。

以下使用的是WIN10系统环境。

1、python-opencv-ffmpeg收流推流

安装python3,安装opencv-python模块,下载ffmpeg,复制ffmpeg.exe文件至C盘中文件夹system32下。

实现推拉流的代码参考如下:

import cv2import subprocess# 目标IP:SRS服务器地址(此处用的是本地运行的SRS)rtmp = 'rtmp://127.0.0.1:1935/live/livestream'# 可以推本地摄像头的流# cap = cv2.VideoCapture(0)# 也可以推RTMP流,这里以CCTV为例cap = cv2.VideoCapture('rtmp://media3.scctv.net/live/scctv_800')size = (int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)), int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)))sizeStr = str(size[0]) + 'x' + str(size[1])command = ['ffmpeg',
    '-y', '-an',
    '-f', 'rawvideo',
    '-vcodec','rawvideo',
    '-pix_fmt', 'bgr24',
    '-s', sizeStr,
    '-r', '25',
    '-i', '-',
    '-c:v', 'libx264',
    '-pix_fmt', 'yuv420p',
    '-preset', 'ultrafast',
    '-f', 'flv',
    rtmp]pipe = subprocess.Popen(command
    , shell=True
    , stdin=subprocess.PIPE)while cap.isOpened():
    success,frame = cap.read()
    if success:
        if cv2.waitKey(1) & 0xFF == ord('q'):
            break    
        pipe.stdin.write(frame.tostring())cap.release()pipe.terminate()

2、部署SRS流服务器

安装启动docker,安装时注意BIOS启用虚拟环境,进入系统有开启Hyper-V,并修改国内镜像源,如果在系统代理环境,需要配置代理。

正常启动docker后,运行以下命令,拉取SRS镜像并生成容器,在本地启动服务。

docker run --name srs -p 1935:1935 -p 8080:8080 -p 1985:1985 -p 8000:8000/udp --env CANDIDATE=127.0.0.1 ossrs/srs:v4.0.55 objs/srs -c conf/rtc.conf

浏览器打开SRS后台:127.0.0.1:8080,进入页面后使用1985端口链接srs,即可运行python-opencv-ffmpeg代码测试推拉流情况。

3、浏览器H5使用JSwebrtc播放webrtc流

html和js的代码参考如下:

  • HTML

<video class="" controls autoplay style="" id="video">
  • javascript

需要下载jswebrtc.min.js文件并保存在本地。

<script src="/static/js/jswebrtc.min.js"></script>
<script>
var video = document.getElementById('video');
var url = 'webrtc://127.0.0.1/live/livestream';
var player = new JSWebrtc.Player(url, { video: video, autoplay: true,  });
</script>


以上就是整个转换和播放的过程。


回帖
  • 消灭零回复

微信二维码

微信二维码

微信扫码添加微信好友