浏览器播放rtsp视频流：2、ffmpeg转hls播放（go后端利用hls做简单视频直播）
浏览器播放rtsp视频流：2、ffmpeg转hls播放（go后端利用hls做简单视频直播）
文章目录
- 浏览器播放rtsp视频流：2、ffmpeg转hls播放（go后端利用hls做简单视频直播）
-
- 1. 前言
- 2. wsl安装ffmpeg并转换rtsp为hls
- 3. 前后端示例代码
-
- 3.1 后端go代码
- 3.2 前端代码
- 4. 结果及评估
1. 前言
上一次我们找到一些开源方案，目前我们先测试一下ffmpeg转hls播放的方式，看下延迟情况及兼容性情况，主要测试Windows、Linux和macOS中使用谷歌浏览器播放的情况。后端结合我们之前的cgo部分，建立一个简单的http服务器，然后提供给前端调用。
2. wsl安装ffmpeg并转换rtsp为hls
sudo apt-get install ffmpeg
可能报错：“E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/universe/f/flite/libflite1_2.1-release-3_amd64.deb Connection failed [IP: 91.189.88.142 80]”
解决办法，可以选择直接源码编译安装：
wget https://ffmpeg.org/releases/ffmpeg-4.1.tar.bz2
tar -xjvf ffmpeg-4.1.tar.bz2
cd ffmpeg-4.1
sudo apt-get install yasm
./configure
make && sudo make install
ffmpeg -version
ffmpeg转换rtsp为hls：
ffmpeg -i "rtsp://username:[email protected]/media/video1" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "./test.m3u8"
3. 前后端示例代码
3.1 后端go代码
我们使用go创建简单的http服务，然后利用ffmpg转换hls提供给前端。
需要鉴权时rtsp地址前加上用户名密码时即可，比如rtsp://username:password@xxx，用户名和密码之间用：隔开，和原本的地址用@隔开。
main.go:
import (
"fmt"
"net/http"
"os/exec"
"bytes"
"io/ioutil"
)
func Index(w http.ResponseWriter, r *http.Request) {
content, _ := ioutil.ReadFile("./index.html")
w.Write(content)
}
func main () {
http.HandleFunc("/index", Index)
http.Handle("/", http.FileServer(http.Dir(".")))
go func() {
http.ListenAndServe(":9000", nil)
}()
cmd := exec.Command("ffmpeg", "-i", "rtsp://admin:[email protected]/media/video1", "-c", "copy", "-f", "hls", "-hls_time", "2.0", "-hls_list_size", "0", "-hls_wrap", "15", "./test.m3u8")
var out bytes.Buffer
var stderr bytes.Buffer
cmd.Stdout = &out
cmd.Stderr = &stderr
err := cmd.Run()
if err != nil {
fmt.Println(fmt.Sprint(err) + ": " + stderr.String())
return
}
fmt.Println("Result: " + out.String())
}
3.2 前端代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'>script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript">script>
head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://localhost:9000/test.m3u8" type="application/x-mpegURL">source>
video>
div>
body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
// var src = "./test.m3u8";
// document.querySelector('.qiehuan').addEventListener('click', function () {
// changeVideo(src);
// })
script>
4. 结果及评估
运行后端代码后访问localhost:9000即可查看视频，经测试延迟还是比较高的（我测试大致在5s-8s），如果要加上ptz控制的话没有实时感恐怕比较怪异，只适合简单的网络直播之类的，不太在乎一定的延迟。
