首先使用node.js 搭建一个简易的 websocket服务器：
var cons = new Array()
var ws = require('ws').Server
var server = new ws({ port: 8888 })
server.on('connection', function (ws) {
console.log('new connection founded successfully')
cons.push(ws)
ws.on('message', function (data) {
for (var i = 0i <cons.lengthi++) {
cons[i].send(data)
}
})
ws.on('close', function () {
for (var i = 0i <cons.lengthi++) {
if (cons[i] == ws) cons.splice(i, 1)
}
})
})
console.log('websocket-server running...')
接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面
下面代码为视频者页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script src="jQuery_1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
var video = document.getElementById("video")
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d")
var w
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({ video: true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream)
video.play()
w = new WebSocket(url)
w.onopen = function () {
sendImg()
}
w.onmessage = function (e) {
sendImg()
}
}, function () {
console.log("video error")
})
var host = 'localhost'
var port = 8888
var url = 'ws://' + host + ':' + port + '/'
function sendImg() {
context.drawImage(video, 0, 0, 320, 320)
var imgData = canvas.toDataURL()
w.send(imgData)
}
}
})
</script>
</head>
<body>
<video id="video" width="640" height="480" style="background:#000" autoplay></video>
<canvas style="display:none" id="canvas" width="320" height="320"></canvas>
</body>
</html>
接下来是观看者页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script src="jQuery_1.8.2.min.js"></script>
<script>
$(function () {
var host = 'localhost'
var port = 8888
var url = 'ws://' + host + ':' + port + '/'
var w = new WebSocket(url)
w.onmessage = function (e) {
$("#canvas").attr("src", e.data)
}
})
</script>
</head>
<body>
<img id="canvas" width="320" height="320" />
</body>
</html>
注：希望可以帮到你!
经测试，有以下供参考：
代码如下：
<!DOCTYPE html><html>
<body>
<embed src="intro.wmv" width="320" height="240"/>
</body>
</html>
在 IE 11 浏览器 + Win10 64位中，运行正常：
在 Chrome 中访问，会弹出“另存为”对话框：
将源代码修改：
<embed src="intro.wmv" width="320" height="240" type="video/x-ms-wmv"/>浏览效果：
1、IE 正常显示
2、Chrome ：该插件不受支持
综上所述：
1、html 代码本身没问题。
2、从截图看，能显示播放器框架，说明客户端能正确载入 wmv 播放器。不能播放 wmv 原因，推测可能是 yi.wmv 不能被播放器正确解析（原因有多种，如 wmv 打包格式、版权证书限制等）。
