html5播放rtsp方案

Posted 音视频开发老舅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5播放rtsp方案相关的知识,希望对你有一定的参考价值。

html5播放rtsp方案,网上很多教程是使用rtsp转rtmp,不过rtmp需要falsh的支持,但是在chrome已经默认禁用、包括未来也会逐渐淘汰,所有最终这种方案被淘汰。一种叫jsmpeg的插件,它主要是通过webSocket发送MPEG,前端通过js解析MPEG不断绘制canvas,包括音频。最终测试的结果就是一个1920*1080分辨率的画面延时大概的0.5s左右,性能蛮高的。

下面说一下怎么安装
准备工具
1 . Ffmpeg,配置环境添加到path变量中
2 . Node.js),配置环境添加到path变量中
3 . jsmpeg,运行主程序
4 . 运行jsmpeg
解压jsmpeg压缩文件到某个盘符,里面出现有一个websocket-relay.js,我们主要运行这个js文件

在运行websocket-relay.js之前node需要安装webSocket模块
终端: npm install ws
运行jsmpeg文件夹里面的websocket-relay.js
终端: node websocket-relay.js supersecret 8081 8082
说明: Supersecret是密码 8081是ffmpeg推送端口8082是前端webSocket端口
运行解码程序
终端:ffmpeg -i "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

上述方案想要真正投入使用至少要解决同时播放多个rtsp流的问题,官方提供websocket-relay.js只能播放一个源,所以需要重写里面的代码,考虑到性能问题,最好在有GPU的客户端使用,否则性能会是一个瓶颈,网络带宽也是一个值得考虑的问题

目前已有 RTSP 播放方案的对比

既然是做直播,就需要延迟较低。当摄像头掉线时,也应当有一定的事件提示。处于这两点,对目前已有的已经实现、无需购买许可证的 RTSP 播放方案进行对比(处于原理阶段的暂时不分析)。

基于 flv.js 的 RTSP 播放方案

flv.js是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放,视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输,视频格式需要为 FLV 格式。

本文福利, C++音视频学习资料包、技术视频,内容包括(音视频开发,面试题,FFmpeg webRTC rtmp hls rtsp ffplay srs↓↓↓↓↓↓见下面↓↓文章底部↓↓

服务器端(主进程)

服务器端采用 express + express-ws 框架进行编写,当有 HTTP 请求发送到指定的地址时,启动 ffmpeg 串流程序,直接将 RTSP 流封装成 FLV 格式的视频流,推送到指定的 WebSocket 响应流中。

import * as express from "express";
import * as expressWebSocket from "express-ws";
import ffmpeg from "fluent-ffmpeg";
import webSocketStream from "websocket-stream/stream";
import WebSocket from "websocket-stream";
import * as http from "http";
 
function localServer() 
    let app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, 
        perMessageDeflate: true
    );
    app.ws("/rtsp/:id/", rtspRequestHandle)
    app.listen(8888);
    console.log("express listened")

 
function rtspRequestHandle(ws, req) 
    console.log("rtsp request handle");
    const stream = webSocketStream(ws, 
        binary: true,
        browserBufferTimeout: 1000000
    , 
        browserBufferTimeout: 1000000
    );
    let url = req.query.url;
    console.log("rtsp url:", url);
    console.log("rtsp params:", req.params);
    try 
        ffmpeg(url)
            .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
            .on("start", function () 
                console.log(url, "Stream started.");
            )
            .on("codecData", function () 
                console.log(url, "Stream codecData.")
          			// 摄像机在线处理
            )
            .on("error", function (err) 
                console.log(url, "An error occured: ", err.message);
            )
            .on("end", function () 
                console.log(url, "Stream end!");
          			// 摄像机断线的处理
            )
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
     catch (error) 
        console.log(error);
    

为了实现较低的加载时间,可以为 ffmpeg 添加如下参数:

analyzeduration 可以降低解析码流所需要的时间

max_delay 资料上写的具体作用不太记得了,效果没有 analyzeduration 明显

当然这个实现还比较粗糙。当有多个相同地址的请求时,应当增加 ffmpeg 的输出,而不是启动一个新的 ffmpeg 进程串流。

浏览器端(渲染进程)

示例使用 Vue 框架进行页面设计。

<template>
    <div>
        <video ref="player"></video>
    </div>
</template>
 
<script>
import flvjs from "flv.js";
export default 
    props: 
        rtsp: String,
        id: String
    ,
    /**
     * @returns player: flvjs.Player
     */
    data () 
        return 
            player: null
        
    ,
    mounted () 
        if (flvjs.isSupported()) 
            let video = this.$refs.player;
            if (video) 
                this.player = flvjs.createPlayer(
                    type: "flv",
                    isLive: true,
                    url: `ws://localhost:8888/rtsp/$this.id/?url=$this.rtsp`
                );
                this.player.attachMediaElement(video);
                try 
                    this.player.load();
                    this.player.play();
                 catch (error) 
                    console.log(error);
                ;
            
        
    ,
    beforeDestroy () 
        this.player.destory();
    

</script>
 
<style>
    .demo-video 
        max-width: 480px; 
        max-height: 360px;
    
</style>

原文链接:html5播放rtsp方案 - 资料 - 我爱音视频网 - 构建全国最权威的音视频技术交流分享论坛 

本文福利, C++音视频学习资料包、技术视频,内容包括(音视频开发,面试题,FFmpeg webRTC rtmp hls rtsp ffplay srs↓↓↓↓↓↓见下面↓↓文章底部↓↓ 

浏览器播放rtsp视频流:3rtsp转webrtc播放

浏览器播放rtsp视频流:3、rtsp转webrtc播放


文章目录

1. 前言

前面我们测试了rtsp转hls方式,发现延迟比较大,不太适合我们的使用需求。接下来我们试一下webrtc的方式看下使用情况。

综合考虑下来,我们最好能找到一个go作为后端,前端兼容性较好的前后端方案来处理webrtc,这样我们就可以结合我们之前的cgo+onvif+gSoap实现方案来获取rtsp流,并且可以根据已经实现的ptz、预置点等功能接口做更多的扩展。

2. rtsp转webRTC

如下是找到的一个比较合适的开源方案,前端使用了jQuery、bootstrap等,后端使用go+gin来实现并将rtsp流解析转换为webRTC协议提供http相关接口给到前端,通过config.json配置rtsp地址和stun地址:

https://github.com/deepch/RTSPtoWebRTC

此外,还带有stun,可以自行配置stun地址,便于进行内网穿透。

初步测试几乎看不出来延迟,符合预期,使用的jQuery+bootstrap+go+gin做的web,也符合我们的项目使用情况。

3. 初步测试结果

结果如下:

4. 结合我们之前的onvif+gSoap+cgo的方案做修改

我们在此项目的基础上,结合我们之前研究的onvif+cgo+gSoap的方案,将onvif获取到的相关数据提供接口到web端,增加ptz、调焦、缩放等功能。

我们在http.go中添加新的post接口:HTTPAPIServerStreamPtz来进行ptz和HTTPAPIServerStreamPreset进行预置点相关操作。

以下是部分代码,没有做太多的优化,也仅仅实现了ptz、调焦和缩放,算是打通了通路,具体项目需要可以再做优化。

4.1 go后端修改

增加了新的接口,并将之前cgo+onvif+gSoap的内容结合了进来,项目整体没有做更多的优化,只是为了演示,提供一个思路:

http.go(增加了两个post接口ptz和preset,采用cgo方式处理):

package main

/*
#cgo CFLAGS: -I ./ -I /usr/local/
#cgo LDFLAGS: -L ./build -lc_onvif_static -lpthread -ldl -lssl -lcrypto
#include "client.h"
#include "malloc.h"
*/
import "C"

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
    "os"
    "sort"
    "strconv"
    "time"
    "unsafe"

    "github.com/deepch/vdk/av"

    webrtc "github.com/deepch/vdk/format/webrtcv3"
    "github.com/gin-gonic/gin"
)

type JCodec struct 
    Type string


func serveHTTP() 
    gin.SetMode(gin.ReleaseMode)

    router := gin.Default()
    router.Use(CORSMiddleware())

    if _, err := os.Stat("./web"); !os.IsNotExist(err) 
        router.LoadHTMLGlob("web/templates/*")
        router.GET("/", HTTPAPIServerIndex)
        router.GET("/stream/player/:uuid", HTTPAPIServerStreamPlayer)
    
    router.POST("/stream/receiver/:uuid", HTTPAPIServerStreamWebRTC)
    //增加新的post接口
    router.POST("/stream/ptz/", HTTPAPIServerStreamPtz)
    router.POST("/stream/preset/", HTTPAPIServerStreamPreset)
    router.GET("/stream/codec/:uuid", HTTPAPIServerStreamCodec)
    router.POST("/stream", HTTPAPIServerStreamWebRTC2)

    router.StaticFS("/static", http.Dir("web/static"))
    err := router.Run(Config.Server.HTTPPort)
    if err != nil 
        log.Fatalln("Start HTTP Server error", err)
    


//HTTPAPIServerIndex  index
func HTTPAPIServerIndex(c *gin.Context) 
    _, all := Config.list()
    if len(all) > 0 
        c.Header("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store")
        c.Header("Access-Control-Allow-Origin", "*")
        c.Redirect(http.StatusMovedPermanently, "stream/player/"+all[0])
     else 
        c.HTML(http.StatusOK, "index.tmpl", gin.H
            "port":    Config.Server.HTTPPort,
            "version": time.Now().String(),
        )
    


//HTTPAPIServerStreamPlayer stream player
func HTTPAPIServerStreamPlayer(c *gin.Context) 
    _, all := Config.list()
    sort.Strings(all)
    c.HTML(http.StatusOK, "player.tmpl", gin.H
        "port":     Config.Server.HTTPPort,
        "suuid":    c.Param("uuid"),
        "suuidMap": all,
        "version":  time.Now().String(),
    )


//HTTPAPIServerStreamCodec stream codec
func HTTPAPIServerStreamCodec(c *gin.Context) 
    if Config.ext(c.Param("uuid")) 
        Config.RunIFNotRun(c.Param("uuid"))
        codecs := Config.coGe(c.Param("uuid"))
        if codecs == nil 
            return
        
        var tmpCodec []JCodec
        for _, codec := range codecs 
            if codec.Type() != av.H264 && codec.Type() != av.PCM_ALAW && codec.Type() != av.PCM_MULAW && codec.Type() != av.OPUS 
                log.Println("Codec Not Supported WebRTC ignore this track", codec.Type())
                continue
            
            if codec.Type().IsVideo() 
                tmpCodec = append(tmpCodec, JCodecType: "video")
             else 
                tmpCodec = append(tmpCodec, JCodecType: "audio")
            
        
        b, err := json.Marshal(tmpCodec)
        if err == nil 
			_, err = c.Writer.Write(b)
			if err != nil 
				log.Println("Write Codec Info error", err)
				return
			
		
	


//HTTPAPIServerStreamWebRTC stream video over WebRTC
func HTTPAPIServerStreamWebRTC(c *gin.Context) 
	if !Config.ext(c.PostForm("suuid")) 
		log.Println("Stream Not Found")
		return
	
	Config.RunIFNotRun(c.PostForm("suuid"))
	codecs := Config.coGe(c.PostForm("suuid"))
	if codecs == nil 
		log.Println("Stream Codec Not Found")
		return
	
	var AudioOnly bool
	if len(codecs) == 1 && codecs[0].Type().IsAudio() 
		AudioOnly = true
	
	muxerWebRTC := webrtc.NewMuxer(webrtc.OptionsICEServers: Config.GetICEServers(), ICEUsername: Config.GetICEUsername(), ICECredential: Config.GetICECredential(), PortMin: Config.GetWebRTCPortMin(), PortMax: Config.GetWebRTCPortMax())
	answer, err := muxerWebRTC.WriteHeader(codecs, c.PostForm("data"))
	if err != nil 
		log.Println("WriteHeader", err)
		return
	
	_, err = c.Writer.Write([]byte(answer))
	if err != nil 
		log.Println("Write", err)
		return
	
	go func() 
		cid, ch := Config.clAd(c.PostForm("suuid"))
		defer Config.clDe(c.PostForm("suuid"), cid)
		defer muxerWebRTC.Close()
		var videoStart bool
		noVideo := time.NewTimer(10 * time.Second)
		for 
			select 
			case <-noVideo.C:
				log.Println("noVideo")
				return
			case pck := <-ch:
				if pck.IsKeyFrame || AudioOnly 
					noVideo.Reset(10 * time.Second)
					videoStart = true
				
				if !videoStart && !AudioOnly 
					continue
				
				err = muxerWebRTC.WritePacket(pck)
				if err != nil 
					log.Println("WritePacket", err)
					return
				
			
		
	()


func HTTPAPIServerStreamPtz(c *gin.Context) 
	action := c.PostForm("action")
	direction, err := strconv.Atoi(action)
	if err != nil 
		log.Println(err)
		return
	
	var soap C.P_Soap
	soap = C.new_soap(soap)
	username := C.CString("admin")
	password := C.CString("admin")
	serviceAddr := C.CString("http://40.40.40.101:80/onvif/device_service")

	C.get_device_info(soap, username, password, serviceAddr)

	mediaAddr := [200]C.char
	C.get_capabilities(soap, username, password, serviceAddr, &mediaAddr[0])

	profileToken := [200]C.char
	C.get_profiles(soap, username, password, &profileToken[0], &mediaAddr[0])

	videoSourceToken := [200]C.char
	C.get_video_source(soap, username, password, &videoSourceToken[0], &mediaAddr[0])

	switch direction 
	case 0:
		break
	case 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11:
		C.ptz(soap, username, password, C.int(direction), C.float(0.5), &profileToken[0], &mediaAddr[0])
	case 12, 13, 14:
		C.focus(soap, username, password, C.int(direction), C.float(0.5), &videoSourceToken[0], &mediaAddr[0])
	default:
		fmt.Println("Unknown direction.")
	
	C.del_soap(soap)

	C.free(unsafe.Pointer(username))
	C.free(unsafe.Pointer(password))
	C.free(unsafe.Pointer(serviceAddr))

	c.JSON(http.StatusOK, gin.H"message":"success")


func HTTPAPIServerStreamPreset(c *gin.Context) 
	var soap C.P_Soap
	soap = C.new_soap(soap)
	username := C.CString("admin")
	password := C.CString("admin")
	serviceAddr := C.CString("http://40.40.40.101:80/onvif/device_service")

	C.get_device_info(soap, username, password, serviceAddr)

	mediaAddr := [200]C.char
	C.get_capabilities(soap, username, password, serviceAddr, &mediaAddr[0])

	profileToken := [200]C.char
	C.get_profiles(soap, username, password, &profileToken[0], &mediaAddr[0])

	videoSourceToken := [200]C.char
	C.get_video_source(soap, username, password, &videoSourceToken[0], &mediaAddr[0])

	action := c.PostForm("action")
	presetAction, err := strconv.Atoi(action)
	if err != nil 
		log.Println(err)
		return
	
	fmt.Println("请输入数字进行preset,1-4分别代表查询、设置、跳转、删除预置点;退出输入0:")
	switch presetAction 
	case 0:
		break
	case 1:
		C.preset(soap, username, password, C.int(presetAction), nil, nil, &profileToken[0], &mediaAddr[0])
	case 2:
		fmt.Println("请输入要设置的预置点token信息:")
		presentToken := ""
		_, _ = fmt.Scanln(&presentToken)
		fmt.Println("请输入要设置的预置点name信息长度不超过200:")
		presentName := ""
		_, _ = fmt.Scanln(&presentName)
		C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), C.CString(presentName), &profileToken[0], &mediaAddr[0])
	case 3:
		fmt.Println("请输入要跳转的预置点token信息:")
		presentToken := ""
		_, _ = fmt.Scanln(&presentToken)
		C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), nil, &profileToken[0], &mediaAddr[0])
	case 4:
		fmt.Println("请输入要删除的预置点token信息:")
		presentToken := ""
		_, _ = fmt.Scanln(&presentToken)
		C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), nil, &profileToken[0], &mediaAddr[0])
	default:
		fmt.Println("unknown present action.")
		break
	

	C.del_soap(soap)

	C.free(unsafe.Pointer(username))
	C.free(unsafe.Pointer(password))
	C.free(unsafe.Pointer(serviceAddr))
	
	c.JSON(http.StatusOK, gin.H"message":"success")


func CORSMiddleware() gin.HandlerFunc 
	return func(c *gin.Context) 
		c.Header("Access-Control-Allow-Origin", "*")
		c.Header("Access-Control-Allow-Credentials", "true")
		c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-access-token")
		c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-A

以上是关于html5播放rtsp方案的主要内容,如果未能解决你的问题,请参考以下文章

android 怎么播放rtsp流

为啥没有适用于所有浏览器的通用 HTML5 视频编解码器标准?

多路RTSP流解码:最高可支持12路视频编解码

HTML5 视频编解码器支持

RTSP播放器网页web无插件直播流媒体音视频播放器EasyPlayer-RTSP-Android解码获取视频帧的方法

mp4的视频打开可以播放在页面上无法打开