资料来源:https://github.com/anoek/webrtc-group-chat-example/blob/master/client.html
我正在尝试修改此Webrtc示例以添加更改相机的功能(跨浏览器支持)。
正常……
以前我是按照以下方式完成的(订单很重要)。
假设您列出了我们所有可用的设备:
var devicesIds = []; navigator.mediaDevices.enumerateDevices().then(function(devices) { devices.forEach(function(device) { devicesIds.push(device.deviceId); }); });
现在你要切换:
1)停止当前曲目
localStream.getTracks().forEach(function(track) { track.stop(); });
2)获取新流
var constraints = {video: {deviceId: devicesIds[1]}, audio: true}; navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { replaceTracks(stream); }).catch(function(error) { });
3)替换曲目:
function replaceTracks(newStream){ detachMediaStream(elementId); newStream.getTracks().forEach(function(track) { localStream.addTrack(track); }); attachMediaStream(elementId, newStream); // optionally, if you have active peer connections: _replaceTracksForPeer(peerConnection); function _replaceTracksForPeer(peer) { peer.getSenders().map(function(sender) { sender.replaceTrack(newStream.getTracks().find(function(track) { return track.kind === sender.track.kind; })); }); } } function detachMediaStream = function(id) { var elem = document.getElementById(id); if (elem) { elem.pause(); if (typeof elem.srcObject === 'object') { elem.srcObject = null; } else { elem.src = ''; } } }; function attachMediaStream = function(id, stream) { var elem = document.getElementById(id); if (elem) { if (typeof elem.srcObject === 'object') { elem.srcObject = stream; } else { elem.src = window.URL.createObjectURL(stream); } elem.onloadedmetadata = function(e) { elem.play(); }; } else { throw new Error('Unable to attach media stream'); } };