View H.264 and H.265 streams in the browser with Shinobi and maintain low CPU use

The purpose of this article is to show you that you can consume high frame rate or high resolution H.264 and H.265 streams then display them in the browser with the same quality and frame rate.

Keep in mind that this method is essentially recording segments to the ram then cycling them while providing an m3u8 playlist to view them in the browser.

H.265 is more of a fad format for video stream whereas H.264 has become a standard. With this in mind not all modern browsers will support H.265 but should most definitely support H.264.

How to consume RTSP streams

For this article we will use the following camera information as an example to guide the setup process. This camera is a real camera so you can follow along to see an actual stream in your Shinobi.

If you would like to just test this monitor without settings the fields yourself you can scroll to the bottom and paste the JSON string into your Import window.

• Camera IP Address : 177.142.51.199
• Full RTSP Stream URL : rtsp://177.142.51.199/axis-media/media.3gp
• Stream Width : 800
• Stream Height : 450
• Frames Per Second (FPS) : 30

In the Input section of the Monitor Settings window you will see a few different fields. The ones most important are as follows with some selections to help get you started.

• Input Type : H.264 / H.265 / H.265+
• Connection Type : RTSP
• RTSP Transport : TCP
• Username : This camera has no username requirement for viewing
• Password : This camera has no password requirement for viewing
• Host : 177.142.51.199
• Port : 80 - Some cameras will automatically switch to 554, while others need it to be explicity set
• Path : /axis-media/media.3gp - The ending path of your camera's RTSP url
• Force Port : No - Some cameras can output RTSP streams through the same port as the web port, in which case you would choose Yes
• Analyzation Duration : 1000000
• Probe Size : 1000000

Stream with the same frame rate and resolution

In the Stream section try the following settings. You are not encoding each frame with these settings, you are piping the video data to appropriate containers.

• Stream Type : HLS (Includes Audio)
• HLS Video Encoder : copy
• HLS Audio Encoder : No Audio - Some countries do not allow audio monitoring
• HLS Segment Length : 2
• HLS List Size : 3
• HLS Preset : ultrafast, veryfast or blank - Use only one preset at a time
• Check Signal Interval : 0

Record with the same frame rate and resolution

• Record File Type : MP4
• Video Codec : copy
• Audio Codec : No Audio - Some countries do not allow audio monitoring
• Recording Segment Interval : 15 - The amount of time in minutes before starting a new file

Getting gigantic recordings?

Check out how I optimized my RTSP Camera.

Can i use the motion detector when using copy?

Of course but that explanation is for another time!

Importable JSON string for this monitor

{"mode":"start","mid":"OqXgbwDt0M2","name":"Demo","type":"h264","protocol":"rtsp","host":"177.142.51.199","port":"80","path":"/axis-media/media.3gp","ext":"mp4","fps":"5","width":"640","height":"480","details":"{\"fatal_max\":\"0\",\"notes\":\"\",\"rtsp_transport\":\"tcp\",\"muser\":\"\",\"mpass\":\"\",\"port_force\":\"0\",\"sfps\":\"1\",\"aduration\":\"1000000\",\"probesize\":\"1000000\",\"stream_type\":\"hls\",\"stream_mjpeg_clients\":\"\",\"stream_vcodec\":\"copy\",\"stream_acodec\":\"no\",\"hls_time\":\"2\",\"preset_stream\":\"ultrafast\",\"hls_list_size\":\"3\",\"signal_check\":\"10\",\"signal_check_log\":\"0\",\"stream_quality\":\"15\",\"stream_fps\":\"5\",\"stream_scale_x\":\"2560\",\"stream_scale_y\":\"1440\",\"rotate_stream\":\"no\",\"svf\":\"\",\"stream_timestamp\":null,\"stream_timestamp_font\":\"\",\"stream_timestamp_font_size\":\"\",\"stream_timestamp_color\":\"\",\"stream_timestamp_box_color\":\"\",\"stream_timestamp_x\":\"\",\"stream_timestamp_y\":\"\",\"stream_watermark\":null,\"stream_watermark_location\":\"\",\"stream_watermark_position\":null,\"snap\":\"1\",\"snap_fps\":\"\",\"snap_scale_x\":\"\",\"snap_scale_y\":\"\",\"snap_vf\":\"\",\"vcodec\":\"copy\",\"crf\":\"1\",\"preset_record\":\"\",\"acodec\":\"no\",\"dqf\":\"0\",\"cutoff\":\"15\",\"rotate_record\":\"no\",\"vf\":\"\",\"timestamp\":\"0\",\"timestamp_font\":\"\",\"timestamp_font_size\":\"10\",\"timestamp_color\":\"white\",\"timestamp_box_color\":\"0x00000000@1\",\"timestamp_x\":\"(w-tw)/2\",\"timestamp_y\":\"0\",\"watermark\":null,\"watermark_location\":\"\",\"watermark_position\":null,\"cust_input\":\"\",\"cust_snap\":\"\",\"cust_detect\":\"\",\"cust_stream\":\"\",\"cust_stream_server\":\"\",\"cust_record\":\"\",\"custom_output\":\"\",\"detector\":\"0\",\"detector_webhook\":null,\"detector_webhook_url\":\"\",\"detector_command_enable\":null,\"detector_command\":\"\",\"detector_command_timeout\":\"\",\"detector_lock_timeout\":\"\",\"detector_save\":\"1\",\"detector_frame_save\":\"0\",\"detector_mail\":\"0\",\"detector_mail_timeout\":\"\",\"detector_record_method\":\"hot\",\"detector_trigger\":\"0\",\"detector_trigger_record_fps\":\"5\",\"detector_timeout\":\"10\",\"watchdog_reset\":\"0\",\"detector_delete_motionless_videos\":\"0\",\"detector_send_frames\":\"1\",\"detector_fps\":\"1\",\"detector_scale_x\":\"640\",\"detector_scale_y\":\"480\",\"detector_use_motion\":\"0\",\"detector_use_detect_object\":\"1\",\"detector_frame\":\"0\",\"detector_sensitivity\":\"\",\"cords\":\"{\\\"red\\\":{\\\"name\\\":\\\"red\\\",\\\"sensitivity\\\":\\\"30\\\",\\\"points\\\":[[\\\"103\\\",\\\"472\\\"],[\\\"156\\\",\\\"465\\\"],[\\\"238\\\",\\\"466\\\"],[\\\"489\\\",\\\"410\\\"],[\\\"431\\\",\\\"385\\\"],[\\\"174\\\",\\\"420\\\"],[\\\"139\\\",\\\"436\\\"]]}}\",\"detector_lisence_plate\":null,\"detector_lisence_plate_country\":null,\"detector_notrigger\":null,\"detector_notrigger_mail\":null,\"detector_notrigger_timeout\":\"\",\"control\":\"0\",\"control_base_url\":\"\",\"control_stop\":\"0\",\"control_url_stop_timeout\":\"\",\"control_url_center\":\"\",\"control_url_left\":\"\",\"control_url_left_stop\":\"\",\"control_url_right\":\"\",\"control_url_right_stop\":\"\",\"control_url_up\":\"\",\"control_url_up_stop\":\"\",\"control_url_down\":\"\",\"control_url_down_stop\":\"\",\"control_url_enable_nv\":\"\",\"control_url_disable_nv\":\"\",\"control_url_zoom_out\":\"\",\"control_url_zoom_out_stop\":\"\",\"control_url_zoom_in\":\"\",\"control_url_zoom_in_stop\":\"\",\"groups\":\"[]\",\"loglevel\":\"warning\",\"sqllog\":\"1\",\"detector_cascades\":\"[object Object]\"}","shto":"[]","shfr":"[]"}