通過webscoket實現(xiàn)聊天室視頻注意點正勒,案例是個簡單的小例子腺兴,參考了多人代碼蔑担,如有疑問可以留言露氮。本文不扯概念。
源碼代碼參見:https://gitee.com/sunhui5415/IM
1. 使用https方式本地環(huán)境先生成一個keystore钟沛,放到根目錄下,其次從application.properties中配置對應的參數(shù)局扶。
2. webscoket 使用wss方式恨统,ws只支持http協(xié)議
var socket = new WebSocket("wss://172.16.150.148:443/v?video");
3. index.html為用戶端叁扫,video.html為主播區(qū),注意修改ip和端口畜埋。
4. 調(diào)用攝像頭需要進行一些兼容性判斷莫绣,具體見代碼video.html
// getUserMedia 被標準廢除了,mediaDevices 正在取代中
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些瀏覽器部分支持 mediaDevices悠鞍。我們不能直接給對象設置 getUserMedia
// 因為這樣可能會覆蓋已有的屬性对室。這里我們只會在沒有g(shù)etUserMedia屬性的時候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先咖祭,如果有g(shù)etUserMedia的話掩宜,就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些瀏覽器根本沒實現(xiàn)它 - 那么就返回一個error到promise的reject來保持一個統(tǒng)一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否則,為老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}