{"id":2353,"date":"2024-08-04T14:20:32","date_gmt":"2024-08-04T13:20:32","guid":{"rendered":"https:\/\/alax.info\/blog\/?p=2353"},"modified":"2024-08-04T14:20:32","modified_gmt":"2024-08-04T13:20:32","slug":"demo-update-web-camera-video-with-mpeg-dash-live-broadcasting-now-also-with-hls","status":"publish","type":"post","link":"https:\/\/alax.info\/blog\/2353","title":{"rendered":"Demo update: Web camera video with MPEG-DASH live broadcasting, now also with HLS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/alax.info\/blog\/2349\">Serving MPEG-DASH<\/a> differs from serving HLS but as long as you have video packaged in ISO BMFF segments, adding an option to also expose content as HLS (HTTP Live Streaming, <a href=\"https:\/\/www.rfc-editor.org\/rfc\/rfc8216\">RFC 8216<\/a>) is not too difficult.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besides, being able to stream webcamera signal as MPEG-DASH using <a href=\"http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/manifest.mpd\">http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/manifest.mpd<\/a> I also made it possible to use <a href=\"http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/master.m3u8\">http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/master.m3u8<\/a> with, for example, the same <a href=\"https:\/\/shaka-player-demo.appspot.com\/demo\">Shaka Player Demo<\/a>, or <a href=\"https:\/\/hlsjs.video-dev.org\/demo\/?src=http%3A%2F%2Flocalhost%2FMediaFoundationCameraToolkit%2FCapture%2Fmaster.m3u8&amp;demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==\">https:\/\/hlsjs.video-dev.org\/demo\/<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">BTW, hls.js has even better visualization of media buffering:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"328\" src=\"https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-800x328.png\" alt=\"\" class=\"wp-image-2354\" srcset=\"https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-800x328.png 800w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-320x131.png 320w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-768x315.png 768w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-1536x629.png 1536w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-600x246.png 600w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1-1040x426.png 1040w, https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/image-1.png 1679w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-ef1d25ef-be7e-4b1b-9ed4-65fb8519ff03\" href=\"https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/Capture-20240804-9894f8a72fc402118ffd702cf76c54146a4b557a.zip\">Capture-20240804-9894f8a72fc402118ffd702cf76c54146a4b557a<\/a><a href=\"https:\/\/alax.info\/blog\/wp-content\/uploads\/2024\/08\/Capture-20240804-9894f8a72fc402118ffd702cf76c54146a4b557a.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-ef1d25ef-be7e-4b1b-9ed4-65fb8519ff03\">Download<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Serving MPEG-DASH differs from serving HLS but as long as you have video packaged in ISO BMFF segments, adding an option to also expose content as HLS (HTTP Live Streaming, RFC 8216) is not too difficult. Besides, being able to stream webcamera signal as MPEG-DASH using http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/manifest.mpd I also made it possible to use http:\/\/localhost\/MediaFoundationCameraToolkit\/Capture\/master.m3u8&hellip; <\/p>\n<p><a class=\"moretag\" href=\"https:\/\/alax.info\/blog\/2353\">Read the full article<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[38,379,424,619,486],"class_list":["post-2353","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-c","tag-h-264","tag-media-foundation","tag-mpeg-dash","tag-video"],"_links":{"self":[{"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/posts\/2353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/comments?post=2353"}],"version-history":[{"count":0,"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/posts\/2353\/revisions"}],"wp:attachment":[{"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/media?parent=2353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/categories?post=2353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alax.info\/blog\/wp-json\/wp\/v2\/tags?post=2353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}