Elsampsa/websocket-MSE-demo

It this demo we’re streaming live video from an RTSP camera to your HTML5 browser.

Video is streamed as H264 encapsulated in MP4. No transcoding takes place in the stream-to-browser pipeline. No browser-side 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 – browser MSE’s do not support H246 yet (and neither does libValkka).

MSE (Media Source Extensions) is implemented to play RTSP (Real Time Streaming Protocol) from camera. Give it a try

To prepare

If you have a Conda virtual environment, # # please deactivate conda deactivate access code git clone - the depth of 1 # https://github.com/elsampsa/websocket-mse-demo.git installation libValkka sudo Apt-add-repository ppa:sampsa-riikonen/valkka sudo apt-get update sudo apt-get install valkka # nginx sudo apt-get Install nginx # install websockets pip3 install websockets # 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 / nginx.conf-g 'error_log ': (No Permission Denied  error.log warn; '# Set camera to send H264 (this project only supports H264)

use

Send an RTSP stream:

Sudo snap install vLC # allow camera permission snap connect vLC :camera :camera # send ~/Videos/test.mp4 file (loop) # https://archive.org/download/archive-video-files/test.mp4 vlc file:///$HOME/Videos/test.mp4 --loop \ --sout '#gather: Transcode {vcodec=h264}: RTP {SDP = RTSP ://:8554/test}' \ --network-caching=1500 -- out-all -- out-keep # or, Send/dev/video0 webcam (real-time) VLC v4l2: / / / dev/video0: chroma = yuyv: width = 640: height = 480:30 FPS = \ - sout '# transcode {vcodec = h264, width = 640, height = 480} : RTP {SDP = RTSP: / / : 8554 / test}' # test receive RTSP stream VLC RTSP: / / 127.0.0.1:8554 / test

Start-up procedure:

Killall 9 nginx python3 ws_serve_new. Py RTSP: / / 127.0.0.1:8554 / test

Open your browser:

xdg-open http://localhost:8089

More and more

Technology:

  • WebSocket
  • MediaSource: Construct a media stream for the video/audio elements to play
  • WebRTC: Can directly capture the client video stream, and point to point transmission, do not rely on the server transit
  • WebCodecs: Codec audio and video

  • WebAssembly: C/C++/Rust is compiled into the front end for use

    • ffmpegwasm/ffmpeg.wasm
    • GoogleChromeLabs/webm-wasm

Project:

  • MSE: The stream needs to be constructed. Usually the container format is ISO BMFF (Fragmented MP4) = FMP4

    • elsampsa/websocket-mse-demo: RTSP > fMP4
    • ChihChengYang/wfs.js: H.264 NAL > fMP4
    • bilibili/flv.js: FLV > fMP4
    • Garefield/RTSP-WS-Proxy: RTSP > fMP4
    • Streamedian/html5_rtsp_player: RTSP > FMP4, Proxy charges

  • JS decoding

    • phoboslab/jsmpeg: MPEG1 Video & MP2 Audio Decoder

      • kyriesent/node-rtsp-stream
      • wanghaoxi3000/gin-rtsp
      • YE-Fan/JAVA-RTSP-JSMpeg
      • Aleckgt/rtsp-ws-proxy
      • k-yle/rtsp-relay

    • mbebenita/Broadway: H.264 decoder

      • 131/h264-live-player

  • Wasm decoding

    • sonysuqin/WasmVideoPlayer: H265 > YUV, WebGL
    • wupeng-engineer/decoder_wasm: H264,H265 > YUV, WebGL
    • gliese1337/h264decoder: H264 > YUV
    • mattdesl/mp4-h264: H264 > YUV/RGB
    • mattdesl/mp4-wasm: H264

  • other

    • HTML5 RTSP Player: For a fee

Gocoding personal practice experience sharing, can pay attention to the public number!