RTSP H264 流 MSE 播放

elsampsa/websocket-mse-demo 项目介绍：

It this demo we’re streaming live video frhttp协议om an RTSP camera to your HTML5 browser.

Video is streamed as H264 enchtml文件怎样打开aubuntu下载psulated in MP4.http 302 No transcoding takes plhtml5ace in the stream-to-browser pipeline. No browser-sidechrome flash or pure-javascript decoders required.

Video is decoded and presented in the browser using the W3 Media Source Extensions that is well supported by all major browsers by > now.

Only H264 is supported – browswebsocket没准备好是什么意思er MSE’s do not support H246 yet (and neither does libValkka).

完成了浏览器 MSE (Media Source Extensions) 播映相机 RTSP (Real Timchrome浏览器e Streaming Protocolubuntu怎样读) 流。着手体验一下咯~

预备

# 体系 Ubuntu 18
# 如有 conda 虚拟环境，请停用
# conda deactivate
# 获取代码
git clone --depth 1 https:http://192.168.1.1登录//httpclientgithub.com/elsampsa/websocket-mshtmle-demo.git
# 设备 libValkka
sudo apt-add-repository ppa:sampsa-riikoChromenen/valkka
sudo apt-get updwebsocket协议ate
sudo apt-get install valkka
# 设备 nginx
sudo apt-get installUbuntu nginx
# 设备 python websockets
pip3 install websocubuntu和linux的差异kets
# 预备 nginx 用户权限
sudo addgroup nginx
sudo adduser $USER nginx
sudo chgrp -R nginx /var/lib/nginx /var/log/nginx
sudo chmod -R g+r+w+x /var/lib/nginx /var/log/nginxwebsocket和socket差异
# 切换用户组
newgrp nginx
id
# 测验 nginx 工作是否正常（无 Permission denied）
cd whtml是什么意思ebsocket-mse-demo
nginx -p $PWD -c ./nginx.conf -g 'error_log error.log wubuntu装置教程arn;'
# 设置相机发送 H264（该项目只支撑 H264）

运用

发送 RTSP 流：

sudo snapchrome浏览器手机版 install vlc
# allow camera permission
snap cochrome官方下载nnect vlc:camera :camwebsocket是什么意思era
# 发送 ~/Videos/test.mp4 文件（循环）
#  https://archive.org/download/archive-video-files/test.mp4
vlc file:///$HOME/Videos/test.mp4 --loop 
--shttp协议out '#gather:transcode{vcodec=h264}:rtp{sdpubuntu装置教程=rtsp://:8554/test}html标签特点大全' 
--network-caching=chrome什么意思1500 --sout-all --sout-keep
# 或，发送 /dev/video0 wechrome手机版bcam（实时）
vlc v4l2:///dev/video0:chroma=yuyv:width=640:height=480:fps=30 
--sout '#transcode{vcodec=h264,width=640,height=480}:rtp{sdp=rtsp://:8ubuntu20.04装置教程554/test}'
# 测验接纳 RTSP 流chromebook
vlc rtsp://127.0.0.1:8httpclient554http 500/test

启动程序：

killall -9 ngichromebooknx
python3 ws_serve_new.py rtsp://127.0.0.1:8554/test

翻开浏览websocket原理器：

xdg-open http://localhost:8089

更多

技能：

• WebSocket
• MediaSource: 构建媒体流，供 video/audio 元素播映
• WebRTC: 可直接捕获客户端视频流，并点对点传输、不依赖服务器中转
• WebCodecs: 编解码音视频
• WebAsswebsocket菜鸟教程embly: C/C++/Rust 等编译进前端运用
  • ffmphtml5egwasm/ffhttp://192.168.1.1登录mpeg.wasm
  • GoogleChromeLabs/webm-wasm

项目：

• MSE: 需构建流，一般容器格局是 ISO BMFF (Fragmented MP4) = fMP4
  • elsampsa/websocket-mse-demo: RTSPwebsocket和socket差异 > fMP4
  • ChihChengYang/wfs.js: H.html5264 NAL > fMP4
  • bilibili/flv.js: FLubuntu体系V &gchrome浏览器t; fMP4
  • Garefield/RTSP-WS-Proxy: RTSP &gtwebsocket和socket差异; fMP4
  • Streamedian/html5_rtsp_player: RTSP > fMP4, Proxy 收费
• JShtml5 解码
  • phoboslab/jsmpeg: MPEG1 Video & MP2 Awebsocket原理udio Decoder
    • kyriesent/node-rtsp-stream
    • wanghttp代理haoxi3000/gin-rtsp
    • YE-Fan/JAVA-RTSP-JSMpeg
    • Aleckgt/rtsp-ws-proxy
    • kchrome下载安卓版-yle/rtsp-relay
  • mbebenita/Broadway:websocket使用 H.264 decoder
    • 131/h264-live-player
• Wasm 解码
  • sochrome浏览器手机版nysuqin/WasmVideoPlayer: H265 > YUhttpwatchV, WebGL
  • wupeng-engineer/decoder_wasm: H264,H265 > YUV, WebGL
  • gliese1337/h264decohttp 302der: H264 > YUV
  • mattdesl/mp4-h264: H264 > YUV/RGB
  • mattdesl/mp4-wasm: H2html是什么意思64
• 其他
  • HTML5 RTSP player: 收费

GoCoding 个html标签人实践的经验同享，可注重大众号！