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

RTSP H264 流 MSE 播映

翻开浏览websocket原理器:

xdg-open http://localhost:8089

RTSP H264 流 MSE 播映

更多

技能:

  • 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标签人实践的经验同享,可注重大众号!

发表评论

提供最优质的资源集合

立即查看 了解详情