使用网页img控件播放视频、动态显示图片
效果:一个网页img就可以把整段视频播放完毕(实则为一张张图片显示,并且没有声音)
(注意:此方法浏览器会有内存泄漏)
1.首先test.html文件的内容:
<html>
<head>
</head>
<body>
<img src="http://192.168.43.218/stream">
</body>
</html>
2.参考此文章,编写一个Socket程序:
https://blog.****.net/flyingleo1981/article/details/51862857
3.Socket程序模拟响应数据包
1.当Chrome浏览器连接你的Socket程序的时候要马上返回此数据包
HTTP/1.1 200 OK\r\n
Content-Type: multipart/x-mixed-replace;boundary=MyRandomString\r\n
\r\n
2.当要发送图片时候,请在数据包头部加上,(每张图片的数据包亦是如此)
--MyRandomString\r\n
Content-Type: img/jpeg\r\n
Content-Length: 1111/*你的图片文件大小*/\r\n
\r\n
/*你的图片文件全部字节*/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
3.当不发送图片的时候,请往浏览器发一个这样的数据包
\r\n--MyRandomString--\r\n
4.演示(演示动态切换显示两张图片)
使用这一技术的关键是,服务器并不是推送整个“multipart/x-mixed-replace”报文,而是每次发送后数据块。
boundary代表报文的边界,例如
Content-Type: multipart/alternative; boundary="{[(^_^)]}"
--{[(^_^)]}
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit
This is a simple mail.
--{[(^_^)]}--