Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
982 views
in Technique[技术] by (71.8m points)

html5 video - Streaming mp4 with vlc to html browser

I have problems streaming my webcam picture (without sound) to a html page. I'm using the latest (v2.0.2 vlc for windows) for streaming, here's the command line:

"c:Program Files (x86)VideoLANVLCvlc.exe" -I dummy  dshow:// --dshow-vdev="Logitech QuickCam Chat" --dshow-adev=none --dshow-caching=0 --sout=#transcode{vcodec=h264,vb=1024,channels=1,ab=128,samplerate=44100,width=320}:http{mux=ts,dst=:8080/webcam.mp4} 

when I open the stream in another vlc player (http://127.0.0.1:8080/webcam.mp4), I can watch the stream, but when I'm trying to embedding it to a webpage, I can see nothing! here's the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Video Test</title>
  </head>
  <body>
    <video id="video" class="projekktor" autoplay="autoplay" width="300px" preload="metadata">  
      <source src="http://127.0.0.1:8080/webcam.mp4" />
            Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.  
    </video>
  </body>
</html>

Than I'm trying to open it in the browser like:

file:///C:/videostreaming/video.html

What I can see in chrome example, is that there's network traffic, the stream is downloading, but nothing displayed.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can't transmit mp4 over http protocol using VLC

Follow this link to see the Output method / muxer matrix http://www.videolan.org/streaming-features.html

However you can try to transcode to ogg.

Try this:

"c:Program Files (x86)VideoLANVLCvlc.exe" 
-I dummy  dshow:// --dshow-vdev="Logitech QuickCam Chat" 
--dshow-adev=none --dshow-caching=0 
--sout=#transcode{vcodec=theo,vb=1024,channels=1,ab=128,samplerate=44100,width=320}:http{dst=:8080/webcam.ogg}

and in your html video tag:

<source src="http://127.0.0.1:8080/webcam.ogg"/>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...